<template>
  <div class="salary-statistics-container">
    <!-- 查询条件 -->
    <el-card class="box-card search-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-search"></i> 查询条件</span>
      </div>
      <el-form :model="queryForm" :inline="true" size="small">
        <el-form-item label="统计月份">
          <el-date-picker v-model="queryForm.statisticsMonth" type="month" placeholder="选择月份" format="yyyy年MM月"
            value-format="yyyyMM" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="门店名称">
          <el-input v-model="queryForm.storeName" placeholder="请输入门店名称" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="queryForm.employeeName" placeholder="请输入员工姓名" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="核算岗位">
          <el-select v-model="queryForm.position" placeholder="请选择岗位" clearable>
            <el-option label="健康师" value="健康师"></el-option>
            <el-option label="店助" value="店助"></el-option>
            <el-option label="店长" value="店长"></el-option>
            <el-option label="主任" value="主任"></el-option>
            <el-option label="总经理" value="总经理"></el-option>
            <el-option label="经理" value="经理"></el-option>
            <el-option label="科技部老师" value="科技部老师"></el-option>
            <el-option label="顾问" value="顾问"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否锁定">
          <el-select v-model="queryForm.isLocked" placeholder="请选择锁定状态" clearable>
            <el-option label="未锁定" :value="0"></el-option>
            <el-option label="已锁定" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <i class="el-icon-search"></i> 查询
          </el-button>
          <el-button @click="handleReset">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="box-card table-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-s-data"></i> 工资统计列表</span>
      </div>

      <el-table :data="tableData" v-loading="loading" stripe border height="600" :summary-method="getSummaries"
        show-summary>
        <el-table-column prop="EmployeeName" label="员工姓名" width="100" fixed="left"></el-table-column>
        <el-table-column prop="StoreName" label="门店名称" width="120" fixed="left"></el-table-column>
        <el-table-column prop="Position" label="岗位" width="100"></el-table-column>
        <el-table-column prop="GoldTriangleTeam" label="金三角战队" width="120"></el-table-column>

        <!-- 业绩相关 -->
        <el-table-column prop="TotalPerformance" label="总业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TotalPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="BasePerformance" label="基础业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.BasePerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="CooperationPerformance" label="合作业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CooperationPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="NewCustomerPerformance" label="新客业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.NewCustomerPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="UpgradePerformance" label="升单业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.UpgradePerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="ProjectCount" label="项目数" width="80" align="right"></el-table-column>
        <el-table-column prop="StoreTotalPerformance" label="门店总业绩" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.StoreTotalPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="TeamPerformance" label="队伍业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TeamPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="PerformanceRatio" label="占比" width="80" align="right">
          <template slot-scope="scope">
            {{ formatPercent(scope.row.PerformanceRatio) }}
          </template>
        </el-table-column>
        <el-table-column prop="NewCustomerConversionRate" label="新客成交率" width="100" align="right">
          <template slot-scope="scope">
            {{ formatPercent(scope.row.NewCustomerConversionRate) }}
          </template>
        </el-table-column>
        <el-table-column prop="NewCustomerPoint" label="新客提点" width="100" align="right">
          <template slot-scope="scope">
            {{ formatPercent(scope.row.NewCustomerPoint) }}
          </template>
        </el-table-column>
        <el-table-column prop="UpgradePoint" label="升单提点" width="100" align="right">
          <template slot-scope="scope">
            {{ formatPercent(scope.row.UpgradePoint) }}
          </template>
        </el-table-column>
        <el-table-column prop="TraceabilityPerformance" label="溯源业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TraceabilityPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="CellPerformance" label="cell业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CellPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="ProjectOnePerformance" label="大项目一部业绩" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ProjectOnePerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="ProjectTwoPerformance" label="大项目二部业绩" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ProjectTwoPerformance) }}
          </template>
        </el-table-column>
        <el-table-column prop="MonthlyPerformance" label="当月业绩" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.MonthlyPerformance) }}
          </template>
        </el-table-column>

        <!-- 成本相关 -->
        <el-table-column prop="PropertyWaterElectricity" label="物业水电" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.PropertyWaterElectricity) }}
          </template>
        </el-table-column>
        <el-table-column prop="StoreExpense" label="门店支出" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.StoreExpense) }}
          </template>
        </el-table-column>
        <el-table-column prop="ProductMaterial" label="产品物料" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ProductMaterial) }}
          </template>
        </el-table-column>
        <el-table-column prop="MicroSculptureCost" label="微雕成本" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.MicroSculptureCost) }}
          </template>
        </el-table-column>
        <el-table-column prop="OtherCooperationCost" label="其它合作成本" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.OtherCooperationCost) }}
          </template>
        </el-table-column>
        <el-table-column prop="TowelWashing" label="洗毛巾" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TowelWashing) }}
          </template>
        </el-table-column>
        <el-table-column prop="GrossProfit" label="毛利" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GrossProfit) }}
          </template>
        </el-table-column>

        <!-- 提成相关 -->
        <el-table-column prop="GeneralManagerCommission" label="总经理提成额" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GeneralManagerCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="ManagerCommission" label="经理提成额" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ManagerCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="Consumption" label="消耗" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.Consumption) }}
          </template>
        </el-table-column>
        <el-table-column prop="AttendanceDays" label="到店人头" width="100" align="right"></el-table-column>
        <el-table-column prop="StoreDays" label="在店天数" width="100" align="right"></el-table-column>
        <el-table-column prop="LeaveDays" label="请假天数" width="100" align="right"></el-table-column>
        <el-table-column prop="CommissionPoint" label="提点" width="80" align="right">
          <template slot-scope="scope">
            {{ formatPercent(scope.row.CommissionPoint) }}
          </template>
        </el-table-column>
        <el-table-column prop="BasePerformanceCommission" label="基础业绩提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.BasePerformanceCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="CooperationPerformanceCommission" label="合作业绩提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CooperationPerformanceCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="ConsultantCommission" label="顾问提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ConsultantCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="StoreTAreaCommission" label="门店T区提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.StoreTAreaCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="AssistantCommission1" label="店助提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AssistantCommission1) }}
          </template>
        </el-table-column>
        <el-table-column prop="AssistantDirectorCommission" label="店助主任提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AssistantDirectorCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="DirectorCommission" label="主任提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.DirectorCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="AssistantCommission2" label="店长提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AssistantCommission2) }}
          </template>
        </el-table-column>
        <el-table-column prop="GeneralManagerCommissionAmount" label="总经理提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GeneralManagerCommissionAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="ManagerCommissionAmount" label="经理提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ManagerCommissionAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="PerformanceCommission" label="业绩提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.PerformanceCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="ConsumptionCommission" label="消耗提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ConsumptionCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="TechGroupLeaderCommission" label="科技部组长提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TechGroupLeaderCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="TraceabilityCommission" label="溯源提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TraceabilityCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="CellCommission" label="cell提成" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CellCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="ProjectCommission" label="大项目部提成" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ProjectCommission) }}
          </template>
        </el-table-column>
        <el-table-column prop="CommissionTotal" label="提成合计" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CommissionTotal) }}
          </template>
        </el-table-column>

        <!-- 底薪相关 -->
        <el-table-column prop="HealthCoachBaseSalary" label="健康师底薪" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.HealthCoachBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="AssistantBaseSalary" label="店助底薪" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AssistantBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="ManagerBaseSalary" label="店长底薪" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ManagerBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="DirectorBaseSalary" label="主任底薪" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.DirectorBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="AssistantDirectorBaseSalary" label="店助主任底薪" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AssistantDirectorBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="GeneralManagerBaseSalary" label="总经理底薪" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GeneralManagerBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="ManagerBaseSalaryAmount" label="经理底薪" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ManagerBaseSalaryAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="TechTeacherBaseSalary" label="科技部老师底薪" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.TechTeacherBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="ProjectBaseSalary" label="大项目部底薪" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ProjectBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="BaseSalaryTotal" label="底薪合计" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.BaseSalaryTotal) }}
          </template>
        </el-table-column>

        <!-- 其他收入 -->
        <el-table-column prop="ManualWork" label="手工" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ManualWork) }}
          </template>
        </el-table-column>
        <el-table-column prop="HeadCountReward" label="人头奖励" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.HeadCountReward) }}
          </template>
        </el-table-column>
        <el-table-column prop="PhoneManagement" label="手机管理" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.PhoneManagement) }}
          </template>
        </el-table-column>
        <el-table-column prop="CarAllowance" label="车补" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CarAllowance) }}
          </template>
        </el-table-column>
        <el-table-column prop="LessRest" label="少休" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.LessRest) }}
          </template>
        </el-table-column>
        <el-table-column prop="FullAttendance" label="全勤" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.FullAttendance) }}
          </template>
        </el-table-column>
        <el-table-column prop="CalculatedGrossSalary" label="核算应发工资" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.CalculatedGrossSalary) }}
          </template>
        </el-table-column>

        <!-- 保底相关 -->
        <el-table-column prop="Guarantee" label="保底" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.Guarantee) }}
          </template>
        </el-table-column>
        <el-table-column prop="GuaranteeLeave" label="保底请假" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GuaranteeLeave) }}
          </template>
        </el-table-column>
        <el-table-column prop="GuaranteeBaseSalary" label="保底底薪" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GuaranteeBaseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="GuaranteeSupplement" label="保底补差" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.GuaranteeSupplement) }}
          </template>
        </el-table-column>
        <el-table-column prop="FinalGrossSalary" label="最终应发工资" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.FinalGrossSalary) }}
          </template>
        </el-table-column>

        <!-- 补贴相关 -->
        <el-table-column prop="MonthlyTrainingSubsidy" label="当月培训补贴" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.MonthlyTrainingSubsidy) }}
          </template>
        </el-table-column>
        <el-table-column prop="MonthlyTransportSubsidy" label="当月交通补贴" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.MonthlyTransportSubsidy) }}
          </template>
        </el-table-column>
        <el-table-column prop="LastMonthTrainingSubsidy" label="上月培训补贴" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.LastMonthTrainingSubsidy) }}
          </template>
        </el-table-column>
        <el-table-column prop="LastMonthTransportSubsidy" label="上月交通补贴" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.LastMonthTransportSubsidy) }}
          </template>
        </el-table-column>
        <el-table-column prop="SubsidyTotal" label="补贴合计" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.SubsidyTotal) }}
          </template>
        </el-table-column>

        <!-- 扣款相关 -->
        <el-table-column prop="MissingCard" label="缺卡" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.MissingCard) }}
          </template>
        </el-table-column>
        <el-table-column prop="Late" label="迟到" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.Late) }}
          </template>
        </el-table-column>
        <el-table-column prop="Leave" label="请假" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.Leave) }}
          </template>
        </el-table-column>
        <el-table-column prop="SocialSecurityDeduction" label="扣社保" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.SocialSecurityDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="RewardDeduction" label="扣除奖励" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.RewardDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="AccommodationDeduction" label="扣住宿" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AccommodationDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="StudyPeriodDeduction" label="扣学习期" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.StudyPeriodDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="WorkClothesDeduction" label="扣工作服" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.WorkClothesDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="DeductionTotal" label="扣款合计" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.DeductionTotal) }}
          </template>
        </el-table-column>

        <!-- 其他 -->
        <el-table-column prop="Bonus" label="发奖金" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.Bonus) }}
          </template>
        </el-table-column>
        <el-table-column prop="PhoneDepositReturn" label="退手机押金" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.PhoneDepositReturn) }}
          </template>
        </el-table-column>
        <el-table-column prop="AccommodationDepositReturn" label="退住宿押金" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.AccommodationDepositReturn) }}
          </template>
        </el-table-column>
        <el-table-column prop="ActualGrossSalary" label="实发工资" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.ActualGrossSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="MonthlyPaymentStatus" label="当月是否发放" width="120" align="center"></el-table-column>
        <el-table-column prop="PaymentAmount" label="支付金额" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.PaymentAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="PendingPaymentAmount" label="待支付金额" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.PendingPaymentAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="LastMonthSupplement" label="补发上月" width="100" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.LastMonthSupplement) }}
          </template>
        </el-table-column>
        <el-table-column prop="MonthlyPaymentTotal" label="当月支付总额" width="120" align="right">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.MonthlyPaymentTotal) }}
          </template>
        </el-table-column>
        <el-table-column prop="IsLocked" label="是否锁定" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsLocked ? 'danger' : 'success'">
              {{ scope.row.IsLocked ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 工资相关 -->
        <el-table-column label="工资数据" align="center">
          <el-table-column prop="FinalGrossSalary" label="最终应发工资" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.FinalGrossSalary) }}
            </template>
          </el-table-column>
          <el-table-column prop="actualSalary" label="实发工资" width="100" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.actualSalary) }}
            </template>
          </el-table-column>
          <el-table-column prop="totalDeduction" label="扣款合计" width="100" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.totalDeduction) }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 其他数据 -->
        <el-table-column prop="projectCount" label="项目数" width="80" align="center"></el-table-column>
        <el-table-column prop="workingDays" label="在店天数" width="100" align="center"></el-table-column>
        <el-table-column prop="leaveDays" label="请假天数" width="100" align="center"></el-table-column>

        <!-- 状态 -->
        <el-table-column prop="IsLocked" label="锁定状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsLocked === 1 ? 'danger' : 'success'">
              {{ scope.row.IsLocked === 1 ? '已锁定' : '未锁定' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleView(scope.row)">
              <i class="el-icon-view"></i> 查看
            </el-button>
            <el-button type="text" size="mini" @click="handleLock(scope.row)" :disabled="scope.row.IsLocked === 1">
              <i class="el-icon-lock"></i> 锁定
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
          :total="pagination.total" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSalaryStatisticsList } from '@/api/extend/salaryCalculation'

export default {
  name: 'SalaryStatistics',
  data() {
    return {
      loading: false,
      queryForm: {
        statisticsMonth: this.$route.query.month || this.getCurrentMonth(),
        storeName: '',
        employeeName: '',
        position: '',
        isLocked: null
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    // 获取当前月份
    getCurrentMonth() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return `${year}${month}`
    },

    // 查询数据
    async handleSearch() {
      this.loading = true
      try {
        const params = {
          ...this.queryForm,
          currentPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize
        }

        const response = await getSalaryStatisticsList(params)
        console.log(response)
        this.tableData = response.data.list || []
        this.pagination.total = response.data.pagination.total || 0
      } catch (error) {
        this.$message.error('查询失败：' + error.message)
      } finally {
        this.loading = false
      }
    },

    // 重置查询条件
    handleReset() {
      this.queryForm = {
        statisticsMonth: this.getCurrentMonth(),
        storeName: '',
        employeeName: '',
        position: '',
        isLocked: null
      }
      this.pagination.currentPage = 1
      this.handleSearch()
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
      this.handleSearch()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.handleSearch()
    },

    // 查看详情
    handleView(row) {
      this.$message.info('查看详情功能待开发')
    },

    // 锁定记录
    handleLock(row) {
      this.$confirm('确定要锁定这条记录吗？锁定后将无法修改。', '确认锁定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('锁定功能待开发')
      }).catch(() => {
        this.$message.info('已取消锁定')
      })
    },



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

    // 表格合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }

        const values = data.map(item => Number(item[column.property]))
        if (column.property && this.isMoneyColumn(column.property)) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0).toFixed(2)
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },

    // 判断是否为金额列
    isMoneyColumn(property) {
      const moneyColumns = [
        'TotalPerformance', 'BasePerformance', 'CooperationPerformance', 'StoreTotalPerformance',
        'CommissionTotal', 'BasePerformanceCommission', 'CooperationPerformanceCommission',
        'BaseSalaryTotal', 'HealthCoachBaseSalary', 'StoreManagerBaseSalary',
        'FinalGrossSalary', 'ActualGrossSalary', 'DeductionTotal'
      ]
      return moneyColumns.includes(property)
    }
  }
}
</script>

<style lang="scss" scoped>
.salary-statistics-container {
  padding: 20px;
  background-color: #f0f2f5;

  .search-card {
    margin-bottom: 20px;
  }

  .table-card {
    .header-actions {
      float: right;
    }
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
