<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">{{ formatMonth(detailData.StatisticsMonth) || '无' }}</span>
            </div>
            <div class="info-item" v-if="detailData.CreateTime">
              <span class="label">创建时间：</span>
              <span class="value">{{ formatDateTime(detailData.CreateTime) }}</span>
            </div>
            <div class="info-item" v-if="detailData.UpdateTime">
              <span class="label">更新时间：</span>
              <span class="value">{{ formatDateTime(detailData.UpdateTime) }}</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.MainIncome) }}</span>
            </div>
            <div class="info-item">
              <span class="label">生美消耗业绩：</span>
              <span class="value">{{ formatMoney(detailData.ConsumeLifeBeauty) }}</span>
            </div>
            <div class="info-item">
              <span class="label">科美消耗业绩：</span>
              <span class="value">{{ formatMoney(detailData.ConsumeTechBeauty) }}</span>
            </div>
            <div class="info-item">
              <span class="label">医美消耗业绩：</span>
              <span class="value">{{ formatMoney(detailData.ConsumeMedicalBeauty) }}</span>
            </div>
            <div class="info-item">
              <span class="label">合作消费业绩：</span>
              <span class="value">{{ formatMoney(detailData.ConsumeCooperation) }}</span>
            </div>
            <div class="info-item">
              <span class="label">产品消耗业绩：</span>
              <span class="value">{{ formatMoney(detailData.ConsumeProduct) }}</span>
            </div>
            <div class="info-item">
              <span class="label">其他消耗业绩：</span>
              <span class="value">{{ formatMoney(detailData.ConsumeOther) }}</span>
            </div>
            <div class="info-item">
              <span class="label">其他收入：</span>
              <span class="value">{{ formatMoney(detailData.OtherIncome) }}</span>
            </div>
            <div class="info-item">
              <span class="label">预收款：</span>
              <span class="value">{{ formatMoney(detailData.AdvanceReceipt) }}</span>
            </div>
            <div class="info-item">
              <span class="label">实际退款：</span>
              <span class="value">{{ formatMoney(detailData.Refund) }}</span>
            </div>
            <div class="info-item">
              <span class="label">应收：</span>
              <span class="value">{{ formatMoney(detailData.Receivables) }}</span>
            </div>
            <div class="info-item">
              <span class="label">银行存款：</span>
              <span class="value">{{ formatMoney(detailData.BankDeposit) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 成本信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-shopping-cart-2"></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.CostProduct) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营成本-福田：</span>
              <span class="value">{{ formatMoney(detailData.CostFutian) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营成本-毛巾：</span>
              <span class="value">{{ formatMoney(detailData.CostTowel) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营成本-科技部：</span>
              <span class="value">{{ formatMoney(detailData.CostTechDept) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营成本-管理费：</span>
              <span class="value">{{ formatMoney(detailData.CostManagementFee) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营成本-合作：</span>
              <span class="value">{{ formatMoney(detailData.CostCooperation) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营成本-大项目：</span>
              <span class="value">{{ formatMoney(detailData.CostMajorProject) }}</span>
            </div>
            <div class="info-item">
              <span class="label">其他成本：</span>
              <span class="value">{{ formatMoney(detailData.CostOther) }}</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.SalaryBaseHealthCoach) }}</span>
            </div>
            <div class="info-item">
              <span class="label">店助底薪：</span>
              <span class="value">{{ formatMoney(detailData.SalaryBaseAssistant) }}</span>
            </div>
            <div class="info-item">
              <span class="label">店助主任底薪：</span>
              <span class="value">{{ formatMoney(detailData.SalaryBaseDirector) }}</span>
            </div>
            <div class="info-item">
              <span class="label">店长底薪：</span>
              <span class="value">{{ formatMoney(detailData.SalaryBaseStoreManager) }}</span>
            </div>
            <div class="info-item">
              <span class="label">总经理/经理底薪：</span>
              <span class="value">{{ formatMoney(detailData.SalaryBaseGeneralManager) }}</span>
            </div>
            <div class="info-item">
              <span class="label">健康师提成：</span>
              <span class="value">{{ formatMoney(detailData.SalaryCommissionHealthCoach) }}</span>
            </div>
            <div class="info-item">
              <span class="label">店助提成：</span>
              <span class="value">{{ formatMoney(detailData.SalaryCommissionAssistant) }}</span>
            </div>
            <div class="info-item">
              <span class="label">店助主任提成：</span>
              <span class="value">{{ formatMoney(detailData.SalaryCommissionDirector) }}</span>
            </div>
            <div class="info-item">
              <span class="label">店长提成：</span>
              <span class="value">{{ formatMoney(detailData.SalaryCommissionStoreManager) }}</span>
            </div>
            <div class="info-item">
              <span class="label">总经理/经理提成：</span>
              <span class="value">{{ formatMoney(detailData.SalaryCommissionGeneralManager) }}</span>
            </div>
            <div class="info-item">
              <span class="label">手工：</span>
              <span class="value">{{ formatMoney(detailData.SalaryManual) }}</span>
            </div>
            <div class="info-item">
              <span class="label">出勤：</span>
              <span class="value">{{ formatMoney(detailData.SalaryAttendance) }}</span>
            </div>
            <div class="info-item">
              <span class="label">手机保管费：</span>
              <span class="value">{{ formatMoney(detailData.SalaryPhoneCustody) }}</span>
            </div>
            <div class="info-item">
              <span class="label">人头：</span>
              <span class="value">{{ formatMoney(detailData.SalaryHeadcountReward) }}</span>
            </div>
            <div class="info-item">
              <span class="label">门店T区：</span>
              <span class="value">{{ formatMoney(detailData.SalaryTZone) }}</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">{{ formatMoney(detailData.SocialSecurity) }}</span>
            </div>
            <div class="info-item">
              <span class="label">门店房租：</span>
              <span class="value">{{ formatMoney(detailData.StoreRent) }}</span>
            </div>
            <div class="info-item">
              <span class="label">宿舍房租：</span>
              <span class="value">{{ formatMoney(detailData.DormRent) }}</span>
            </div>
            <div class="info-item">
              <span class="label">当期费用：</span>
              <span class="value">{{ formatMoney(detailData.CurrentPeriodExpense) }}</span>
            </div>
            <div class="info-item">
              <span class="label">当前费用-秦董：</span>
              <span class="value">{{ formatMoney(detailData.CurrentPeriodExpenseQin) }}</span>
            </div>
            <div class="info-item">
              <span class="label">财务费用：</span>
              <span class="value">{{ formatMoney(detailData.FinancialFee) }}</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">{{ formatMoney(detailData.RewardMedicalBeauty) }}</span>
            </div>
            <div class="info-item">
              <span class="label">奖励-其他：</span>
              <span class="value">{{ formatMoney(detailData.RewardOther) }}</span>
            </div>
            <div class="info-item">
              <span class="label">奖励-大单奖：</span>
              <span class="value">{{ formatMoney(detailData.RewardLargeOrder) }}</span>
            </div>
            <div class="info-item">
              <span class="label">奖励-首单奖：</span>
              <span class="value">{{ formatMoney(detailData.RewardFirstOrder) }}</span>
            </div>
            <div class="info-item">
              <span class="label">奖励：</span>
              <span class="value">{{ formatMoney(detailData.RewardGeneral) }}</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">其他1：</span>
              <span class="value">{{ formatMoney(detailData.Other1) }}</span>
            </div>
            <div class="info-item">
              <span class="label">其他2：</span>
              <span class="value">{{ formatMoney(detailData.Other2) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 利润结果 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-data-line"></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.Profit) }}</span>
            </div>
            <div class="info-item">
              <span class="label">财务利润：</span>
              <span class="value highlight large">{{ formatMoney(detailData.FinancialProfit) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ShopStockDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: null
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    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}`
    },
    formatDateTime(value) {
      if (!value) return '无'
      const date = new Date(value)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-dialog {
  .detail-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
  }

  .detail-section {
    margin-bottom: 24px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 16px;

    &:last-child {
      margin-bottom: 0;
    }

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

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

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

        .info-item {
          flex: 0 0 calc(25% - 15px);
          min-width: 200px;
          display: flex;
          align-items: center;
          padding: 8px 12px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

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

          .value {
            color: #303133;
            flex: 1;
            text-align: right;

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

            &.large {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  .dialog-footer {
    text-align: right;
    padding: 20px;
    border-top: 1px solid #e4e7ed;
  }
}

// 滚动条样式
.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>

