<template>
  <div class="annual-summary-dashboard">
    <div class="page-header">
      <div class="header-content">
        <div class="header-title">
          <i class="el-icon-data-analysis"></i>
          <span>年度经营统计分析</span>
        </div>
        <div class="header-filters">
          <el-form :inline="true" :model="query" class="filter-form">
            <el-form-item label="年度">
              <el-date-picker
                v-model="query.year"
                type="year"
                value-format="yyyy"
                placeholder="选择年度"
                clearable
                @change="handleQueryChange"
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="门店名称">
              <el-select
                v-model="query.storeName"
                placeholder="请选择门店"
                clearable
                filterable
                @change="handleQueryChange"
                style="width: 200px"
              >
                <el-option
                  v-for="store in storeOptions"
                  :key="store.id"
                  :label="store.fullName"
                  :value="store.fullName"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQueryChange">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
      </div>
    </div>

    <div class="dashboard-content">
      <!-- 左侧目录导航 -->
      <div class="sidebar-nav">
        <div class="nav-title">
          <i class="el-icon-menu"></i>
          <span>统计目录</span>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="nav-menu"
          @select="handleMenuSelect"
          :collapse="false"
        >
          <el-menu-item index="monthly-trend">
            <i class="el-icon-data-line"></i>
            <span slot="title">月度趋势分析</span>
          </el-menu-item>
          <el-menu-item index="performance-stat">
            <i class="el-icon-trophy"></i>
            <span slot="title">全年门店业绩表</span>
          </el-menu-item>
          <el-menu-item index="consume-stat">
            <i class="el-icon-shopping-cart-2"></i>
            <span slot="title">全年门店消耗表</span>
          </el-menu-item>
          <el-menu-item index="headcount-stat">
            <i class="el-icon-user"></i>
            <span slot="title">年度门店人头表</span>
          </el-menu-item>
          <el-menu-item index="persontime-stat">
            <i class="el-icon-user-solid"></i>
            <span slot="title">年度门店人次表</span>
          </el-menu-item>
          <el-menu-item index="project-stat">
            <i class="el-icon-goods"></i>
            <span slot="title">年度门店项目数表</span>
          </el-menu-item>
          <el-menu-item index="store-indicators">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">门店五项指标统计</span>
          </el-menu-item>
          <el-menu-item index="bu-indicators">
            <i class="el-icon-s-data"></i>
            <span slot="title">事业部五项指标统计</span>
          </el-menu-item>
          <el-menu-item index="bu-summary">
            <i class="el-icon-tickets"></i>
            <span slot="title">事业部内部汇总</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容区域 -->
      <div class="main-content">
        <!-- 月度趋势分析 -->
        <div v-show="activeMenu === 'monthly-trend'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-data-line"></i>
            <span>月度趋势分析</span>
          </div>
          <div class="panel-body">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-trophy"></i>
                    <span>业绩走势对比</span>
                  </div>
                  <div id="perfTrend" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-shopping-cart-2"></i>
                    <span>消耗走势对比</span>
                  </div>
                  <div id="consumeTrend" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px">
              <el-col :span="8">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-user"></i>
                    <span>客头数走势</span>
                  </div>
                  <div id="headCountTrend" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-user-solid"></i>
                    <span>客次数走势</span>
                  </div>
                  <div id="personTimeTrend" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-goods"></i>
                    <span>项目数走势</span>
                  </div>
                  <div id="projectCountTrend" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>月度趋势数据列表</span>
                </div>
                <NCC-table
                  v-loading="trendTableLoading"
                  :data="trendTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in trendTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 全年门店业绩表 -->
        <div v-show="activeMenu === 'performance-stat'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-trophy"></i>
            <span>全年门店业绩表</span>
          </div>
          <div class="panel-body">
            <el-card shadow="never" class="chart-card">
              <div slot="header" class="card-header">
                <i class="el-icon-data-line"></i>
                <span>业绩走势图</span>
              </div>
              <div id="performanceChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>业绩数据列表</span>
                </div>
                <NCC-table
                  v-loading="performanceTableLoading"
                  :data="performanceTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in performanceTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 全年门店消耗表 -->
        <div v-show="activeMenu === 'consume-stat'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-shopping-cart-2"></i>
            <span>全年门店消耗表</span>
          </div>
          <div class="panel-body">
            <el-card shadow="never" class="chart-card">
              <div slot="header" class="card-header">
                <i class="el-icon-data-line"></i>
                <span>消耗走势图</span>
              </div>
              <div id="consumeChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>消耗数据列表</span>
                </div>
                <NCC-table
                  v-loading="consumeTableLoading"
                  :data="consumeTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in consumeTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 年度门店人头表 -->
        <div v-show="activeMenu === 'headcount-stat'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-user"></i>
            <span>年度门店人头表</span>
          </div>
          <div class="panel-body">
            <el-card shadow="never" class="chart-card">
              <div slot="header" class="card-header">
                <i class="el-icon-data-line"></i>
                <span>人头数走势图</span>
              </div>
              <div id="headCountChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>人头数据列表</span>
                </div>
                <NCC-table
                  v-loading="headCountTableLoading"
                  :data="headCountTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in headCountTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 年度门店人次表 -->
        <div v-show="activeMenu === 'persontime-stat'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-user-solid"></i>
            <span>年度门店人次表</span>
          </div>
          <div class="panel-body">
            <el-card shadow="never" class="chart-card">
              <div slot="header" class="card-header">
                <i class="el-icon-data-line"></i>
                <span>人次走势图</span>
              </div>
              <div id="personTimeChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>人次数据列表</span>
                </div>
                <NCC-table
                  v-loading="personTimeTableLoading"
                  :data="personTimeTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in personTimeTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 年度门店项目数表 -->
        <div v-show="activeMenu === 'project-stat'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-goods"></i>
            <span>年度门店项目数表</span>
          </div>
          <div class="panel-body">
            <el-card shadow="never" class="chart-card">
              <div slot="header" class="card-header">
                <i class="el-icon-data-line"></i>
                <span>项目数走势图</span>
              </div>
              <div id="projectCountChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>项目数据列表</span>
                </div>
                <NCC-table
                  v-loading="projectCountTableLoading"
                  :data="projectCountTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in projectCountTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 门店五项指标统计 -->
        <div v-show="activeMenu === 'store-indicators'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-pie-chart"></i>
            <span>门店五项指标统计</span>
          </div>
          <div class="panel-body">
            <div class="indicator-controls">
              <el-radio-group v-model="indicatorField" size="medium" @change="loadStoreIndicators">
                <el-radio-button label="totalperformance">
                  <i class="el-icon-trophy"></i>
                  总业绩
                </el-radio-button>
                <el-radio-button label="totalconsume">
                  <i class="el-icon-shopping-cart-2"></i>
                  总消耗
                </el-radio-button>
                <el-radio-button label="headcount">
                  <i class="el-icon-user"></i>
                  客头数
                </el-radio-button>
                <el-radio-button label="persontime">
                  <i class="el-icon-user-solid"></i>
                  客次数
                </el-radio-button>
                <el-radio-button label="projectcount">
                  <i class="el-icon-goods"></i>
                  项目数
                </el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="20" style="margin-top: 20px">
              <el-col :span="16">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-s-data"></i>
                    <span>各门店指标对比</span>
                  </div>
                  <div id="storeIndicatorChart" class="chart-box-large"></div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-pie-chart"></i>
                    <span>门店占比分析</span>
                  </div>
                  <div id="storePieChart" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>门店指标数据列表</span>
                </div>
                <NCC-table
                  v-loading="storeIndicatorTableLoading"
                  :data="storeIndicatorTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in storeIndicatorTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 事业部五项指标统计 -->
        <div v-show="activeMenu === 'bu-indicators'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-s-data"></i>
            <span>事业部五项指标统计</span>
          </div>
          <div class="panel-body">
            <div class="indicator-controls">
              <el-radio-group v-model="buIndicatorField" size="medium" @change="loadBuIndicators">
                <el-radio-button label="totalperformance">
                  <i class="el-icon-trophy"></i>
                  总业绩
                </el-radio-button>
                <el-radio-button label="totalconsume">
                  <i class="el-icon-shopping-cart-2"></i>
                  总消耗
                </el-radio-button>
                <el-radio-button label="headcount">
                  <i class="el-icon-user"></i>
                  客头数
                </el-radio-button>
                <el-radio-button label="persontime">
                  <i class="el-icon-user-solid"></i>
                  客次数
                </el-radio-button>
                <el-radio-button label="projectcount">
                  <i class="el-icon-goods"></i>
                  项目数
                </el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="20" style="margin-top: 20px">
              <el-col :span="12">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-pie-chart"></i>
                    <span>事业部贡献占比</span>
                  </div>
                  <div id="buPieChart" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="never" class="chart-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-data-line"></i>
                    <span>事业部增长率分析</span>
                  </div>
                  <div id="buGrowthChart" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <div class="table-section" style="margin-top: 20px">
              <el-card shadow="never" class="table-card">
                <div slot="header" class="card-header">
                  <i class="el-icon-s-grid"></i>
                  <span>事业部指标数据列表</span>
                </div>
                <NCC-table
                  v-loading="buIndicatorTableLoading"
                  :data="buIndicatorTableData"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    v-for="col in buIndicatorTableColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    :width="col.width"
                    :align="col.align || 'center'"
                  >
                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>
                </NCC-table>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 事业部内部汇总 -->
        <div v-show="activeMenu === 'bu-summary'" class="content-panel">
          <div class="panel-header">
            <i class="el-icon-tickets"></i>
            <span>事业部内部汇总</span>
          </div>
          <div class="panel-body">
            <el-card shadow="never" class="table-card">
              <div slot="header" class="card-header">
                <i class="el-icon-s-grid"></i>
                <span>事业部汇总数据列表</span>
              </div>
              <NCC-table
                v-loading="buSummaryTableLoading"
                :data="buSummaryTableData"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column
                  v-for="col in buSummaryTableColumns"
                  :key="col.prop"
                  :prop="col.prop"
                  :label="col.label"
                  :width="col.width"
                  :align="col.align || 'center'"
                >
                  <template slot-scope="scope">
                    <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                    <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                  </template>
                </el-table-column>
              </NCC-table>
            </el-card>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getMonthlyTrend,
  getTotalPerformanceStat,
  getTotalConsumeStat,
  getHeadCountStat,
  getPersonTimeStat,
  getProjectCountStat,
  getStoreIndicatorDetail,
  getBusinessUnitIndicatorsStat,
  getBusinessUnitSummaryStat
} from '@/api/extend/annualSummary'
import { getStoreSelector } from '@/api/extend/store'

export default {
  name: 'annualSummaryDashboard',
  data() {
    return {
      activeMenu: 'monthly-trend',
      query: {
        year: new Date().getFullYear().toString(),
        storeName: ''
      },
      indicatorField: 'totalperformance',
      buIndicatorField: 'totalperformance',
      trendField: 'totalperformance', // 月度趋势列表显示的类型
      // 月度趋势
      trendTableLoading: false,
      trendTableData: [],
      trendTableColumns: [],
      // 业绩
      performanceTableLoading: false,
      performanceTableData: [],
      performanceTableColumns: [],
      // 消耗
      consumeTableLoading: false,
      consumeTableData: [],
      consumeTableColumns: [],
      // 人头
      headCountTableLoading: false,
      headCountTableData: [],
      headCountTableColumns: [],
      // 人次
      personTimeTableLoading: false,
      personTimeTableData: [],
      personTimeTableColumns: [],
      // 项目
      projectCountTableLoading: false,
      projectCountTableData: [],
      projectCountTableColumns: [],
      // 门店指标
      storeIndicatorTableLoading: false,
      storeIndicatorTableData: [],
      storeIndicatorTableColumns: [],
      // 事业部指标
      buIndicatorTableLoading: false,
      buIndicatorTableData: [],
      buIndicatorTableColumns: [],
      // 事业部汇总
      buSummaryTableLoading: false,
      buSummaryTableData: [],
      buSummaryTableColumns: [],
      // 门店下拉选项
      storeOptions: []
    }
  },
  mounted() {
    this.loadStoreOptions()
    this.initData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    // 销毁所有图表实例
    this.destroyAllCharts()
  },
  methods: {
    // 加载门店下拉选项
    async loadStoreOptions() {
      try {
        const res = await getStoreSelector()
        if (res.data && res.data.list) {
          this.storeOptions = res.data.list
        }
      } catch (error) {
        console.error('加载门店列表失败:', error)
        this.storeOptions = []
      }
    },
    initData() {
      this.loadCurrentMenuData()
    },
    handleQueryChange() {
      this.loadCurrentMenuData()
    },
    handleReset() {
      this.query = {
        year: new Date().getFullYear().toString(),
        storeName: ''
      }
      this.loadCurrentMenuData()
    },
    handleMenuSelect(key) {
      this.activeMenu = key
      this.$nextTick(() => {
        this.loadCurrentMenuData()
      })
    },
    loadCurrentMenuData() {
      switch (this.activeMenu) {
        case 'monthly-trend':
          this.loadMonthlyTrend()
          break
        case 'performance-stat':
          this.loadPerformanceStat()
          break
        case 'consume-stat':
          this.loadConsumeStat()
          break
        case 'headcount-stat':
          this.loadHeadCountStat()
          break
        case 'persontime-stat':
          this.loadPersonTimeStat()
          break
        case 'project-stat':
          this.loadProjectCountStat()
          break
        case 'store-indicators':
          this.loadStoreIndicators()
          break
        case 'bu-indicators':
          this.loadBuIndicators()
          break
        case 'bu-summary':
          this.loadBuSummary()
          break
      }
    },
    // 月度趋势分析
    async loadMonthlyTrend() {
      const fields = [
        { field: 'totalperformance', chartId: 'perfTrend', name: '业绩' },
        { field: 'totalconsume', chartId: 'consumeTrend', name: '消耗' },
        { field: 'headcount', chartId: 'headCountTrend', name: '客头数' },
        { field: 'persontime', chartId: 'personTimeTrend', name: '客次数' },
        { field: 'projectcount', chartId: 'projectCountTrend', name: '项目数' }
      ]

      // 加载每个图表的数据 - 确保每个图表都使用正确的 type 参数
      for (const item of fields) {
        try {
          // 明确传递 type 参数，确保后端能正确接收
          const params = {
            year: this.query.year || new Date().getFullYear().toString(),
            storeName: this.query.storeName || '',
            type: item.field // type 作为单独的查询参数传递
          }
          
          const res = await getMonthlyTrend(params)
          if (res && res.data) {
            // 立即渲染，避免数据被覆盖
            this.renderTrendChart(item.chartId, res.data, item.name)
          }
        } catch (error) {
          console.error(`加载${item.name}趋势失败:`, error)
        }
      }

      // 加载列表数据（使用当前选中的趋势类型对应的数据）
      try {
        const res = await getMonthlyTrend({ 
          year: this.query.year, 
          storeName: this.query.storeName, 
          type: this.trendField || 'totalperformance' 
        })
        if (res && res.data && res.data.rows) {
          this.trendTableData = res.data.rows
          this.buildTrendTableColumns(res.data)
        }
      } catch (error) {
        console.error('加载趋势列表失败:', error)
      }
    },
    // 全年门店业绩表
    async loadPerformanceStat() {
      this.performanceTableLoading = true
      try {
        const res = await getTotalPerformanceStat(this.query)
        if (res.data) {
          this.renderMonthlyStatChart('performanceChart', res.data, '业绩')
          this.performanceTableData = res.data.rows || []
          this.buildMonthlyStatTableColumns(res.data, '业绩')
        }
      } catch (error) {
        console.error('加载业绩统计失败:', error)
      } finally {
        this.performanceTableLoading = false
      }
    },
    // 全年门店消耗表
    async loadConsumeStat() {
      this.consumeTableLoading = true
      try {
        const res = await getTotalConsumeStat(this.query)
        if (res.data) {
          this.renderMonthlyStatChart('consumeChart', res.data, '消耗')
          this.consumeTableData = res.data.rows || []
          this.buildMonthlyStatTableColumns(res.data, '消耗')
        }
      } catch (error) {
        console.error('加载消耗统计失败:', error)
      } finally {
        this.consumeTableLoading = false
      }
    },
    // 年度门店人头表
    async loadHeadCountStat() {
      this.headCountTableLoading = true
      try {
        const res = await getHeadCountStat(this.query)
        if (res.data) {
          this.renderMonthlyStatChart('headCountChart', res.data, '人头数')
          this.headCountTableData = res.data.rows || []
          this.buildMonthlyStatTableColumns(res.data, '人头数')
        }
      } catch (error) {
        console.error('加载人头统计失败:', error)
      } finally {
        this.headCountTableLoading = false
      }
    },
    // 年度门店人次表
    async loadPersonTimeStat() {
      this.personTimeTableLoading = true
      try {
        const res = await getPersonTimeStat(this.query)
        if (res.data) {
          this.renderMonthlyStatChart('personTimeChart', res.data, '人次')
          this.personTimeTableData = res.data.rows || []
          this.buildMonthlyStatTableColumns(res.data, '人次')
        }
      } catch (error) {
        console.error('加载人次统计失败:', error)
      } finally {
        this.personTimeTableLoading = false
      }
    },
    // 年度门店项目数表
    async loadProjectCountStat() {
      this.projectCountTableLoading = true
      try {
        const res = await getProjectCountStat(this.query)
        if (res.data) {
          this.renderMonthlyStatChart('projectCountChart', res.data, '项目数')
          this.projectCountTableData = res.data.rows || []
          this.buildMonthlyStatTableColumns(res.data, '项目数')
        }
      } catch (error) {
        console.error('加载项目统计失败:', error)
      } finally {
        this.projectCountTableLoading = false
      }
    },
    // 门店五项指标统计
    async loadStoreIndicators() {
      this.storeIndicatorTableLoading = true
      try {
        const res = await getStoreIndicatorDetail({
          ...this.query,
          type: this.indicatorField
        })
        if (res.data && res.data.rows) {
          this.renderStoreIndicatorChart(res.data)
          this.storeIndicatorTableData = res.data.rows
          this.buildStoreIndicatorTableColumns()
        }
      } catch (error) {
        console.error('加载门店指标失败:', error)
      } finally {
        this.storeIndicatorTableLoading = false
      }
    },
    // 事业部五项指标统计
    async loadBuIndicators() {
      this.buIndicatorTableLoading = true
      try {
        const res = await getBusinessUnitIndicatorsStat({
          ...this.query,
          type: this.buIndicatorField
        })
        if (res.data && res.data.rows) {
          this.renderBuIndicatorCharts(res.data)
          this.buIndicatorTableData = res.data.rows
          this.buildBuIndicatorTableColumns()
        }
      } catch (error) {
        console.error('加载事业部指标失败:', error)
      } finally {
        this.buIndicatorTableLoading = false
      }
    },
    // 事业部内部汇总
    async loadBuSummary() {
      this.buSummaryTableLoading = true
      try {
      const res = await getBusinessUnitSummaryStat(this.query)
        if (res.data && res.data.list) {
          this.buSummaryTableData = res.data.list
          this.buildBuSummaryTableColumns()
        }
      } catch (error) {
        console.error('加载事业部汇总失败:', error)
      } finally {
        this.buSummaryTableLoading = false
      }
    },
    // 渲染趋势图
    renderTrendChart(chartId, data, name) {
      this.$nextTick(() => {
        const chartDom = document.getElementById(chartId)
        if (!chartDom) return

        // 先销毁旧的图表实例，确保使用新数据
        const oldChart = echarts.getInstanceByDom(chartDom)
        if (oldChart) {
          oldChart.dispose()
        }
        
        const chart = echarts.init(chartDom)
      const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      
        // 确保使用传入的 data，而不是共享的数据
        const rows = data && data.rows ? data.rows : []
        
        const currentYearValues = months.map((m) => {
          return rows.reduce((sum, row) => {
            const value = row['month' + m] || 0
            return sum + (typeof value === 'number' ? value : 0)
          }, 0)
        })

        const lastYearValues = months.map((m) => {
          return rows.reduce((sum, row) => {
            const value = row['lastMonth' + m] || 0
            return sum + (typeof value === 'number' ? value : 0)
          }, 0)
      })
      
      const option = {
        tooltip: { 
          trigger: 'axis',
            formatter: function (params) {
            let res = params[0].name + '<br/>'
              params.forEach((item) => {
              res += item.marker + item.seriesName + ': ' + item.value.toLocaleString() + '<br/>'
            })
            return res
          }
        },
          legend: {
            data: ['本年走势', '上年走势'],
            top: 10
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: months.map((m) => m + '月')
          },
          yAxis: {
            type: 'value'
          },
        series: [
            {
              name: '本年走势',
              type: 'line',
              smooth: true,
              data: currentYearValues,
              itemStyle: { color: '#409EFF' },
              areaStyle: { color: 'rgba(64, 158, 255, 0.1)' }
            },
            {
              name: '上年走势',
              type: 'line',
              smooth: true,
              data: lastYearValues,
              itemStyle: { color: '#909399' },
              lineStyle: { type: 'dashed' }
            }
        ]
      }
      chart.setOption(option)
      })
    },
    // 渲染月度统计图表
    renderMonthlyStatChart(chartId, data, name) {
      this.$nextTick(() => {
        const chartDom = document.getElementById(chartId)
        if (!chartDom) return

        const chart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom)
        const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

        const currentYearValues = months.map((m) => {
          return (data.rows || []).reduce((sum, row) => sum + (row['month' + m] || 0), 0)
        })

        const lastYearValues = months.map((m) => {
          return (data.rows || []).reduce((sum, row) => sum + (row['lastMonth' + m] || 0), 0)
        })

      const option = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              let res = params[0].name + '<br/>'
              params.forEach((item) => {
                res += item.marker + item.seriesName + ': ' + item.value.toLocaleString() + '<br/>'
              })
              return res
            }
          },
          legend: {
            data: ['本年走势', '上年走势'],
            top: 10
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: months.map((m) => m + '月')
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '本年走势',
              type: 'line',
              smooth: true,
              data: currentYearValues,
              itemStyle: { color: '#409EFF' },
              areaStyle: { color: 'rgba(64, 158, 255, 0.1)' }
            },
            {
              name: '上年走势',
              type: 'line',
              smooth: true,
              data: lastYearValues,
              itemStyle: { color: '#909399' },
              lineStyle: { type: 'dashed' }
            }
          ]
        }
        chart.setOption(option)
      })
    },
    // 渲染门店指标图表
    renderStoreIndicatorChart(data) {
      this.$nextTick(() => {
        // 柱状图
        const barChartDom = document.getElementById('storeIndicatorChart')
        if (barChartDom) {
          const barChart = echarts.getInstanceByDom(barChartDom) || echarts.init(barChartDom)
          const sortedResult = [...(data.rows || [])]
            .sort((a, b) => b.currentYearValue - a.currentYearValue)

          const barOption = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value.toLocaleString()
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '15%',
              top: '10%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: sortedResult.map((o) => o.storeName),
              axisLabel: {
                interval: 0,
                rotate: 30
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
          name: '本年数值',
          type: 'bar',
                data: sortedResult.map((o) => o.currentYearValue),
          itemStyle: {
                  color: '#409EFF'
                }
              }
            ]
          }
          barChart.setOption(barOption)
        }

        // 饼图
        const pieChartDom = document.getElementById('storePieChart')
        if (pieChartDom) {
          const pieChart = echarts.getInstanceByDom(pieChartDom) || echarts.init(pieChartDom)
          const allStores = [...(data.rows || [])]
            .sort((a, b) => b.currentYearValue - a.currentYearValue)

          const pieOption = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              show: false // 隐藏图例
            },
            series: [
              {
                name: '门店占比',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['60%', '50%'],
                avoidLabelOverlap: false,
                data: allStores.map((o) => ({
                  name: o.storeName,
                  value: o.currentYearValue
                })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          pieChart.setOption(pieOption)
        }
      })
    },
    // 渲染事业部指标图表
    renderBuIndicatorCharts(data) {
      this.$nextTick(() => {
        // 饼图
        const pieChartDom = document.getElementById('buPieChart')
        if (pieChartDom) {
          const pieChart = echarts.getInstanceByDom(pieChartDom) || echarts.init(pieChartDom)
          const pieOption = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top: 'middle',
              data: (data.rows || []).map((o) => o.businessUnitName)
            },
            series: [
              {
                name: '事业部占比',
          type: 'pie',
          radius: '55%',
                center: ['60%', '50%'],
                data: (data.rows || []).map((o) => ({
                  name: o.businessUnitName,
                  value: o.currentYearValue
                })),
          emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          pieChart.setOption(pieOption)
        }

        // 增长率图
        const growthChartDom = document.getElementById('buGrowthChart')
        if (growthChartDom) {
          const growthChart = echarts.getInstanceByDom(growthChartDom) || echarts.init(growthChartDom)
          const growthOption = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].name + '<br/>增长率: ' + params[0].value + '%'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top: '10%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: (data.rows || []).map((o) => o.businessUnitName),
              axisLabel: {
                rotate: 30,
                interval: 0
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value}%'
              }
            },
            series: [
              {
                name: '增长率',
                type: 'bar',
                data: (data.rows || []).map((o) => parseFloat(o.growthRate) || 0),
                itemStyle: {
                  color: function (params) {
                    return params.value >= 0 ? '#67C23A' : '#F56C6C'
                  }
                },
                markPoint: {
                  data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                  ]
                }
              }
            ]
          }
          growthChart.setOption(growthOption)
        }
      })
    },
    // 构建趋势表格列
    buildTrendTableColumns(data) {
      const columns = [
        { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left' },
        { label: '门店', prop: 'storeName', width: 150, align: 'left' }
      ]

      for (let i = 1; i <= 12; i++) {
        columns.push({
          label: `${i}月`,
          prop: `month${i}`,
          width: 100,
          align: 'right',
          formatter: (row) => {
            return row[`month${i}`] ? Number(row[`month${i}`]).toLocaleString() : '0'
          }
        })
      }

      columns.push(
        {
          label: '本年合计',
          prop: 'totalCurrentYear',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return row.totalCurrentYear ? Number(row.totalCurrentYear).toLocaleString() : '0'
          }
        },
        {
          label: '上年合计',
          prop: 'totalLastYear',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return row.totalLastYear ? Number(row.totalLastYear).toLocaleString() : '0'
          }
        },
        {
          label: '增长率',
          prop: 'growthRate',
          width: 100,
          align: 'right',
          formatter: (row) => {
            const rate = parseFloat(row.growthRate) || 0
            const color = rate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
          }
        }
      )

      this.trendTableColumns = columns
    },
    // 构建月度统计表格列
    buildMonthlyStatTableColumns(data, name) {
      const columns = [
        { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left' },
        { label: '门店', prop: 'storeName', width: 150, align: 'left' }
      ]

      for (let i = 1; i <= 12; i++) {
        columns.push({
          label: `${i}月`,
          prop: `month${i}`,
          width: 100,
          align: 'right',
          formatter: (row) => {
            const value = row[`month${i}`] || 0
            if (name === '业绩' || name === '消耗') {
              return `¥${Number(value).toLocaleString()}`
            }
            return Number(value).toLocaleString()
          }
        })
      }

      columns.push(
        {
          label: '本年合计',
          prop: 'totalCurrentYear',
          width: 120,
          align: 'right',
          formatter: (row) => {
            const value = row.totalCurrentYear || 0
            if (name === '业绩' || name === '消耗') {
              return `¥${Number(value).toLocaleString()}`
            }
            return Number(value).toLocaleString()
          }
        },
        {
          label: '上年合计',
          prop: 'totalLastYear',
          width: 120,
          align: 'right',
          formatter: (row) => {
            const value = row.totalLastYear || 0
            if (name === '业绩' || name === '消耗') {
              return `¥${Number(value).toLocaleString()}`
            }
            return Number(value).toLocaleString()
          }
        },
        {
          label: '增长率',
          prop: 'growthRate',
          width: 100,
          align: 'right',
          formatter: (row) => {
            const rate = parseFloat(row.growthRate) || 0
            const color = rate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
          }
        }
      )

      switch (name) {
        case '业绩':
          this.performanceTableColumns = columns
          break
        case '消耗':
          this.consumeTableColumns = columns
          break
        case '人头数':
          this.headCountTableColumns = columns
          break
        case '人次':
          this.personTimeTableColumns = columns
          break
        case '项目数':
          this.projectCountTableColumns = columns
          break
      }
    },
    // 构建门店指标表格列
    buildStoreIndicatorTableColumns() {
      this.storeIndicatorTableColumns = [
        { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left' },
        { label: '门店', prop: 'storeName', width: 150, align: 'left' },
        {
          label: '本年数值',
          prop: 'currentYearValue',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return Number(row.currentYearValue || 0).toLocaleString()
          }
        },
        {
          label: '上年数值',
          prop: 'lastYearValue',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return Number(row.lastYearValue || 0).toLocaleString()
          }
        },
        {
          label: '增长率',
          prop: 'growthRate',
          width: 100,
          align: 'right',
          formatter: (row) => {
            const rate = parseFloat(row.growthRate) || 0
            const color = rate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
          }
        }
      ]
    },
    // 构建事业部指标表格列
    buildBuIndicatorTableColumns() {
      this.buIndicatorTableColumns = [
        { label: '事业部', prop: 'businessUnitName', width: 200, align: 'left' },
        {
          label: '本年数值',
          prop: 'currentYearValue',
          width: 150,
          align: 'right',
          formatter: (row) => {
            return Number(row.currentYearValue || 0).toLocaleString()
          }
        },
        {
          label: '上年数值',
          prop: 'lastYearValue',
          width: 150,
          align: 'right',
          formatter: (row) => {
            return Number(row.lastYearValue || 0).toLocaleString()
          }
        },
        {
          label: '增长率',
          prop: 'growthRate',
          width: 120,
          align: 'right',
          formatter: (row) => {
            const rate = parseFloat(row.growthRate) || 0
            const color = rate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
          }
        }
      ]
    },
    // 构建事业部汇总表格列
    buildBuSummaryTableColumns() {
      this.buSummaryTableColumns = [
        { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left' },
        { label: '门店', prop: 'storeName', width: 150, align: 'left' },
        {
          label: '本年业绩',
          prop: 'currentPerformance',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return `¥${Number(row.currentPerformance || 0).toLocaleString()}`
          }
        },
        {
          label: '上年业绩',
          prop: 'lastPerformance',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return `¥${Number(row.lastPerformance || 0).toLocaleString()}`
          }
        },
        {
          label: '业绩增长率',
          prop: 'performanceGrowthRate',
          width: 110,
          align: 'right',
          formatter: (row) => {
            const rate = row.performanceGrowthRate || '0%'
            const numRate = parseFloat(rate) || 0
            const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate}</span>`
          }
        },
        {
          label: '本年消耗',
          prop: 'currentConsume',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return `¥${Number(row.currentConsume || 0).toLocaleString()}`
          }
        },
        {
          label: '上年消耗',
          prop: 'lastConsume',
          width: 120,
          align: 'right',
          formatter: (row) => {
            return `¥${Number(row.lastConsume || 0).toLocaleString()}`
          }
        },
        {
          label: '消耗增长率',
          prop: 'consumeGrowthRate',
          width: 110,
          align: 'right',
          formatter: (row) => {
            const rate = row.consumeGrowthRate || '0%'
            const numRate = parseFloat(rate) || 0
            const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate}</span>`
          }
        },
        {
          label: '本年客头',
          prop: 'currentHeadCount',
          width: 100,
          align: 'right',
          formatter: (row) => {
            return Number(row.currentHeadCount || 0).toLocaleString()
          }
        },
        {
          label: '上年客头',
          prop: 'lastHeadCount',
          width: 100,
          align: 'right',
          formatter: (row) => {
            return Number(row.lastHeadCount || 0).toLocaleString()
          }
        },
        {
          label: '客头增长率',
          prop: 'headCountGrowthRate',
          width: 110,
          align: 'right',
          formatter: (row) => {
            const rate = row.headCountGrowthRate || '0%'
            const numRate = parseFloat(rate) || 0
            const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate}</span>`
          }
        },
        {
          label: '本年客次',
          prop: 'currentPersonTime',
          width: 100,
          align: 'right',
          formatter: (row) => {
            return Number(row.currentPersonTime || 0).toLocaleString()
          }
        },
        {
          label: '上年客次',
          prop: 'lastPersonTime',
          width: 100,
          align: 'right',
          formatter: (row) => {
            return Number(row.lastPersonTime || 0).toLocaleString()
          }
        },
        {
          label: '客次增长率',
          prop: 'personTimeGrowthRate',
          width: 110,
          align: 'right',
          formatter: (row) => {
            const rate = row.personTimeGrowthRate || '0%'
            const numRate = parseFloat(rate) || 0
            const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate}</span>`
          }
        },
        {
          label: '本年项目',
          prop: 'currentProjectCount',
          width: 100,
          align: 'right',
          formatter: (row) => {
            return Number(row.currentProjectCount || 0).toLocaleString()
          }
        },
        {
          label: '上年项目',
          prop: 'lastProjectCount',
          width: 100,
          align: 'right',
          formatter: (row) => {
            return Number(row.lastProjectCount || 0).toLocaleString()
          }
        },
        {
          label: '项目增长率',
          prop: 'projectCountGrowthRate',
          width: 110,
          align: 'right',
          formatter: (row) => {
            const rate = row.projectCountGrowthRate || '0%'
            const numRate = parseFloat(rate) || 0
            const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
            return `<span style="color: ${color}">${rate}</span>`
          }
        }
      ]
    },
    handleResize() {
      const chartIds = [
        'perfTrend',
        'consumeTrend',
        'headCountTrend',
        'personTimeTrend',
        'projectCountTrend',
        'performanceChart',
        'consumeChart',
        'headCountChart',
        'personTimeChart',
        'projectCountChart',
        'storeIndicatorChart',
        'storePieChart',
        'buPieChart',
        'buGrowthChart'
      ]
      chartIds.forEach((id) => {
        const chart = echarts.getInstanceByDom(document.getElementById(id))
        if (chart) chart.resize()
      })
    },
    destroyAllCharts() {
      const chartIds = [
        'perfTrend',
        'consumeTrend',
        'headCountTrend',
        'personTimeTrend',
        'projectCountTrend',
        'performanceChart',
        'consumeChart',
        'headCountChart',
        'personTimeChart',
        'projectCountChart',
        'storeIndicatorChart',
        'storePieChart',
        'buPieChart',
        'buGrowthChart'
      ]
      chartIds.forEach((id) => {
        const chart = echarts.getInstanceByDom(document.getElementById(id))
        if (chart) chart.dispose()
      })
    }
  }
}
</script>

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

  .page-header {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 600;
        color: #303133;

        i {
          font-size: 24px;
          color: #409EFF;
          margin-right: 12px;
        }
      }

      .header-filters {
        .filter-form {
          ::v-deep .el-form-item {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .dashboard-content {
    display: flex;
    gap: 20px;

    .sidebar-nav {
      width: 220px;
      background: #fff;
  border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 16px 0;
      height: fit-content;
      position: sticky;
      top: 20px;

      .nav-title {
        padding: 0 20px 16px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        border-bottom: 1px solid #ebeef5;
        margin-bottom: 8px;
        display: flex;
        align-items: center;

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

      .nav-menu {
        border: none;

        ::v-deep .el-menu-item {
          height: 48px;
          line-height: 48px;
          padding-left: 20px !important;

          i {
            margin-right: 8px;
            font-size: 18px;
            color: #606266;
          }

          &.is-active {
            background-color: #ecf5ff;
            color: #409EFF;

            i {
              color: #409EFF;
            }
          }

          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
    }

    .main-content {
      flex: 1;
  background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 24px;

      .content-panel {
        .panel-header {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 24px;
          padding-bottom: 16px;
          border-bottom: 2px solid #ebeef5;

          i {
            font-size: 24px;
            color: #409EFF;
            margin-right: 12px;
          }
        }

        .panel-body {
          .indicator-controls {
            padding: 16px 0;
            border-bottom: 1px solid #ebeef5;
            margin-bottom: 20px;

            ::v-deep .el-radio-button__inner {
              padding: 10px 16px;

              i {
                margin-right: 4px;
              }
            }
          }

.chart-card {
            border: 1px solid #ebeef5;
  border-radius: 8px;

  .card-header {
              display: flex;
              align-items: center;
              font-size: 16px;
              font-weight: 600;
    color: #303133;
              padding: 16px 20px;
              border-bottom: 1px solid #ebeef5;

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

.chart-box {
              height: 300px;
              padding: 20px;
}

.chart-box-large {
  height: 400px;
              padding: 20px;
            }
          }

          .table-card {
            border: 1px solid #ebeef5;
            border-radius: 8px;

            .card-header {
              display: flex;
              align-items: center;
              font-size: 16px;
              font-weight: 600;
              color: #303133;
              padding: 16px 20px;
              border-bottom: 1px solid #ebeef5;

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

          .table-section {
            ::v-deep .el-table {
              .el-table__header th {
                background-color: #f5f7fa;
                color: #606266;
                font-weight: 600;
              }

              .el-table__body tr:hover > td {
                background-color: #f5f7fa;
              }
            }
          }
        }
      }
    }
  }
}
</style>
