<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2>门店股份</h2>
        <p class="page-desc">管理门店股份相关数据</p>
      </div>
      <div class="header-right">
        <el-button 
          type="success" 
          icon="el-icon-download"
          @click="handleExport"
          :loading="exportLoading"
        >
          导出
        </el-button>
        <el-button 
          type="primary" 
          icon="el-icon-cpu"
          @click="showCalculateDialog"
          :loading="calculateLoading"
        >
          计算股份
        </el-button>
        <el-button 
          icon="el-icon-refresh" 
          @click="getList"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
        <el-form-item label="统计月份" prop="statisticsMonth">
          <el-date-picker
            v-model="queryParams.statisticsMonth"
            type="month"
            placeholder="选择月份"
            format="yyyyMM"
            value-format="yyyyMM"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="门店" prop="storeId">
          <el-select 
            v-model="queryParams.storeId" 
            placeholder="请选择门店"
            clearable
            filterable
            style="width: 200px"
          >
            <el-option 
              v-for="store in storeOptions" 
              :key="store.value" 
              :label="store.label" 
              :value="store.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <NCC-table 
        v-loading="loading" 
        :data="list" 
        border 
        stripe
        height="calc(100vh - 420px)"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <!-- 基本信息 -->
        <el-table-column prop="StoreName" label="门店名称" width="150" align="center" fixed="left">
          <template slot-scope="scope">
            <div class="store-name">
              <i class="el-icon-shop store-icon"></i>
              <span>{{ scope.row.StoreName || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="StatisticsMonth" label="统计月份" width="120" align="center" fixed="left">
          <template slot-scope="scope">
            <span>{{ formatMonth(scope.row.StatisticsMonth) || '无' }}</span>
          </template>
        </el-table-column>

        <!-- 收入部分 -->
        <el-table-column label="收入信息" align="center">
          <el-table-column prop="MainIncome" label="主营收入" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.MainIncome) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeLifeBeauty" label="生美消耗业绩" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.ConsumeLifeBeauty) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeTechBeauty" label="科美消耗业绩" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.ConsumeTechBeauty) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeMedicalBeauty" label="医美消耗业绩" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.ConsumeMedicalBeauty) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeCooperation" label="合作消费业绩" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.ConsumeCooperation) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeProduct" label="产品消耗业绩" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.ConsumeProduct) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeOther" label="其他消耗业绩" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.ConsumeOther) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="OtherIncome" label="其他收入" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.OtherIncome) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="AdvanceReceipt" label="预收款" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.AdvanceReceipt) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Refund" label="实际退款" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.Refund) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Receivables" label="应收" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.Receivables) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="BankDeposit" label="银行存款" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.BankDeposit) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 成本部分 -->
        <el-table-column label="成本信息" align="center">
          <el-table-column prop="CostProduct" label="主营成本-产品" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostProduct) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostFutian" label="主营成本-福田" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostFutian) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostTowel" label="主营成本-毛巾" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostTowel) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostTechDept" label="主营成本-科技部" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostTechDept) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostManagementFee" label="主营成本-管理费" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostManagementFee) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostCooperation" label="主营成本-合作" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostCooperation) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostMajorProject" label="主营成本-大项目" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostMajorProject) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CostOther" label="其他成本" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CostOther) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 人工工资部分 -->
        <el-table-column label="人工工资信息" align="center">
          <el-table-column prop="SalaryBaseHealthCoach" label="健康师底薪" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryBaseHealthCoach) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryBaseAssistant" label="店助底薪" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryBaseAssistant) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryBaseDirector" label="店助主任底薪" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryBaseDirector) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryBaseStoreManager" label="店长底薪" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryBaseStoreManager) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryBaseGeneralManager" label="总经理/经理底薪" width="160" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryBaseGeneralManager) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryCommissionHealthCoach" label="健康师提成" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryCommissionHealthCoach) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryCommissionAssistant" label="店助提成" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryCommissionAssistant) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryCommissionDirector" label="店助主任提成" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryCommissionDirector) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryCommissionStoreManager" label="店长提成" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryCommissionStoreManager) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryCommissionGeneralManager" label="总经理/经理提成" width="160" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryCommissionGeneralManager) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryManual" label="手工" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryManual) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryAttendance" label="出勤" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryAttendance) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryPhoneCustody" label="手机保管费" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryPhoneCustody) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryHeadcountReward" label="人头" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryHeadcountReward) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SalaryTZone" label="门店T区" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SalaryTZone) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 费用与其他 -->
        <el-table-column label="费用与其他" align="center">
          <el-table-column prop="SocialSecurity" label="社保" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.SocialSecurity) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="StoreRent" label="门店房租" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.StoreRent) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DormRent" label="宿舍房租" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.DormRent) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CurrentPeriodExpense" label="当期费用" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CurrentPeriodExpense) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CurrentPeriodExpenseQin" label="当前费用-秦董" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.CurrentPeriodExpenseQin) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="FinancialFee" label="财务费用" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.FinancialFee) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 奖励 -->
        <el-table-column label="奖励" align="center">
          <el-table-column prop="RewardMedicalBeauty" label="奖励-医美" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.RewardMedicalBeauty) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RewardOther" label="奖励-其他" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.RewardOther) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RewardLargeOrder" label="奖励-大单奖" width="130" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.RewardLargeOrder) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RewardFirstOrder" label="奖励-首单奖" width="130" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.RewardFirstOrder) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RewardGeneral" label="奖励" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.RewardGeneral) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 其他保留字段 -->
        <el-table-column label="其他" align="center">
          <el-table-column prop="Other1" label="其他1" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.Other1) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Other2" label="其他2" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatMoney(scope.row.Other2) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 利润结果 -->
        <el-table-column label="利润结果" align="center">
          <el-table-column prop="Profit" label="利润" width="120" align="center">
            <template slot-scope="scope">
              <span class="highlight">{{ formatMoney(scope.row.Profit) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="FinancialProfit" label="财务利润" width="120" align="center">
            <template slot-scope="scope">
              <span class="highlight">{{ formatMoney(scope.row.FinancialProfit) }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              size="mini"
              icon="el-icon-view"
              @click="showDetail(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </NCC-table>
    </div>

    <!-- 计算股份弹窗 -->
    <el-dialog
      title="计算门店股份"
      :visible="calculateDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleCalculateDialogClose"
    >
      <el-form label-width="100px" label-position="right">
        <el-form-item label="统计月份" required>
          <el-date-picker
            v-model="calculateMonth"
            type="month"
            placeholder="请选择月份"
            format="yyyyMM"
            value-format="yyyyMM"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="门店" required>
          <el-select 
            v-model="calculateStoreId" 
            placeholder="请选择门店（不选则计算所有门店）"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option 
              v-for="store in storeOptions" 
              :key="store.value" 
              :label="store.label" 
              :value="store.value" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCalculateDialogClose">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleCalculateConfirm"
          :loading="calculateLoading"
        >
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <shop-stock-detail-dialog
      :visible="detailVisible"
      :detail-data="currentDetailData"
      @close="handleDetailClose"
    />
  </div>
</template>

<script>
import { getShopStockList, generateShopStock, getStoreSelector } from '@/api/extend/shopStock'
import ShopStockDetailDialog from './shop-stock-detail-dialog.vue'

export default {
  name: 'ShopStock',
  components: {
    ShopStockDetailDialog
  },
  data() {
    // 获取当前月份
    const getCurrentMonth = () => {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return `${year}${month}`
    }

    return {
      loading: false,
      calculateLoading: false,
      exportLoading: false,
      list: [],
      storeOptions: [],
      calculateDialogVisible: false,
      calculateMonth: getCurrentMonth(),
      calculateStoreId: '',
      detailVisible: false,
      currentDetailData: null,
      queryParams: {
        statisticsMonth: getCurrentMonth(), // yyyyMM 格式
        storeId: ''
      }
    }
  },
  created() {
    this.getStoreOptions()
    this.getList()
  },
  methods: {
    // 获取门店选项
    async getStoreOptions() {
      try {
        const response = await getStoreSelector()
        if (response.code === 200 && response.data) {
          this.storeOptions = response.data.list.map(item => ({
            value: item.id,
            label: item.fullName
          }))
        }
      } catch (error) {
        console.error('获取门店列表失败:', error)
      }
    },

    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        const params = {
          StatisticsMonth: this.queryParams.statisticsMonth || undefined,
          StoreId: this.queryParams.storeId || undefined
        }

        const response = await getShopStockList(params)
        console.log(response)
        if (response.code === 200) {
          this.list = response.data.data || []
        } else {
          this.$message.error(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('获取门店股份列表失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleQuery() {
      this.getList()
    },

    // 重置搜索
    resetQuery() {
      const getCurrentMonth = () => {
        const now = new Date()
        const year = now.getFullYear()
        const month = String(now.getMonth() + 1).padStart(2, '0')
        return `${year}${month}`
      }

      this.queryParams = {
        statisticsMonth: getCurrentMonth(),
        storeId: ''
      }
      this.getList()
    },

    // 显示计算股份弹窗
    showCalculateDialog() {
      const getCurrentMonth = () => {
        const now = new Date()
        const year = now.getFullYear()
        const month = String(now.getMonth() + 1).padStart(2, '0')
        return `${year}${month}`
      }
      this.calculateMonth = getCurrentMonth()
      this.calculateStoreId = ''
      this.calculateDialogVisible = true
    },

    // 关闭计算股份弹窗
    handleCalculateDialogClose() {
      this.calculateDialogVisible = false
    },

    // 确认计算股份
    async handleCalculateConfirm() {
      if (!this.calculateMonth) {
        this.$message.warning('请选择统计月份')
        return
      }

      this.calculateLoading = true
      try {
        const data = {
          statisticsMonth: this.calculateMonth,
          storeId: this.calculateStoreId || undefined
        }

        const response = await generateShopStock(data)
        if (response.code === 200) {
          this.$message.success('计算股份成功')
          this.calculateDialogVisible = false
          this.getList()
        } else {
          this.$message.error(response.msg || '计算股份失败')
        }
      } catch (error) {
        console.error('计算股份失败:', error)
        this.$message.error(error.message || '计算股份失败')
      } finally {
        this.calculateLoading = false
      }
    },

    // 显示详情
    showDetail(row) {
      this.currentDetailData = row
      this.detailVisible = true
    },

    // 关闭详情弹窗
    handleDetailClose() {
      this.detailVisible = false
      this.currentDetailData = null
    },

    // 导出功能
    async handleExport() {
      if (!this.list || this.list.length === 0) {
        this.$message.warning('暂无数据可导出')
        return
      }

      this.exportLoading = true
      try {
        // 动态导入 xlsx 库
        const XLSX = await import('xlsx')

        // 构建表头（根据后端DTO字段的中文映射）
        const headers = [
          '门店名称',
          '统计月份',
          '主营收入',
          '生美消耗业绩',
          '科美消耗业绩',
          '医美消耗业绩',
          '合作消费业绩',
          '产品消耗业绩',
          '其他消耗业绩',
          '其他收入',
          '预收款',
          '实际退款',
          '应收',
          '银行存款',
          '主营成本-产品',
          '主营成本-福田',
          '主营成本-毛巾',
          '主营成本-科技部',
          '主营成本-管理费',
          '主营成本-合作',
          '主营成本-大项目',
          '其他成本',
          '健康师底薪',
          '店助底薪',
          '店助主任底薪',
          '店长底薪',
          '总经理/经理底薪',
          '健康师提成',
          '店助提成',
          '店助主任提成',
          '店长提成',
          '总经理/经理提成',
          '手工',
          '出勤',
          '手机保管费',
          '人头',
          '门店T区',
          '社保',
          '门店房租',
          '宿舍房租',
          '当期费用',
          '当前费用-秦董',
          '财务费用',
          '奖励-医美',
          '奖励-其他',
          '奖励-大单奖',
          '奖励-首单奖',
          '奖励',
          '其他1',
          '其他2',
          '利润',
          '财务利润'
        ]

        // 构建数据行
        const dataRows = this.list.map(item => [
          item.StoreName || '无',
          this.formatMonth(item.StatisticsMonth) || '无',
          this.formatMoney(item.MainIncome),
          this.formatMoney(item.ConsumeLifeBeauty),
          this.formatMoney(item.ConsumeTechBeauty),
          this.formatMoney(item.ConsumeMedicalBeauty),
          this.formatMoney(item.ConsumeCooperation),
          this.formatMoney(item.ConsumeProduct),
          this.formatMoney(item.ConsumeOther),
          this.formatMoney(item.OtherIncome),
          this.formatMoney(item.AdvanceReceipt),
          this.formatMoney(item.Refund),
          this.formatMoney(item.Receivables),
          this.formatMoney(item.BankDeposit),
          this.formatMoney(item.CostProduct),
          this.formatMoney(item.CostFutian),
          this.formatMoney(item.CostTowel),
          this.formatMoney(item.CostTechDept),
          this.formatMoney(item.CostManagementFee),
          this.formatMoney(item.CostCooperation),
          this.formatMoney(item.CostMajorProject),
          this.formatMoney(item.CostOther),
          this.formatMoney(item.SalaryBaseHealthCoach),
          this.formatMoney(item.SalaryBaseAssistant),
          this.formatMoney(item.SalaryBaseDirector),
          this.formatMoney(item.SalaryBaseStoreManager),
          this.formatMoney(item.SalaryBaseGeneralManager),
          this.formatMoney(item.SalaryCommissionHealthCoach),
          this.formatMoney(item.SalaryCommissionAssistant),
          this.formatMoney(item.SalaryCommissionDirector),
          this.formatMoney(item.SalaryCommissionStoreManager),
          this.formatMoney(item.SalaryCommissionGeneralManager),
          this.formatMoney(item.SalaryManual),
          this.formatMoney(item.SalaryAttendance),
          this.formatMoney(item.SalaryPhoneCustody),
          this.formatMoney(item.SalaryHeadcountReward),
          this.formatMoney(item.SalaryTZone),
          this.formatMoney(item.SocialSecurity),
          this.formatMoney(item.StoreRent),
          this.formatMoney(item.DormRent),
          this.formatMoney(item.CurrentPeriodExpense),
          this.formatMoney(item.CurrentPeriodExpenseQin),
          this.formatMoney(item.FinancialFee),
          this.formatMoney(item.RewardMedicalBeauty),
          this.formatMoney(item.RewardOther),
          this.formatMoney(item.RewardLargeOrder),
          this.formatMoney(item.RewardFirstOrder),
          this.formatMoney(item.RewardGeneral),
          this.formatMoney(item.Other1),
          this.formatMoney(item.Other2),
          this.formatMoney(item.Profit),
          this.formatMoney(item.FinancialProfit)
        ])

        // 合并表头和数据
        const excelData = [headers, ...dataRows]

        // 创建工作表
        const ws = XLSX.utils.aoa_to_sheet(excelData)

        // 设置列宽
        const colWidths = headers.map(() => ({ wch: 15 }))
        ws['!cols'] = colWidths

        // 创建工作簿
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, ws, '门店股份')

        // 生成文件名
        const now = new Date()
        const timestamp = now.getFullYear() + 
          String(now.getMonth() + 1).padStart(2, '0') + 
          String(now.getDate()).padStart(2, '0') + 
          String(now.getHours()).padStart(2, '0') + 
          String(now.getMinutes()).padStart(2, '0') + 
          String(now.getSeconds()).padStart(2, '0')
        const fileName = `门店股份_${timestamp}.xlsx`

        // 导出文件
        XLSX.writeFile(wb, fileName)

        this.$message.success('导出成功')
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败，请重试')
      } finally {
        this.exportLoading = false
      }
    },

    // 格式化金额
    formatMoney(value) {
      if (value === null || value === undefined || value === '') {
        return '0.00'
      }
      return Number(value).toFixed(2)
    },

    // 格式化月份
    formatMonth(value) {
      if (!value || value.length !== 6) {
        return value || '无'
      }
      const year = value.substring(0, 4)
      const month = value.substring(4, 6)
      return `${year}-${month}`
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #f5f5f5;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .header-left {
    h2 {
      margin: 0 0 8px 0;
      color: #303133;
      font-size: 20px;
      font-weight: 600;
    }

    .page-desc {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .header-right {
    display: flex;
    gap: 12px;
  }
}

.search-container {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-container {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.store-name {
  display: flex;
  align-items: center;
  gap: 6px;

  .store-icon {
    color: #409EFF;
    font-size: 16px;
  }
}

.highlight {
  color: #409EFF;
  font-weight: 600;
}

// 表格样式优化
::v-deep .el-table {
  .el-table__header-wrapper {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
    }
  }

  .el-table__body-wrapper {
    .el-table__row {
      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
