<template>
    <page-meta :page-style="'overflow-x:hidden'"></page-meta>
    <scroll-view scroll-y @scroll="handleScroll" class="digital-dashboard" :scroll-into-view="scrollIntoView"
        :scroll-with-animation="true">
        <!-- Tab切换区域 -->
        <scroll-view scroll-x class="tab-container" :scroll-into-view="scrollIntoTabItem" :scroll-with-animation="true">
            <view class="tab-list">
                <view v-for="(tab, index) in tabList" :key="index" :id="`tab-${index}`" class="tab-item"
                    :class="{ active: activeTab === index }" @click="switchTab(index)">
                    <text class="tab-text">{{ tab.name }}</text>
                    <view class="tab-indicator" v-if="activeTab === index"></view>
                </view>
            </view>
        </scroll-view>

        <!-- 右侧悬浮导航栏 -->
        <view class="side-navigation" v-if="currentNavItems && currentNavItems.length > 0"
            :class="{ collapsed: isNavCollapsed }">
            <view class="nav-container">
                <view class="nav-header" @click="toggleNavCollapse">
                    <view class="nav-title" v-if="!isNavCollapsed">快速导航</view>
                    <view class="nav-toggle">
                        <text class="toggle-icon" :class="{ rotated: isNavCollapsed }">◀</text>
                    </view>
                </view>
                <view class="nav-list" v-show="!isNavCollapsed">
                    <view v-for="(item, index) in currentNavItems" :key="item.id" class="nav-item"
                        :class="{ active: activeNavItem === item.id }" @click="scrollToComponent(item.id)">
                        <text class="nav-text">{{ item.name }}</text>
                        <view class="nav-dot" v-if="activeNavItem === item.id"></view>
                    </view>
                </view>
            </view>
        </view>
        <view id="top"> </view>
        <!-- 内容展示区域 -->
        <view class="content-container">
            <!-- 实时运营监控中心 -->
            <view v-if="activeTab === 0" class="tab-content">
                <!-- 服务区概况 -->
                <view id="overview-of-serviceArea"></view>
                <OverviewOfServiceArea />

                <!-- 交易预警 -->
                <view id="trading-alert"></view>
                <TradingAlert />

                <!-- 断面流量 -->
                <view id="trend-of-trafficFlow"></view>
                <TrendOfTrafficFlow />

                <!-- 入区车流 -->
                <view id="vehicles-entering"></view>
                <VehiclesEntering />

                <!-- 经营效益 -->
                <view id="vehicle-model-stay"></view>
                <VehicleModelStay />
            </view>

            <!-- 客群画像与消费行为分析 -->
            <view v-if="activeTab === 1" class="tab-content">
                <!-- 年龄画像 -->
                <view id="customer-age-group"></view>
                <CustomerAgeGroup />

                <!-- 性别画像 -->
                <view id="gender-customer-group"></view>
                <GenderCustomerGroup />

                <!-- 偏好类型 -->
                <view id="preference-type"></view>
                <PreferenceType />

                <!-- 客群特征分析 -->
                <view id="customer-group"></view>
                <CustomerGroup />

                <!-- 客群消费偏好 -->
                <view id="customer-consumption-preferences"></view>
                <CustomerConsumptionPreferences />

                <!-- 消费转化率对比图 -->
                <view id="consumption-conversion"></view>
                <ConsumptionConversion />

                <!-- 消费水平 -->
                <view id="consumption-level"></view>
                <ConsumptionLevel />

                <!-- 消费时段分析 -->
                <view id="consumption-period"></view>
                <ConsumptionPeriod />

                <!-- 品牌消费水平 -->
                <view id="brand-consumption-level"></view>
                <BrandConsumptionLevel />
            </view>

            <!-- 多维度经营数据分析 -->
            <view v-if="activeTab === 2" class="tab-content">
                <!-- 营收特征 -->
                <view id="business-case"></view>
                <BusinessCase />

                <!-- 区域营收占比 -->
                <view id="regional-revenue"></view>
                <RegionalRevenue />

                <!-- 业态结构占比 -->
                <view id="business-structure"></view>
                <BusinessStructure />

                <!-- 节假日营收 -->
                <view id="festival-revenue-sum-info"></view>
                <FestivalRevenueSumInfo />

            </view>

            <!-- 商户电商生态全景 -->
            <view v-if="activeTab === 3" class="tab-content">
                <!-- 会员商城 -->
                <view id="member-mall"></view>
                <MemberMall />

                <!-- 热门商品榜单 -->
                <view id="hot-product-list"></view>
                <HotProductList />

                <!-- 商户类别 -->
                <view id="brand-detail"></view>
                <BrandDetail />

                <!-- 供应商列表 -->
                <view id="supplier-list-box"></view>
                <SupplierListBox />

                <!-- 商城订单统计 -->
                <view id="mall-order-statistics"></view>
                <MallOrderStatistics />

                <!-- 本月福利金发送额度 -->
                <view id="this-month-benefits"></view>
                <ThisMonthBenefits />

                <!-- 会员消费数据分析 -->
                <view id="analysis-of-member"></view>
                <AnalysisOfMember />
            </view>
        </view>
    </scroll-view>
</template>

<script>
import OverviewOfServiceArea from './components/OverviewOfServiceArea.vue'
import TradingAlert from './components/TradingAlert.vue'
import TrendOfTrafficFlow from './components/TrendOfTrafficFlow.vue'
import VehiclesEntering from './components/VehiclesEntering.vue'
import VehicleModelStay from './components/VehicleModelStay.vue'
import CustomerAgeGroup from './components/CustomerAgeGroup.vue'
import GenderCustomerGroup from './components/GenderCustomerGroup.vue'
import PreferenceType from './components/PreferenceType.vue'
import CustomerGroup from './components/CustomerGroup.vue'
import CustomerConsumptionPreferences from './components/CustomerConsumptionPreferences.vue'
import ConsumptionConversion from './components/ConsumptionConversion.vue'
import ConsumptionLevel from './components/ConsumptionLevel.vue'
import ConsumptionPeriod from './components/ConsumptionPeriod.vue'
import BrandConsumptionLevel from './components/BrandConsumptionLevel.vue'
import BusinessCase from './components/BusinessCase.vue'
import RegionalRevenue from './components/RegionalRevenue.vue'
import BusinessStructure from './components/BusinessStructure.vue'
import FestivalRevenueSumInfo from './components/FestivalRevenueSumInfo.vue'
import MemberMall from './components/MemberMall.vue'
import HotProductList from './components/HotProductList.vue'
import BrandDetail from './components/BrandDetail.vue'
import SupplierListBox from './components/SupplierListBox.vue'
import MallOrderStatistics from './components/MallOrderStatistics.vue'
import ThisMonthBenefits from './components/ThisMonthBenefits.vue'
import AnalysisOfMember from './components/AnalysisOfMember.vue'


export default {
    components: {
        OverviewOfServiceArea,
        TradingAlert,
        TrendOfTrafficFlow,
        VehiclesEntering,
        VehicleModelStay,
        CustomerAgeGroup,
        GenderCustomerGroup,
        PreferenceType,
        CustomerGroup,
        CustomerConsumptionPreferences,
        ConsumptionConversion,
        ConsumptionLevel,
        ConsumptionPeriod,
        BrandConsumptionLevel,
        BusinessCase,
        RegionalRevenue,
        BusinessStructure,
        FestivalRevenueSumInfo,
        MemberMall,
        HotProductList,
        BrandDetail,
        SupplierListBox,
        MallOrderStatistics,
        ThisMonthBenefits,
        AnalysisOfMember
    },
    data() {
        return {
            activeTab: 0,
            tabList: [
                { name: '实时运营监控中心', key: 'business' },
                { name: '客群画像与消费行为分析', key: 'customerProfile' },
                { name: '多维度经营数据分析', key: 'businessRevenue' },
                { name: '商户电商生态全景', key: 'mallOperation' },
            ],
            // 各个Tab对应的导航栏数据
            navData: {
                business: [
                    { id: 'overview-of-serviceArea', name: '服务区概况' },
                    { id: 'trading-alert', name: '交易预警' },
                    { id: 'trend-of-trafficFlow', name: '断面流量' },
                    { id: 'vehicles-entering', name: '入区车流' },
                    { id: 'vehicle-model-stay', name: '经营效益' },
                ],
                customerProfile: [
                    { id: 'customer-age-group', name: '年龄画像' },
                    { id: 'gender-customer-group', name: '性别画像' },
                    { id: 'preference-type', name: '偏好类型' },
                    { id: 'customer-group', name: '客群特征分析' },
                    { id: 'customer-consumption-preferences', name: '客群消费偏好' },
                    { id: 'consumption-conversion', name: '消费转化率对比图' },
                    { id: 'consumption-level', name: '消费水平' },
                    { id: 'consumption-period', name: '消费时段分析' },
                    { id: 'brand-consumption-level', name: '品牌消费水平' },
                ],
                businessRevenue: [
                    { id: 'business-case', name: '营收特征' },
                    { id: 'regional-revenue', name: '区域营收占比' },
                    { id: 'business-structure', name: '业态结构占比' },
                    { id: 'festival-revenue-sum-info', name: '节假日营收' },
                ],
                mallOperation: [
                    { id: 'member-mall', name: '会员商城' },
                    { id: 'hot-product-list', name: '热门商品榜单' },
                    { id: 'brand-detail', name: '商户类别' },
                    { id: 'supplier-list-box', name: '供应商列表' },
                    { id: 'mall-order-statistics', name: '商城订单统计' },
                    { id: 'this-month-benefits', name: '本月福利金发送额度' },
                    { id: 'analysis-of-member', name: '会员消费数据分析' },
                ]
            },
            // 当前活动的导航项
            activeNavItem: '',
            // 导航栏是否收缩
            isNavCollapsed: true,
            // 暂时将这一次进入 的数据缓存一下 
            sessionData: {},
            pageScrollTop: 0,
            scrollIntoView: "",
            scrollIntoTabItem: ""
        }
    },
    computed: {
        // 获取当前Tab的导航项
        currentNavItems() {
            const currentTabKey = this.tabList[this.activeTab].key;
            return this.navData[currentTabKey] || [];
        }
    },
    onLoad() {
        this.fetchTabData(this.activeTab);

    },

    onShow() {
        // 隐藏小程序原生tabbar
        uni.hideTabBar();
    },

    onReady() {
        // 初始化活动导航项
        const currentTabKey = this.tabList[this.activeTab].key;
        const navItems = this.navData[currentTabKey] || [];
        if (navItems.length > 0) {
            this.activeNavItem = navItems[0].id;
        }
    },
    methods: {
        switchTab(index) {
            this.scrollIntoView = 'top'
            this.activeTab = index;
            this.scrollIntoTabItem = `tab-${index}`
            // 模拟数据加载
            this.fetchTabData(index);

            console.log('this.scrollIntoTabItemthis.scrollIntoTabItem', this.scrollIntoTabItem);
        },

        // 滚动到指定组件
        scrollToComponent(componentId) {
            this.scrollIntoView = componentId
            this.activeNavItem = componentId;

        },

        // 切换导航栏收缩状态
        toggleNavCollapse() {
            this.isNavCollapsed = !this.isNavCollapsed;
        },

        handleScroll(e) {
            this.pageScrollTop = e.detail.scrollTop
        },

        // 获取各个tab的数据
        async fetchTabData(tabIndex) {
            // 切换Tab时重置活动导航项
            const currentTabKey = this.tabList[tabIndex].key;
            const navItems = this.navData[currentTabKey] || [];
            if (navItems.length > 0) {
                this.activeNavItem = navItems[0].id;
            }
        }
    }
}
</script>

<style scoped lang="less">
@primary-color: #667eea;
@secondary-color: #764ba2;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #ff4d4f;
@text-primary: #333;
@text-secondary: #666;
@text-light: #999;
@bg-light: #f8f9fb;
@bg-white: #ffffff;
@border-radius: 16rpx;
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
@shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06);

.digital-dashboard {
    height: 100vh;
    background: linear-gradient(180deg, @bg-light 0%, #e9ecf4 100%);

    .tab-container {
        background: @bg-white;
        box-shadow: @shadow-light;
        // position: sticky;
        position: fixed;
        top: 0;
        z-index: 100;

        .tab-list {
            height: 80rpx;
            display: flex;
            padding: 0 32rpx;
            box-sizing: border-box;
            position: relative;
            width: 100%;
            overflow-x: auto;
            scrollbar-width: none;
            /* 隐藏滚动条 Firefox */
            -ms-overflow-style: none;
            /* 隐藏滚动条 IE/Edge */

            &::-webkit-scrollbar {
                display: none;
                /* 隐藏滚动条 Chrome/Safari */
            }

            .tab-item {
                position: relative;
                padding: 16rpx 24rpx;
                margin-right: 16rpx;
                flex-shrink: 0;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
                min-width: fit-content;

                &:last-child {
                    margin-right: 0;
                }

                &.active {
                    .tab-text {
                        color: @primary-color;
                        font-weight: 600;
                        transform: translateY(-1px);
                    }

                    .tab-indicator {
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 48rpx;
                        height: 6rpx;
                        background: linear-gradient(90deg, @primary-color, @secondary-color);
                        border-radius: 3rpx;
                        animation: slideIn 0.3s ease-out;
                    }
                }

                .tab-text {
                    font-size: 28rpx;
                    color: @text-secondary;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    white-space: nowrap;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -4rpx;
                        left: 0;
                        width: 100%;
                        height: 2rpx;
                        background: @primary-color;
                        transform: scaleX(0);
                        transition: transform 0.3s ease;
                    }
                }

                &:active {
                    transform: scale(0.95);
                }
            }
        }
    }

    .content-container {
        padding: 32rpx;
        padding-top: 92rpx;

        .tab-content {
            /* 移除切换动画 */

            .chart-grid {
                .chart-row {
                    margin-bottom: 24rpx;

                    .chart-card {
                        background: @bg-white;
                        border-radius: @border-radius;
                        padding: 24rpx;
                        box-shadow: @shadow;
                        transition: all 0.3s ease;
                        position: relative;
                        overflow: hidden;
                        box-sizing: border-box;

                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            height: 2rpx;
                            background: linear-gradient(90deg, @primary-color, @secondary-color);
                            opacity: 0;
                            transition: opacity 0.3s ease;
                        }

                        &:active {
                            transform: translateY(-2rpx);
                            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

                            &::before {
                                opacity: 1;
                            }
                        }

                        &.full {
                            width: 100%;
                            min-height: 400rpx;
                        }

                        .chart-header {
                            margin-bottom: 20rpx;

                            .chart-title {
                                font-size: 28rpx;
                                font-weight: 600;
                                color: @text-primary;
                                margin-bottom: 4rpx;
                            }

                            .chart-subtitle {
                                font-size: 22rpx;
                                color: @text-light;
                            }
                        }

                        .chart-placeholder {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            height: 300rpx;
                            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                            border-radius: 12rpx;
                            position: relative;
                            overflow: hidden;

                            &.large {
                                height: 400rpx;
                            }

                            &::before {
                                content: '';
                                position: absolute;
                                top: -50%;
                                left: -50%;
                                width: 200%;
                                height: 200%;
                                background: radial-gradient(circle, rgba(103, 126, 234, 0.1) 0%, transparent 70%);
                                animation: rotate 30s infinite linear;
                            }

                            .placeholder-text {
                                font-size: 32rpx;
                                color: @text-secondary;
                                margin-bottom: 8rpx;
                                position: relative;
                                z-index: 1;
                            }

                            .placeholder-desc {
                                font-size: 24rpx;
                                color: @text-light;
                                position: relative;
                                z-index: 1;
                            }
                        }
                    }
                }
            }
        }
    }

    .side-navigation {
        position: fixed;
        right: 24rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 16rpx;
        box-shadow: @shadow;
        border: 1rpx solid rgba(255, 255, 255, 0.2);
        max-height: 70vh;
        overflow-y: auto;
        transition: all 0.3s ease;

        &::-webkit-scrollbar {
            width: 4rpx;
        }

        &::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2rpx;
        }

        &::-webkit-scrollbar-thumb {
            background: @primary-color;
            border-radius: 2rpx;
        }

        // 收缩状态
        &.collapsed {
            min-width: auto;
            max-width: auto;

            .nav-container {
                padding: 0;
            }
        }

        .nav-container {
            padding: 0 16rpx;

            .nav-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16rpx;
                border-bottom: 1rpx solid #f0f0f0;
                margin-bottom: 8rpx;
                cursor: pointer;

                .nav-title {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: @text-primary;
                }

                .nav-toggle {
                    .toggle-icon {
                        font-size: 20rpx;
                        color: @text-secondary;
                        transition: transform 0.3s ease;

                        &.rotated {
                            transform: rotate(180deg);
                        }
                    }
                }

                &:hover {
                    background: rgba(102, 126, 234, 0.05);
                    border-radius: 8rpx;
                }
            }

            .nav-list {
                .nav-item {
                    position: relative;
                    padding: 16rpx 20rpx;
                    margin-bottom: 8rpx;
                    border-radius: 12rpx;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &:hover {
                        background: rgba(102, 126, 234, 0.1);
                        transform: translateX(-4rpx);
                    }

                    &.active {
                        background: linear-gradient(90deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
                        border-left: 4rpx solid @primary-color;
                        padding-left: 16rpx;

                        .nav-text {
                            color: @primary-color;
                            font-weight: 600;
                        }
                    }

                    .nav-text {
                        font-size: 22rpx;
                        color: @text-secondary;
                        line-height: 1.4;
                        flex: 1;
                        transition: all 0.3s ease;
                    }

                    .nav-dot {
                        width: 8rpx;
                        height: 8rpx;
                        background: @primary-color;
                        border-radius: 50%;
                        animation: pulse 2s infinite;
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideIn {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 48rpx;
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>