<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.StoreName || '无' }}</span>
            </div>
            <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.Position || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">是否新店：</span>
              <span class="value">{{ detailData.IsNewStore || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">新店保护阶段：</span>
              <span class="value">{{ detailData.NewStoreProtectionStage || '0' }}</span>
            </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.StoreTotalPerformance) }}</span>
            </div>
            <div class="info-item">
              <span class="label">门店开单业绩：</span>
              <span class="value">{{ formatMoney(detailData.StoreBillingPerformance) }}</span>
            </div>
            <div class="info-item">
              <span class="label">门店退卡业绩：</span>
              <span class="value">{{ formatMoney(detailData.StoreRefundPerformance) }}</span>
            </div>
            <div class="info-item">
              <span class="label">门店生命线：</span>
              <span class="value">{{ formatMoney(detailData.StoreLifeline) }}</span>
            </div>
            <div class="info-item">
              <span class="label">业绩完成率：</span>
              <span class="value">{{ formatPercent(detailData.PerformanceCompletionRate) }}</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.CommissionRate) }}</span>
            </div>
            <div class="info-item">
              <span class="label">提成金额：</span>
              <span class="value highlight">{{ formatMoney(detailData.CommissionAmount) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 阶段奖励信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-medal"></i>
          <span>阶段奖励信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">进店消耗人数：</span>
              <span class="value">{{ detailData.HeadCount || '0' }}</span>
            </div>
            <div class="info-item">
              <span class="label">第一阶段目标人数：</span>
              <span class="value">{{ detailData.Stage1TargetHeadCount || '0' }}</span>
            </div>
            <div class="info-item">
              <span class="label">第二阶段目标人数：</span>
              <span class="value">{{ detailData.Stage2TargetHeadCount || '0' }}</span>
            </div>
            <div class="info-item">
              <span class="label">是否达到第一阶段：</span>
              <span class="value">
                <el-tag :type="detailData.ReachedStage1 === '是' ? 'success' : 'info'" size="mini">
                  {{ detailData.ReachedStage1 || '否' }}
                </el-tag>
              </span>
            </div>
            <div class="info-item">
              <span class="label">是否达到第二阶段：</span>
              <span class="value">
                <el-tag :type="detailData.ReachedStage2 === '是' ? 'success' : 'info'" size="mini">
                  {{ detailData.ReachedStage2 || '否' }}
                </el-tag>
              </span>
            </div>
            <div class="info-item">
              <span class="label">阶段奖励金额：</span>
              <span class="value highlight">{{ formatMoney(detailData.StageRewardAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">第一阶段奖励：</span>
              <span class="value">{{ formatMoney(detailData.Stage1Reward) }}</span>
            </div>
            <div class="info-item">
              <span class="label">第二阶段奖励：</span>
              <span class="value">{{ formatMoney(detailData.Stage2Reward) }}</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">{{ formatMoney(detailData.PhoneManagementFee) }}</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.GrossSalary) }}</span>
            </div>
            <div class="info-item">
              <span class="label">实发工资：</span>
              <span class="value highlight large">{{ formatMoney(detailData.ActualSalary) }}</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 highlight">{{ formatMoney(detailData.TotalDeduction) }}</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 highlight">{{ formatMoney(detailData.TotalSubsidy) }}</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">{{ 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: 'AssistantDetailDialog',
  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>

