<template>
    <div class="store-dashboard">
        <!-- 顶部：门店信息 + 核心指标 -->
        <div class="dashboard-header">
            <div class="header-left">
                <div class="store-info">
                    <div class="store-avatar">
                        <i class="el-icon-office-building"></i>
                    </div>
                    <div class="store-details">
                        <div class="store-name-row">
                            <h2 class="store-name">示例门店名称</h2>
                            <el-tag type="success" size="small">正常营业</el-tag>
                        </div>
                        <div class="store-meta">
                            <span class="meta-item"><i class="el-icon-tickets"></i> MD2024001</span>
                            <span class="meta-item"><i class="el-icon-location"></i> 北京市朝阳区</span>
                            <span class="meta-item"><i class="el-icon-calendar"></i> 2024-01-15</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-right">
                <div class="core-stats">
                    <div class="core-stat-item primary">
                        <div class="stat-label">开单业绩</div>
                        <div class="stat-value">￥1,258,680</div>
                        <div class="stat-trend up">+12.5%</div>
                    </div>
                    <div class="core-stat-item success">
                        <div class="stat-label">消耗业绩</div>
                        <div class="stat-value">￥986,420</div>
                        <div class="stat-trend up">+8.3%</div>
                    </div>
                    <div class="core-stat-item info">
                        <div class="stat-label">完成率</div>
                        <div class="stat-value">85.6%</div>
                        <div class="stat-trend up">+2.1%</div>
                    </div>
                    <div class="core-stat-item warning">
                        <div class="stat-label">净业绩</div>
                        <div class="stat-value">￥272,260</div>
                        <div class="stat-trend up">+15.8%</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 核心KPI指标 -->
        <div class="kpi-section">
            <div class="kpi-card" v-for="(kpi, index) in kpiList" :key="index" :class="kpi.type">
                <div class="kpi-icon">
                    <i :class="kpi.icon"></i>
                </div>
                <div class="kpi-content">
                    <div class="kpi-label">{{ kpi.label }}</div>
                    <div class="kpi-value">
                        <span class="unit" v-if="kpi.isMoney">￥</span>{{ kpi.value }}
                        <span class="unit" v-if="kpi.isPercent">%</span>
                    </div>
                </div>
                <div class="kpi-trend" v-if="kpi.trend">
                    <i :class="kpi.trendIcon"></i>
                    <span>{{ kpi.trend }}</span>
                </div>
            </div>
        </div>

        <!-- 主要内容区域：左右分栏 -->
        <div class="main-content">
            <!-- 左侧：图表区域 -->
            <div class="content-left">
                <!-- 第一行：业绩趋势图 + 品项分类占比 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="16">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-data-line"></i>
                                <span>近12个月业绩趋势</span>
                            </div>
                            <div ref="trendChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-pie-chart"></i>
                                <span>品项分类占比</span>
                            </div>
                            <div ref="categoryChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第二行：门店综合能力雷达图 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="24">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-aim"></i>
                                <span>门店综合能力分析</span>
                            </div>
                            <div ref="radarChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第三行：业绩对比分析 + 各分类业绩堆叠对比 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-marketing"></i>
                                <span>业绩对比分析</span>
                            </div>
                            <div ref="compareChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-data"></i>
                                <span>各分类业绩堆叠对比</span>
                            </div>
                            <div ref="stackedChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第四行：会员转化漏斗 + 客单价与项目数关系 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-sort"></i>
                                <span>会员转化漏斗</span>
                            </div>
                            <div ref="funnelChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-marketing"></i>
                                <span>客单价与项目数关系分析</span>
                            </div>
                            <div ref="scatterChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第五行：一周运营热力图 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="24">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-grid"></i>
                                <span>一周运营热力图</span>
                            </div>
                            <div ref="heatmapChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第六行：品项开单排行 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="24">
                        <el-card class="table-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-shopping-bag-1"></i>
                                <span>品项开单排行（Top 10）</span>
                            </div>
                            <el-table :data="topBillingItems" size="small" border stripe>
                                <el-table-column type="index" label="排名" width="60" align="center">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index < 3"
                                            :type="['danger', 'warning', 'success'][scope.$index]" size="mini">
                                            {{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else>{{ scope.$index + 1 }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemName" label="品项名称" min-width="180" />
                                <el-table-column prop="billingAmount" label="开单金额" width="140" align="right">
                                    <template slot-scope="scope">
                                        <span style="font-weight: 600; color: #67C23A;">¥{{
                                            formatMoney(scope.row.billingAmount) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="billingCount" label="开单次数" width="100" align="center" />
                                <el-table-column prop="category" label="分类" width="80" align="center">
                                    <template slot-scope="scope">
                                        <el-tag size="mini" :type="getCategoryType(scope.row.category)">{{
                                            scope.row.category }}</el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第七行：健康师业绩排行 + 消耗品项排行 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="12">
                        <el-card class="table-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-user-solid"></i>
                                <span>健康师业绩排行（Top 10）</span>
                            </div>
                            <el-table :data="healthCoachRanking" size="small" border stripe>
                                <el-table-column type="index" label="排名" width="60" align="center" />
                                <el-table-column prop="name" label="健康师姓名" min-width="120" />
                                <el-table-column prop="billingPerformance" label="开单业绩" width="120" align="right">
                                    <template slot-scope="scope">￥{{ formatMoney(scope.row.billingPerformance)
                                    }}</template>
                                </el-table-column>
                                <el-table-column prop="consumePerformance" label="消耗业绩" width="120" align="right">
                                    <template slot-scope="scope">￥{{ formatMoney(scope.row.consumePerformance)
                                    }}</template>
                                </el-table-column>
                                <el-table-column prop="totalPerformance" label="总业绩" width="120" align="right">
                                    <template slot-scope="scope">￥{{ formatMoney(scope.row.totalPerformance)
                                    }}</template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="table-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-goods"></i>
                                <span>消耗品项排行（Top 10）</span>
                            </div>
                            <el-table :data="topConsumeItems" size="small" border stripe>
                                <el-table-column type="index" label="排名" width="60" align="center" />
                                <el-table-column prop="itemName" label="品项名称" min-width="150" />
                                <el-table-column prop="consumeAmount" label="消耗金额" width="120" align="right">
                                    <template slot-scope="scope">
                                        <span style="font-weight: 600; color: #409EFF;">￥{{
                                            formatMoney(scope.row.consumeAmount) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="category" label="分类" width="80" />
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 右侧：指标卡片区域 -->
            <div class="content-right">
                <!-- 业绩概览 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-data-line"></i>
                        <span>业绩概览</span>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item" v-for="(item, index) in performanceList" :key="index">
                            <div class="metric-icon" :style="{ background: item.iconBg }">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="metric-info">
                                <div class="metric-label">{{ item.label }}</div>
                                <div class="metric-value">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 运营指标 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-s-data"></i>
                        <span>运营指标</span>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item" v-for="(item, index) in operationList" :key="index">
                            <div class="metric-icon" :style="{ background: item.iconBg }">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="metric-info">
                                <div class="metric-label">{{ item.label }}</div>
                                <div class="metric-value">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 会员分析 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-user"></i>
                        <span>会员分析</span>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item" v-for="(item, index) in memberList" :key="index">
                            <div class="metric-icon" :style="{ background: item.iconBg }">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="metric-info">
                                <div class="metric-label">{{ item.label }}</div>
                                <div class="metric-value">{{ item.value }}</div>
                                <div class="metric-rate" v-if="item.rate">{{ item.rate }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 目标完成度仪表盘 -->
                <el-card class="chart-card-small" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-odometer"></i>
                        <span>目标完成度</span>
                    </div>
                    <div ref="gaugeChart" class="chart-container-small"></div>
                </el-card>

                <!-- 各分类业绩占比趋势 -->
                <el-card class="chart-card-small" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-data-line"></i>
                        <span>各分类占比趋势</span>
                    </div>
                    <div ref="stackedAreaChart" class="chart-container-small"></div>
                </el-card>

                <!-- 门店排名对比 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-trophy"></i>
                        <span>门店排名对比</span>
                    </div>
                    <div class="ranking-content">
                        <div class="ranking-item">
                            <div class="ranking-label">业绩排名</div>
                            <div class="ranking-value">
                                <span class="rank-number">{{ comparison.performanceRanking }}</span>
                                <span class="rank-total">/ {{ comparison.totalStoreCount }}</span>
                            </div>
                            <div class="ranking-badge"
                                :class="getRankingClass(comparison.performanceRanking, comparison.totalStoreCount)">
                                {{ getRankingText(comparison.performanceRanking, comparison.totalStoreCount) }}
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div class="comparison-stats">
                            <div class="stat-row">
                                <span class="stat-label">同类型门店平均业绩</span>
                                <span class="stat-value">¥{{ formatMoney(comparison.avgPerformanceSameType) }}</span>
                            </div>
                            <div class="stat-row">
                                <span class="stat-label">同类型门店数</span>
                                <span class="stat-value">{{ comparison.sameTypeStoreCount }}家</span>
                            </div>
                            <div class="stat-row">
                                <span class="stat-label">同组织门店平均业绩</span>
                                <span class="stat-value">¥{{ formatMoney(comparison.avgPerformanceSameOrg) }}</span>
                            </div>
                            <div class="stat-row">
                                <span class="stat-label">同组织门店数</span>
                                <span class="stat-value">{{ comparison.sameOrgStoreCount }}家</span>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 本月经营提示 -->
                <el-card class="tips-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-warning"></i>
                        <span>本月经营提示</span>
                    </div>
                    <div class="tips-content">
                        <div class="tip-item" v-for="(tip, index) in operationTips" :key="index" :class="tip.type">
                            <i :class="tip.icon"></i>
                            <span>{{ tip.text }}</span>
                        </div>
                    </div>
                </el-card>

                <!-- 快速数据洞察 -->
                <el-card class="insight-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-data-analysis"></i>
                        <span>快速数据洞察</span>
                    </div>
                    <div class="insight-content">
                        <div class="insight-item" v-for="(insight, index) in dataInsights" :key="index">
                            <div class="insight-header">
                                <span class="insight-title">{{ insight.title }}</span>
                                <el-tag :type="insight.tagType" size="mini">{{ insight.tag }}</el-tag>
                            </div>
                            <div class="insight-value">{{ insight.value }}</div>
                            <div class="insight-desc">{{ insight.desc }}</div>
                        </div>
                    </div>
                </el-card>

                <!-- 本月关键指标 -->
                <el-card class="key-metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-s-flag"></i>
                        <span>本月关键指标</span>
                    </div>
                    <div class="key-metrics-content">
                        <div class="progress-item" v-for="(metric, index) in keyMetrics" :key="index">
                            <div class="progress-header">
                                <span class="progress-label">{{ metric.label }}</span>
                                <span class="progress-value">{{ metric.value }}%</span>
                            </div>
                            <el-progress :percentage="metric.value" :color="metric.color"
                                :stroke-width="8"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">

        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'StoreDashboard',
    data() {
        return {
            kpiList: [
                { label: '开单次数', value: '1,256', icon: 'el-icon-s-order', type: 'primary', trend: '+5.2%', trendIcon: 'el-icon-top' },
                { label: '消耗次数', value: '2,458', icon: 'el-icon-s-marketing', type: 'success', trend: '+3.7%', trendIcon: 'el-icon-top' },
                { label: '人头数', value: '1,258', icon: 'el-icon-user', type: 'info', trend: '+4.1%', trendIcon: 'el-icon-top' },
                { label: '人次', value: '3,456', icon: 'el-icon-user-solid', type: 'warning', trend: '+6.2%', trendIcon: 'el-icon-top' },
                { label: '项目数', value: '5,678', icon: 'el-icon-menu', type: 'primary', trend: '+3.5%', trendIcon: 'el-icon-top' },
                { label: '客单价', value: '￥285', icon: 'el-icon-coin', type: 'success', isMoney: true, trend: '+2.8%', trendIcon: 'el-icon-top' }
            ],
            performanceList: [
                { label: '开单次数', value: '1,256', icon: 'el-icon-document', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                { label: '消耗次数', value: '2,458', icon: 'el-icon-goods', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                { label: '退卡次数', value: '23', icon: 'el-icon-refresh-left', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                { label: '平均开单金额', value: '￥1,002', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
                { label: '平均消耗金额', value: '￥401', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                { label: '剩余权益', value: '￥325.69万', icon: 'el-icon-wallet', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
                { label: '目标业绩', value: '￥120万', icon: 'el-icon-aim', iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                { label: '退卡金额', value: '￥4.57万', icon: 'el-icon-money', iconBg: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' }
            ],
            operationList: [
                { label: '人头数', value: '1,258', icon: 'el-icon-user', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                { label: '人次', value: '3,456', icon: 'el-icon-user-solid', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                { label: '项目数', value: '5,678', icon: 'el-icon-menu', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                { label: '客单价', value: '￥285', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
                { label: '项目单价', value: '￥174', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                { label: '人均项目数', value: '4.51', icon: 'el-icon-s-grid', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' }
            ],
            memberList: [
                { label: '总会员数', value: '3,256', icon: 'el-icon-user', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                { label: '本月新增', value: '156', icon: 'el-icon-user-solid', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                { label: '活跃会员', value: '1,856', icon: 'el-icon-success', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', rate: '57.0%' },
                { label: '沉睡会员', value: '856', icon: 'el-icon-warning', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', rate: '26.3%' },
                { label: '生美会员', value: '2,156', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                { label: '医美会员', value: '856', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
                { label: '科美会员', value: '456', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                { label: '教育会员', value: '256', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' }
            ],
            healthCoachRanking: [
                { name: '张健康', billingPerformance: 256800, consumePerformance: 198600, totalPerformance: 455400 },
                { name: '李美丽', billingPerformance: 198600, consumePerformance: 156800, totalPerformance: 355400 },
                { name: '王优雅', billingPerformance: 186500, consumePerformance: 145600, totalPerformance: 332100 },
                { name: '刘青春', billingPerformance: 165800, consumePerformance: 128900, totalPerformance: 294700 },
                { name: '陈优雅', billingPerformance: 145600, consumePerformance: 112500, totalPerformance: 258100 },
                { name: '杨美丽', billingPerformance: 128900, consumePerformance: 98600, totalPerformance: 227500 },
                { name: '赵健康', billingPerformance: 112500, consumePerformance: 85600, totalPerformance: 198100 },
                { name: '钱优雅', billingPerformance: 98600, consumePerformance: 75600, totalPerformance: 174200 },
                { name: '孙美丽', billingPerformance: 85600, consumePerformance: 65800, totalPerformance: 151400 },
                { name: '周健康', billingPerformance: 75600, consumePerformance: 56800, totalPerformance: 132400 }
            ],
            topBillingItems: [
                { itemName: '高端护理套餐', billingAmount: 156800, billingCount: 45, category: '生美' },
                { itemName: '医美美容项目', billingAmount: 128600, billingCount: 38, category: '医美' },
                { itemName: 'SPA身体护理', billingAmount: 98500, billingCount: 52, category: '生美' },
                { itemName: '激光美容疗程', billingAmount: 89600, billingCount: 28, category: '医美' },
                { itemName: '皮肤管理项目', billingAmount: 75800, billingCount: 42, category: '科美' },
                { itemName: '面部深度护理', billingAmount: 68900, billingCount: 56, category: '生美' },
                { itemName: '抗衰美容项目', billingAmount: 58600, billingCount: 22, category: '医美' },
                { itemName: '美白亮肤疗程', billingAmount: 48900, billingCount: 35, category: '科美' },
                { itemName: '眼部精华护理', billingAmount: 42800, billingCount: 48, category: '生美' },
                { itemName: '补水保湿项目', billingAmount: 38600, billingCount: 62, category: '生美' }
            ],
            topConsumeItems: [
                { itemName: '面部护理套餐', consumeAmount: 125680, category: '生美' },
                { itemName: '身体SPA护理', consumeAmount: 98600, category: '生美' },
                { itemName: '激光美容项目', consumeAmount: 85600, category: '医美' },
                { itemName: '抗衰老治疗', consumeAmount: 75600, category: '医美' },
                { itemName: '皮肤管理项目', consumeAmount: 65800, category: '科美' },
                { itemName: '眼部护理', consumeAmount: 56800, category: '生美' },
                { itemName: '紧致提升项目', consumeAmount: 45600, category: '医美' },
                { itemName: '美白亮肤项目', consumeAmount: 38900, category: '科美' },
                { itemName: '深层清洁护理', consumeAmount: 32800, category: '生美' },
                { itemName: '补水保湿项目', consumeAmount: 28900, category: '生美' }
            ],
            dailyData: [
                { date: '2024-12-01', headCount: 45, personCount: 128, projectCount: 256, billingPerformance: 45680, consumePerformance: 32890 },
                { date: '2024-12-02', headCount: 52, personCount: 145, projectCount: 289, billingPerformance: 52890, consumePerformance: 38960 },
                { date: '2024-12-03', headCount: 48, personCount: 132, projectCount: 268, billingPerformance: 48960, consumePerformance: 35280 },
                { date: '2024-12-04', headCount: 56, personCount: 156, projectCount: 312, billingPerformance: 56890, consumePerformance: 41250 },
                { date: '2024-12-05', headCount: 49, personCount: 138, projectCount: 278, billingPerformance: 49860, consumePerformance: 36580 },
                { date: '2024-12-06', headCount: 58, personCount: 162, projectCount: 325, billingPerformance: 59860, consumePerformance: 43280 },
                { date: '2024-12-07', headCount: 62, personCount: 178, projectCount: 356, billingPerformance: 62890, consumePerformance: 45680 },
                { date: '2024-12-08', headCount: 55, personCount: 152, projectCount: 304, billingPerformance: 55860, consumePerformance: 40250 },
                { date: '2024-12-09', headCount: 51, personCount: 142, projectCount: 284, billingPerformance: 51860, consumePerformance: 37580 },
                { date: '2024-12-10', headCount: 59, personCount: 165, projectCount: 330, billingPerformance: 59860, consumePerformance: 43280 }
            ],
            trendChart: null,
            categoryChart: null,
            compareChart: null,
            stackedChart: null,
            funnelChart: null,
            scatterChart: null,
            heatmapChart: null,
            radarChart: null,
            gaugeChart: null,
            stackedAreaChart: null,
            comparison: {
                performanceRanking: 5,
                totalStoreCount: 28,
                avgPerformanceSameType: 1156800,
                sameTypeStoreCount: 12,
                avgPerformanceSameOrg: 1089600,
                sameOrgStoreCount: 8
            },
            operationTips: [
                { type: 'success', icon: 'el-icon-success', text: '本月业绩完成度良好,保持当前节奏' },
                { type: 'warning', icon: 'el-icon-warning', text: '沉睡会员占比26.3%,建议加强会员唤醒' },
                { type: 'info', icon: 'el-icon-info', text: '客单价¥285,可通过项目组合提升' },
                { type: 'warning', icon: 'el-icon-warning', text: '退卡金额较上月增长,需关注服务质量' }
            ],
            dataInsights: [
                { title: '最佳营业时段', tag: '热门', tagType: 'danger', value: '14:00-17:00', desc: '此时段客流量最高,建议配置更多人手' },
                { title: '高价值会员', tag: '重点', tagType: 'warning', value: '156人', desc: '单次消费超过¥1000,需重点维护' },
                { title: '项目转化率', tag: '优秀', tagType: 'success', value: '68.5%', desc: '体验项目转化为正式开卡的比例' },
                { title: '复购周期', tag: '正常', tagType: 'info', value: '28天', desc: '会员平均复购间隔,保持稳定' }
            ],
            keyMetrics: [
                { label: '目标完成度', value: 85.6, color: '#67C23A' },
                { label: '会员活跃度', value: 57.0, color: '#409EFF' },
                { label: '项目满意度', value: 92.3, color: '#E6A23C' },
                { label: '员工效率', value: 78.5, color: '#F56C6C' }
            ]
        }
    },
    mounted() {
        this.initCharts()
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        if (this.trendChart) this.trendChart.dispose()
        if (this.categoryChart) this.categoryChart.dispose()
        if (this.compareChart) this.compareChart.dispose()
        if (this.stackedChart) this.stackedChart.dispose()
        if (this.funnelChart) this.funnelChart.dispose()
        if (this.scatterChart) this.scatterChart.dispose()
        if (this.heatmapChart) this.heatmapChart.dispose()
        if (this.radarChart) this.radarChart.dispose()
        if (this.gaugeChart) this.gaugeChart.dispose()
        if (this.stackedAreaChart) this.stackedAreaChart.dispose()
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        initCharts() {
            this.$nextTick(() => {
                this.renderTrendChart()
                this.renderCategoryChart()
                this.renderCompareChart()
                this.renderStackedChart()
                this.renderFunnelChart()
                this.renderScatterChart()
                this.renderHeatmapChart()
                this.renderRadarChart()
                this.renderGaugeChart()
                this.renderStackedAreaChart()
            })
        },
        renderTrendChart() {
            if (!this.$refs.trendChart) return
            this.trendChart = echarts.init(this.$refs.trendChart)
            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
                legend: { data: ['开单业绩', '消耗业绩', '净业绩'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'category', data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12'] },
                yAxis: { type: 'value', axisLabel: { formatter: '￥{value}' } },
                series: [
                    { name: '开单业绩', type: 'line', smooth: true, data: [856000, 928000, 1025000, 1156000, 1089000, 1125000, 1186000, 1258000, 1156000, 1289000, 1356000, 1258680], itemStyle: { color: '#409EFF' }, areaStyle: { color: 'rgba(64, 158, 255, 0.1)' } },
                    { name: '消耗业绩', type: 'line', smooth: true, data: [658000, 712000, 786000, 856000, 798000, 825000, 868000, 912000, 856000, 936000, 986000, 986420], itemStyle: { color: '#67C23A' }, areaStyle: { color: 'rgba(103, 194, 58, 0.1)' } },
                    { name: '净业绩', type: 'line', smooth: true, data: [198000, 216000, 239000, 300000, 291000, 300000, 318000, 346000, 300000, 353000, 370000, 272260], itemStyle: { color: '#E6A23C' }, areaStyle: { color: 'rgba(230, 162, 60, 0.1)' } }
                ]
            }
            this.trendChart.setOption(option)
        },
        renderCategoryChart() {
            if (!this.$refs.categoryChart) return
            this.categoryChart = echarts.init(this.$refs.categoryChart)
            const option = {
                tooltip: { trigger: 'item' },
                legend: { show: false },
                series: [{
                    name: '品项分类',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: true,
                    itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
                    label: { show: true, position: 'outside', formatter: '{b}\n{c}', fontSize: 12 },
                    labelLine: { show: true, length: 15, length2: 10 },
                    data: [
                        { value: 456800, name: '生美', itemStyle: { color: '#A8D5E2' } },
                        { value: 256800, name: '医美', itemStyle: { color: '#B8E6B8' } },
                        { value: 198600, name: '科美', itemStyle: { color: '#FFD4A3' } },
                        { value: 74220, name: '产品', itemStyle: { color: '#E6C1E6' } }
                    ]
                }]
            }
            this.categoryChart.setOption(option)
        },
        renderCompareChart() {
            if (!this.$refs.compareChart) return
            this.compareChart = echarts.init(this.$refs.compareChart)
            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                legend: { data: ['开单业绩', '消耗业绩'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
                yAxis: { type: 'value', axisLabel: { formatter: value => value >= 10000 ? (value / 10000).toFixed(1) + '万' : value } },
                series: [
                    { name: '开单业绩', type: 'bar', data: [856, 928, 1025, 1156, 1089, 1125, 1186, 1258, 1156, 1289, 1356, 1258], itemStyle: { color: '#409EFF' } },
                    { name: '消耗业绩', type: 'bar', data: [658, 712, 786, 856, 798, 825, 868, 912, 856, 936, 986, 986], itemStyle: { color: '#67C23A' } }
                ]
            }
            this.compareChart.setOption(option)
        },
        renderStackedChart() {
            if (!this.$refs.stackedChart) return
            this.stackedChart = echarts.init(this.$refs.stackedChart)
            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                legend: { data: ['生美', '医美', '科美', '产品'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
                yAxis: { type: 'value', axisLabel: { formatter: value => value >= 10000 ? (value / 10000).toFixed(1) + '万' : value } },
                series: [
                    { name: '生美', type: 'bar', stack: 'total', data: [320, 350, 380, 420, 390, 410, 450, 480, 420, 460, 500, 480], itemStyle: { color: '#A8D5E2' } },
                    { name: '医美', type: 'bar', stack: 'total', data: [180, 200, 220, 250, 230, 240, 260, 280, 250, 270, 290, 280], itemStyle: { color: '#B8E6B8' } },
                    { name: '科美', type: 'bar', stack: 'total', data: [140, 150, 160, 180, 170, 175, 190, 200, 180, 195, 210, 200], itemStyle: { color: '#FFD4A3' } },
                    { name: '产品', type: 'bar', stack: 'total', data: [50, 55, 60, 70, 65, 68, 75, 80, 70, 78, 85, 80], itemStyle: { color: '#E6C1E6' } }
                ]
            }
            this.stackedChart.setOption(option)
        },
        renderFunnelChart() {
            if (!this.$refs.funnelChart) return
            this.funnelChart = echarts.init(this.$refs.funnelChart)
            const option = {
                tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
                legend: { data: ['访问', '咨询', '到店', '体验', '开单', '复购'], top: 10 },
                series: [{
                    name: '会员转化',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 10000,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: { show: true, position: 'inside', formatter: '{b}: {c}' },
                    labelLine: { length: 10, lineStyle: { width: 1, type: 'solid' } },
                    itemStyle: { borderColor: '#fff', borderWidth: 1 },
                    emphasis: { label: { fontSize: 20 } },
                    data: [
                        { value: 10000, name: '访问', itemStyle: { color: '#409EFF' } },
                        { value: 8000, name: '咨询', itemStyle: { color: '#67C23A' } },
                        { value: 6000, name: '到店', itemStyle: { color: '#E6A23C' } },
                        { value: 4000, name: '体验', itemStyle: { color: '#F56C6C' } },
                        { value: 2000, name: '开单', itemStyle: { color: '#909399' } },
                        { value: 1500, name: '复购', itemStyle: { color: '#606266' } }
                    ]
                }]
            }
            this.funnelChart.setOption(option)
        },
        renderScatterChart() {
            if (!this.$refs.scatterChart) return
            this.scatterChart = echarts.init(this.$refs.scatterChart)
            const option = {
                tooltip: { trigger: 'item', formatter: '客单价: {c[0]}<br/>项目数: {c[1]}<br/>会员数: {c[2]}' },
                legend: { data: ['会员分布'], top: 10 },
                grid: { left: '3%', right: '7%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'value', name: '客单价(元)', nameLocation: 'middle', nameGap: 30 },
                yAxis: { type: 'value', name: '项目数', nameLocation: 'middle', nameGap: 50 },
                series: [{
                    name: '会员分布',
                    type: 'scatter',
                    symbolSize: data => Math.sqrt(data[2]) * 2,
                    data: [
                        [285, 4.5, 320], [320, 5.2, 280], [250, 3.8, 350], [380, 6.5, 180], [290, 4.8, 300],
                        [350, 5.8, 220], [280, 4.2, 310], [420, 7.2, 150], [310, 5.0, 260], [360, 6.0, 200],
                        [270, 4.0, 330], [390, 6.8, 170], [300, 4.9, 290], [370, 6.2, 210], [260, 3.9, 340]
                    ],
                    itemStyle: { color: '#409EFF', opacity: 0.6 }
                }]
            }
            this.scatterChart.setOption(option)
        },
        renderHeatmapChart() {
            if (!this.$refs.heatmapChart) return
            this.heatmapChart = echarts.init(this.$refs.heatmapChart)
            const hours = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            const times = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00']
            const data = []
            for (let i = 0; i < hours.length; i++) {
                for (let j = 0; j < times.length; j++) {
                    const value = Math.floor(Math.random() * 100)
                    data.push([j, i, value])
                }
            }
            const option = {
                tooltip: { position: 'top', formatter: params => `${hours[params.value[1]]} ${times[params.value[0]]}<br/>客流量: ${params.value[2]}` },
                grid: { height: '50%', top: '10%' },
                xAxis: { type: 'category', data: times, splitArea: { show: true }, position: 'top' },
                yAxis: { type: 'category', data: hours, splitArea: { show: true } },
                visualMap: {
                    min: 0,
                    max: 100,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '5%',
                    inRange: { color: ['#e0f3ff', '#409EFF', '#1d4ed8'] }
                },
                series: [{
                    name: '客流量',
                    type: 'heatmap',
                    data: data,
                    label: { show: true },
                    emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
                }]
            }
            this.heatmapChart.setOption(option)
        },
        renderRadarChart() {
            if (!this.$refs.radarChart) return
            this.radarChart = echarts.init(this.$refs.radarChart)
            const option = {
                tooltip: {},
                radar: {
                    indicator: [
                        { name: '业绩能力', max: 100 },
                        { name: '服务能力', max: 100 },
                        { name: '会员管理', max: 100 },
                        { name: '运营效率', max: 100 },
                        { name: '团队协作', max: 100 },
                        { name: '客户满意度', max: 100 }
                    ],
                    center: ['50%', '55%'],
                    radius: '70%'
                },
                series: [{
                    name: '门店综合能力',
                    type: 'radar',
                    data: [{
                        value: [85, 78, 82, 75, 80, 88],
                        name: '当前门店',
                        areaStyle: { color: 'rgba(64, 158, 255, 0.3)' },
                        itemStyle: { color: '#409EFF' },
                        lineStyle: { color: '#409EFF', width: 2 }
                    }, {
                        value: [75, 72, 70, 68, 75, 80],
                        name: '行业平均',
                        areaStyle: { color: 'rgba(103, 194, 58, 0.2)' },
                        itemStyle: { color: '#67C23A' },
                        lineStyle: { color: '#67C23A', width: 2, type: 'dashed' }
                    }]
                }]
            }
            this.radarChart.setOption(option)
        },
        renderGaugeChart() {
            if (!this.$refs.gaugeChart) return
            this.gaugeChart = echarts.init(this.$refs.gaugeChart)
            const option = {
                tooltip: { formatter: '{a} <br/>{b}: {c}%' },
                series: [{
                    name: '目标完成度',
                    type: 'gauge',
                    progress: { show: true },
                    detail: { valueAnimation: true, formatter: '{value}%', fontSize: 20, offsetCenter: [0, '70%'] },
                    data: [{ value: 85.6, name: '完成率' }],
                    axisLine: {
                        lineStyle: {
                            width: 20,
                            color: [[0.3, '#67C23A'], [0.7, '#E6A23C'], [1, '#F56C6C']]
                        }
                    },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    pointer: { show: false },
                    title: { show: false }
                }]
            }
            this.gaugeChart.setOption(option)
        },
        renderStackedAreaChart() {
            if (!this.$refs.stackedAreaChart) return
            this.stackedAreaChart = echarts.init(this.$refs.stackedAreaChart)
            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } },
                legend: { data: ['生美', '医美', '科美', '产品'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: [{ type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
                yAxis: [{ type: 'value', axisLabel: { formatter: '{value}%' } }],
                series: [
                    { name: '生美', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [45, 48, 50, 52, 49, 51, 53, 55, 52, 54, 56, 54], itemStyle: { color: '#A8D5E2' } },
                    { name: '医美', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [25, 26, 27, 28, 27, 28, 29, 30, 28, 29, 30, 29], itemStyle: { color: '#B8E6B8' } },
                    { name: '科美', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [20, 21, 22, 23, 22, 22, 23, 24, 23, 23, 24, 23], itemStyle: { color: '#FFD4A3' } },
                    { name: '产品', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [10, 5, 1, -3, 2, -1, -5, -9, -3, -6, -10, -6], itemStyle: { color: '#E6C1E6' } }
                ]
            }
            this.stackedAreaChart.setOption(option)
        },
        handleResize() {
            if (this.trendChart) this.trendChart.resize()
            if (this.categoryChart) this.categoryChart.resize()
            if (this.compareChart) this.compareChart.resize()
            if (this.stackedChart) this.stackedChart.resize()
            if (this.funnelChart) this.funnelChart.resize()
            if (this.scatterChart) this.scatterChart.resize()
            if (this.heatmapChart) this.heatmapChart.resize()
            if (this.radarChart) this.radarChart.resize()
            if (this.gaugeChart) this.gaugeChart.resize()
            if (this.stackedAreaChart) this.stackedAreaChart.resize()
        },
        formatMoney(value) {
            if (value === null || value === undefined) return '0.00'
            return Number(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
        },
        getRankingClass(rank, total) {
            const percentage = rank / total
            if (percentage <= 0.2) return 'excellent'
            if (percentage <= 0.5) return 'good'
            return 'normal'
        },
        getRankingText(rank, total) {
            const percentage = rank / total
            if (percentage <= 0.2) return '优秀'
            if (percentage <= 0.5) return '良好'
            return '一般'
        },
        getCategoryType(category) {
            const typeMap = {
                '生美': 'primary',
                '医美': 'success',
                '科美': 'warning',
                '产品': 'info'
            }
            return typeMap[category] || ''
        }
    }
}
</script>

<style lang="scss" scoped>
.store-dashboard {
    padding: 20px;
    background: #f5f7fa;
    min-height: calc(100vh - 84px);

    // 顶部Header
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        .header-left {
            .store-info {
                display: flex;
                align-items: center;
                gap: 16px;

                .store-avatar {
                    width: 64px;
                    height: 64px;
                    border-radius: 12px;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    font-size: 28px;
                }

                .store-details {
                    .store-name-row {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 8px;

                        .store-name {
                            margin: 0;
                            font-size: 24px;
                            font-weight: 600;
                            color: #303133;
                        }
                    }

                    .store-meta {
                        display: flex;
                        gap: 20px;
                        font-size: 14px;
                        color: #606266;

                        .meta-item {
                            display: flex;
                            align-items: center;
                            gap: 6px;

                            i {
                                color: #909399;
                            }
                        }
                    }
                }
            }
        }

        .header-right {
            .core-stats {
                display: flex;
                gap: 16px;

                .core-stat-item {
                    padding: 16px 20px;
                    border-radius: 10px;
                    min-width: 140px;
                    text-align: center;
                    transition: all 0.3s;

                    &.primary {
                        background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
                        border-left: 4px solid #409EFF;
                    }

                    &.success {
                        background: linear-gradient(135deg, #f0f9ff 0%, #e1f3ff 100%);
                        border-left: 4px solid #67C23A;
                    }

                    &.info {
                        background: linear-gradient(135deg, #f4f4f5 0%, #e9e9eb 100%);
                        border-left: 4px solid #909399;
                    }

                    &.warning {
                        background: linear-gradient(135deg, #fdf6ec 0%, #fae6d3 100%);
                        border-left: 4px solid #E6A23C;
                    }

                    .stat-label {
                        font-size: 13px;
                        color: #606266;
                        margin-bottom: 8px;
                    }

                    .stat-value {
                        font-size: 22px;
                        font-weight: 700;
                        color: #303133;
                        margin-bottom: 6px;
                    }

                    .stat-trend {
                        font-size: 12px;
                        font-weight: 500;

                        &.up {
                            color: #67C23A;
                        }

                        i {
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }

    // KPI指标卡片
    .kpi-section {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
        margin-bottom: 20px;

        .kpi-card {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
            }

            &.primary::before {
                background: #409EFF;
            }

            &.success::before {
                background: #67C23A;
            }

            &.info::before {
                background: #909399;
            }

            &.warning::before {
                background: #E6A23C;
            }

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            }

            .kpi-icon {
                width: 48px;
                height: 48px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                color: #fff;
                margin-right: 12px;
                flex-shrink: 0;
            }

            &.primary .kpi-icon {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            &.success .kpi-icon {
                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            &.info .kpi-icon {
                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            }

            &.warning .kpi-icon {
                background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            }

            .kpi-content {
                flex: 1;
                min-width: 0;

                .kpi-label {
                    font-size: 13px;
                    color: #909399;
                    margin-bottom: 6px;
                }

                .kpi-value {
                    font-size: 20px;
                    font-weight: 600;
                    color: #303133;

                    .unit {
                        font-size: 14px;
                        font-weight: 500;
                    }
                }
            }

            .kpi-trend {
                font-size: 12px;
                color: #67C23A;
                font-weight: 500;
                margin-left: 8px;
                white-space: nowrap;
            }
        }
    }

    // 主要内容区域：左右分栏
    .main-content {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 20px;
        margin-bottom: 20px;
        align-items: start;

        .content-left {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .content-right {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .chart-row {
            margin-bottom: 0;
        }
    }

    // 图表卡片
    .chart-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 16px 20px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 20px;
        }

        .chart-container {
            width: 100%;
            height: 360px;
            min-height: 360px;
        }
    }

    .chart-card-small {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .chart-container-small {
            width: 100%;
            height: 260px;
            min-height: 260px;
        }
    }

    // 指标卡片
    .metrics-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;

            .metric-item {
                display: flex;
                align-items: center;
                padding: 12px;
                background: #f8f9fa;
                border-radius: 8px;
                transition: all 0.3s;

                &:hover {
                    background: #f0f2f5;
                    transform: translateY(-1px);
                }

                .metric-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 8px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    margin-right: 10px;
                    flex-shrink: 0;
                }

                .metric-info {
                    flex: 1;
                    min-width: 0;

                    .metric-label {
                        font-size: 12px;
                        color: #909399;
                        margin-bottom: 4px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .metric-value {
                        font-size: 16px;
                        font-weight: 600;
                        color: #303133;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .metric-rate {
                        font-size: 11px;
                        color: #909399;
                        margin-top: 2px;
                    }
                }
            }
        }
    }

    // 卡片标题
    .card-header {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #303133;

        i {
            margin-right: 8px;
            color: #409EFF;
            font-size: 16px;
        }
    }

    // 排名对比卡片
    .ranking-content {
        padding: 8px 0;

        .ranking-item {
            text-align: center;
            padding: 16px 0;

            .ranking-label {
                font-size: 13px;
                color: #909399;
                margin-bottom: 12px;
            }

            .ranking-value {
                margin-bottom: 12px;

                .rank-number {
                    font-size: 36px;
                    font-weight: 700;
                    color: #409EFF;
                }

                .rank-total {
                    font-size: 18px;
                    color: #909399;
                    margin-left: 4px;
                }
            }

            .ranking-badge {
                display: inline-block;
                padding: 4px 16px;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 600;

                &.excellent {
                    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                    color: #fff;
                }

                &.good {
                    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                    color: #fff;
                }

                &.normal {
                    background: #f4f4f5;
                    color: #909399;
                }
            }
        }

        .comparison-stats {
            .stat-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
                font-size: 13px;

                &:not(:last-child) {
                    border-bottom: 1px dashed #ebeef5;
                }

                .stat-label {
                    color: #606266;
                }

                .stat-value {
                    font-weight: 600;
                    color: #303133;
                }
            }
        }
    }

    // 经营提示卡片
    .tips-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .tips-content {
            .tip-item {
                display: flex;
                align-items: flex-start;
                padding: 12px;
                margin-bottom: 8px;
                border-radius: 8px;
                font-size: 13px;
                line-height: 1.6;
                transition: all 0.3s;

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

                i {
                    margin-right: 8px;
                    margin-top: 2px;
                    font-size: 14px;
                    flex-shrink: 0;
                }

                span {
                    flex: 1;
                }

                &.success {
                    background: #f0f9ff;
                    color: #67C23A;

                    i {
                        color: #67C23A;
                    }
                }

                &.warning {
                    background: #fdf6ec;
                    color: #E6A23C;

                    i {
                        color: #E6A23C;
                    }
                }

                &.info {
                    background: #f4f4f5;
                    color: #909399;

                    i {
                        color: #909399;
                    }
                }

                &:hover {
                    transform: translateX(4px);
                }
            }
        }
    }

    // 快速数据洞察卡片
    .insight-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .insight-content {
            .insight-item {
                padding: 14px;
                margin-bottom: 12px;
                background: #f8f9fa;
                border-radius: 8px;
                border-left: 3px solid #409EFF;
                transition: all 0.3s;

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

                &:hover {
                    background: #f0f2f5;
                    transform: translateX(4px);
                }

                .insight-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 8px;

                    .insight-title {
                        font-size: 13px;
                        font-weight: 600;
                        color: #303133;
                    }
                }

                .insight-value {
                    font-size: 20px;
                    font-weight: 700;
                    color: #409EFF;
                    margin-bottom: 6px;
                }

                .insight-desc {
                    font-size: 12px;
                    color: #909399;
                    line-height: 1.5;
                }
            }
        }
    }

    // 关键指标卡片
    .key-metrics-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .key-metrics-content {
            .progress-item {
                margin-bottom: 20px;

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

                .progress-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 8px;

                    .progress-label {
                        font-size: 13px;
                        color: #606266;
                        font-weight: 500;
                    }

                    .progress-value {
                        font-size: 16px;
                        font-weight: 700;
                        color: #303133;
                    }
                }
            }
        }
    }

    // 表格区域
    .table-section {
        .table-card {
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

            ::v-deep .el-card__header {
                padding: 16px 20px;
                border-bottom: 1px solid #ebeef5;
            }

            ::v-deep .el-card__body {
                padding: 20px;
            }
        }
    }
}
</style>
