<template>
  <el-dialog
    title="科技部总经理工资详情"
    :visible="visible"
    width="1400px"
    :close-on-click-modal="false"
    @close="handleClose"
    class="detail-dialog"
  >
    <div v-if="detailData" class="detail-content">
      <!-- 基本信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-user"></i>
          <span>基本信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">员工姓名：</span>
              <span class="value">{{ detailData.EmployeeName || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">员工账号：</span>
              <span class="value">{{ detailData.EmployeeAccount || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">核算岗位：</span>
              <span class="value">{{ detailData.Position || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">统计月份：</span>
              <span class="value">{{ detailData.StatisticsMonth || '无' }}</span>
            </div>
            <div class="info-item" v-if="detailData.IsTerminated !== undefined && detailData.IsTerminated !== null">
              <span class="label">是否离职：</span>
              <el-tag :type="detailData.IsTerminated === 1 ? 'danger' : 'success'" size="mini">
                {{ detailData.IsTerminated === 1 ? '已离职' : '在职' }}
              </el-tag>
            </div>
            <div class="info-item" v-if="detailData.IsLocked !== undefined && detailData.IsLocked !== null">
              <span class="label">锁定状态：</span>
              <el-tag :type="detailData.IsLocked === 1 ? 'danger' : 'success'" size="mini">
                {{ detailData.IsLocked === 1 ? '已锁定' : '未锁定' }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 业绩信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-trophy"></i>
          <span>业绩信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">溯源金额：</span>
              <span class="value highlight">{{ formatMoney(detailData.TraceabilityAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">Cell金额：</span>
              <span class="value highlight">{{ formatMoney(detailData.CellAmount) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 提成信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-money"></i>
          <span>提成信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">溯源金额提成比例：</span>
              <span class="value">{{ formatPercent(detailData.TraceabilityCommissionRate) }}</span>
            </div>
            <div class="info-item">
              <span class="label">溯源金额提成金额：</span>
              <span class="value highlight">{{ formatMoney(detailData.TraceabilityCommissionAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">Cell金额提成比例：</span>
              <span class="value">{{ formatPercent(detailData.CellCommissionRate) }}</span>
            </div>
            <div class="info-item">
              <span class="label">Cell金额提成金额：</span>
              <span class="value highlight">{{ formatMoney(detailData.CellCommissionAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">提成合计：</span>
              <span class="value highlight">{{ formatMoney(detailData.TotalCommission) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 工资信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-wallet"></i>
          <span>工资信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">底薪：</span>
              <span class="value">{{ formatMoney(detailData.BaseSalary) }}</span>
            </div>
            <div class="info-item">
              <span class="label">在店天数：</span>
              <span class="value">{{ detailData.WorkingDays || '0' }}</span>
            </div>
            <div class="info-item">
              <span class="label">请假天数：</span>
              <span class="value">{{ detailData.LeaveDays || '0' }}</span>
            </div>
            <div class="info-item">
              <span class="label">核算应发工资：</span>
              <span class="value highlight">{{ formatMoney(detailData.CalculatedGrossSalary) }}</span>
            </div>
            <div class="info-item">
              <span class="label">最终应发工资：</span>
              <span class="value highlight">{{ formatMoney(detailData.FinalGrossSalary) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 补贴信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-circle-plus"></i>
          <span>补贴信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">当月培训补贴：</span>
              <span class="value">{{ formatMoney(detailData.MonthlyTrainingSubsidy) }}</span>
            </div>
            <div class="info-item">
              <span class="label">当月交通补贴：</span>
              <span class="value">{{ formatMoney(detailData.MonthlyTransportSubsidy) }}</span>
            </div>
            <div class="info-item">
              <span class="label">上月培训补贴：</span>
              <span class="value">{{ formatMoney(detailData.LastMonthTrainingSubsidy) }}</span>
            </div>
            <div class="info-item">
              <span class="label">上月交通补贴：</span>
              <span class="value">{{ formatMoney(detailData.LastMonthTransportSubsidy) }}</span>
            </div>
            <div class="info-item">
              <span class="label">补贴合计：</span>
              <span class="value highlight">{{ formatMoney(detailData.TotalSubsidy) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 扣款信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-circle-minus"></i>
          <span>扣款信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">缺卡扣款：</span>
              <span class="value">{{ formatMoney(detailData.MissingCard) }}</span>
            </div>
            <div class="info-item">
              <span class="label">迟到扣款：</span>
              <span class="value">{{ formatMoney(detailData.LateArrival) }}</span>
            </div>
            <div class="info-item">
              <span class="label">请假扣款：</span>
              <span class="value">{{ formatMoney(detailData.LeaveDeduction) }}</span>
            </div>
            <div class="info-item">
              <span class="label">扣社保：</span>
              <span class="value">{{ formatMoney(detailData.SocialInsuranceDeduction) }}</span>
            </div>
            <div class="info-item">
              <span class="label">扣除奖励：</span>
              <span class="value">{{ formatMoney(detailData.RewardDeduction) }}</span>
            </div>
            <div class="info-item">
              <span class="label">扣住宿费：</span>
              <span class="value">{{ formatMoney(detailData.AccommodationDeduction) }}</span>
            </div>
            <div class="info-item">
              <span class="label">扣学习期费用：</span>
              <span class="value">{{ formatMoney(detailData.StudyPeriodDeduction) }}</span>
            </div>
            <div class="info-item">
              <span class="label">扣工作服费用：</span>
              <span class="value">{{ formatMoney(detailData.WorkClothesDeduction) }}</span>
            </div>
            <div class="info-item">
              <span class="label">扣款合计：</span>
              <span class="value highlight">{{ formatMoney(detailData.TotalDeduction) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-document"></i>
          <span>其他信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">发奖金：</span>
              <span class="value">{{ formatMoney(detailData.Bonus) }}</span>
            </div>
            <div class="info-item">
              <span class="label">退手机押金：</span>
              <span class="value">{{ formatMoney(detailData.ReturnPhoneDeposit) }}</span>
            </div>
            <div class="info-item">
              <span class="label">退住宿押金：</span>
              <span class="value">{{ formatMoney(detailData.ReturnAccommodationDeposit) }}</span>
            </div>
            <div class="info-item">
              <span class="label">补发上月：</span>
              <span class="value">{{ formatMoney(detailData.LastMonthSupplement) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-credit-card"></i>
          <span>支付信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">实发工资：</span>
              <span class="value highlight large">{{ formatMoney(detailData.ActualSalary) }}</span>
            </div>
            <div class="info-item">
              <span class="label">当月是否发放：</span>
              <span class="value">{{ detailData.MonthlyPaymentStatus || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">支付金额：</span>
              <span class="value">{{ formatMoney(detailData.PaidAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">待支付金额：</span>
              <span class="value">{{ formatMoney(detailData.PendingAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">当月支付总额：</span>
              <span class="value highlight">{{ formatMoney(detailData.MonthlyTotalPayment) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="no-data">
      <i class="el-icon-warning"></i>
      <span>暂无数据</span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'TechGeneralManagerDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: null
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    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>
.detail-dialog {
  .detail-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
  }

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

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid #409EFF;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      i {
        color: #409EFF;
        font-size: 18px;
      }
    }

    .section-content {
      .info-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 40px;

        .info-item {
          display: flex;
          align-items: center;
          min-width: 200px;
          flex: 0 0 calc(33.333% - 27px);

          .label {
            color: #606266;
            font-size: 14px;
            white-space: nowrap;
            margin-right: 8px;
          }

          .value {
            color: #303133;
            font-size: 14px;
            font-weight: 500;

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

            &.large {
              font-size: 18px;
              color: #67C23A;
            }
          }
        }
      }
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #909399;

    i {
      font-size: 48px;
      margin-bottom: 16px;
    }

    span {
      font-size: 14px;
    }
  }
}

// 滚动条样式
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;

  &:hover {
    background: #a8a8a8;
  }
}
</style>

