<template>
  <div class="salary-statistics-page">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card class="search-card">
        <div slot="header" class="search-header">
          <span><i class="el-icon-search"></i> 健康师工资统计查询</span>
        </div>
        <el-form :model="queryParams" :inline="true" class="search-form">
          <el-form-item label="统计月份">
            <el-date-picker v-model="queryParams.statisticsMonth" type="month" placeholder="选择月份" format="yyyyMM"
              value-format="yyyyMM" size="small"></el-date-picker>
          </el-form-item>
          <el-form-item label="门店名称">
            <el-input v-model="queryParams.storeName" placeholder="请输入门店名称" size="small" clearable></el-input>
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input v-model="queryParams.employeeName" placeholder="请输入员工姓名" size="small" clearable></el-input>
          </el-form-item>
          <el-form-item label="岗位">
            <el-select v-model="queryParams.position" placeholder="请选择岗位" size="small" clearable>
              <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-input v-model="queryParams.goldTriangleTeam" placeholder="请输入金三角战队" size="small" clearable></el-input>
          </el-form-item>
          <el-form-item label="是否锁定">
            <el-select v-model="queryParams.isLocked" placeholder="请选择锁定状态" size="small" 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" size="small" @click="handleSearch">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button size="small" @click="handleReset">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-card class="table-card">
        <div slot="header" class="table-header">
          <span><i class="el-icon-s-data"></i> 健康师工资统计列表</span>
        </div>
        <el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" :height="tableHeight">
          <!-- 基本信息 -->
          <el-table-column prop="StatisticsMonth" 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="EmployeeName" label="员工姓名" width="100" fixed="left"></el-table-column>
          <el-table-column prop="Position" label="岗位" width="100" fixed="left"></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="RewardPerformance" label="奖励业绩" width="100" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.RewardPerformance) }}
            </template>
          </el-table-column>

          <!-- 新客数据 -->
          <el-table-column label="新客数据" align="center">
            <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="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>

          <!-- 升单数据 -->
          <el-table-column label="升单数据" align="center">
            <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="UpgradePoint" label="升单提点" width="100" align="right">
              <template slot-scope="scope">
                {{ formatPercent(scope.row.UpgradePoint) }}
              </template>
            </el-table-column>
          </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="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="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.TeamPerformance) }}
            </template>
          </el-table-column>
          <el-table-column prop="Percentage" label="占比" width="100" align="right">
            <template slot-scope="scope">
              {{ formatPercent(scope.row.Percentage) }}
            </template>
          </el-table-column>
          <el-table-column prop="CustomerCount" label="到店人头" width="100" align="right"></el-table-column>
          <el-table-column prop="WorkingDays" 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="100" 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="StoreTZoneCommission" label="门店T区提成" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.StoreTZoneCommission) }}
            </template>
          </el-table-column>
          <el-table-column prop="TotalCommission" label="提成合计" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.TotalCommission) }}
            </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="HandworkFee" label="手工费" width="100" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.HandworkFee) }}
            </template>
          </el-table-column>
          <el-table-column prop="OutherHandworkFee" label="额外手工费" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.OutherHandworkFee) }}
            </template>
          </el-table-column>
          <el-table-column prop="TransportationAllowance" label="车补" width="100" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.TransportationAllowance) }}
            </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="GuaranteedSalary" label="保底工资" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.GuaranteedSalary) }}
            </template>
          </el-table-column>
          <el-table-column prop="GuaranteedLeaveDeduction" label="保底请假扣款" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.GuaranteedLeaveDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="GuaranteedBaseSalary" label="保底底薪" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.GuaranteedBaseSalary) }}
            </template>
          </el-table-column>
          <el-table-column prop="GuaranteedSupplement" label="保底补差" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.GuaranteedSupplement) }}
            </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="TotalSubsidy" label="补贴合计" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.TotalSubsidy) }}
            </template>
          </el-table-column>
          <el-table-column prop="MissingCard" label="缺卡扣款" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.MissingCard) }}
            </template>
          </el-table-column>
          <el-table-column prop="LateArrival" label="迟到扣款" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.LateArrival) }}
            </template>
          </el-table-column>
          <el-table-column prop="LeaveDeduction" label="请假扣款" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.LeaveDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="SocialInsuranceDeduction" label="扣社保" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.SocialInsuranceDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="RewardDeduction" label="扣除奖励" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.RewardDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="AccommodationDeduction" label="扣住宿费" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.AccommodationDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="StudyPeriodDeduction" label="扣学习期费用" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.StudyPeriodDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="WorkClothesDeduction" label="扣工作服费用" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.WorkClothesDeduction) }}
            </template>
          </el-table-column>
          <el-table-column prop="TotalDeduction" label="扣款合计" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.TotalDeduction) }}
            </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="ReturnPhoneDeposit" label="退手机押金" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.ReturnPhoneDeposit) }}
            </template>
          </el-table-column>
          <el-table-column prop="ReturnAccommodationDeposit" label="退住宿押金" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.ReturnAccommodationDeposit) }}
            </template>
          </el-table-column>
          <el-table-column prop="ActualSalary" label="实发工资" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.ActualSalary) }}
            </template>
          </el-table-column>
          <el-table-column prop="MonthlyPaymentStatus" label="当月是否发放" width="120" align="center"></el-table-column>
          <el-table-column prop="PaidAmount" label="支付金额" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.PaidAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="PendingAmount" label="待支付金额" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.PendingAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="LastMonthSupplement" label="补发上月" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.LastMonthSupplement) }}
            </template>
          </el-table-column>
          <el-table-column prop="MonthlyTotalPayment" label="当月支付总额" width="120" align="right">
            <template slot-scope="scope">
              {{ formatMoney(scope.row.MonthlyTotalPayment) }}
            </template>
          </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'" size="mini">
                {{ scope.row.IsLocked === 1 ? '已锁定' : '未锁定' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-section">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>
      </el-card>

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

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

export default {
  name: 'SalaryStatistics',
  data() {
    return {
      loading: false,
      tableData: [],
      tableHeight: 500,
      queryParams: {
        statisticsMonth: '',
        storeName: '',
        employeeName: '',
        position: '',
        goldTriangleTeam: '',
        isLocked: null
      },
      pagination: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        const params = {
          currentPage: this.pagination.pageIndex,
          pageSize: this.pagination.pageSize,
          ...this.queryParams
        }

        const response = await getSalaryStatisticsList(params)

        if (response.code === 200) {
          this.tableData = response.data.list || []
          this.pagination.total = response.data.pagination.total || 0
        } else {
          this.$message.error(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('获取工资统计数据失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.pageIndex = 1
      this.getList()
    },

    // 重置
    handleReset() {
      this.queryParams = {
        statisticsMonth: '',
        storeName: '',
        employeeName: '',
        position: '',
        goldTriangleTeam: '',
        isLocked: null
      }
      this.pagination.pageIndex = 1
      this.getList()
    },

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

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

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

    // 格式化百分比
    formatPercent(value) {
      if (value === null || value === undefined || value === '') {
        return '0.00%'
      }
      return (Number(value) * 100).toFixed(2) + '%'
    }
  }
}
</script>

<style lang="scss" scoped>
.salary-statistics-page {
  padding: 20px;
  height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-section {
  flex-shrink: 0;
  margin-bottom: 20px;
}

.search-card {
  .search-header {
    font-weight: 600;
    color: #303133;
  }

  .search-form {
    .el-form-item {
      margin-bottom: 18px;
    }
  }
}

.table-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.table-card {
  height: 100%;

  .table-header {
    font-weight: 600;
    color: #303133;
  }

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

.pagination-section {
  flex-shrink: 0;
  margin-top: 20px;
  text-align: right;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

// 表格样式优化
.el-table {
  overflow: auto;

  .el-table__header-wrapper {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
    }
  }

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

// 搜索表单样式
.search-form {
  .el-form-item {
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>