<template>
  <el-dialog
    title="科技部股份详情"
    :visible="visible"
    width="1200px"
    :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.DepartmentName || '无' }}</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 large">{{ formatMoney(detailData.Income) }}</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.CostReimbursement) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-老师底薪：</span>
              <span class="value">{{ formatMoney(detailData.CostTeacherBase) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-手工费：</span>
              <span class="value">{{ formatMoney(detailData.CostTeacherManual) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-开单提成：</span>
              <span class="value">{{ formatMoney(detailData.CostTeacherBillingComm) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-消耗提成：</span>
              <span class="value">{{ formatMoney(detailData.CostTeacherConsumeComm) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-专家提成：</span>
              <span class="value">{{ formatMoney(detailData.CostTeacherExpertComm) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-加班：</span>
              <span class="value">{{ formatMoney(detailData.CostTeacherOvertime) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-总经理底薪：</span>
              <span class="value">{{ formatMoney(detailData.CostGMBase) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-人工-总经理提成：</span>
              <span class="value">{{ formatMoney(detailData.CostGMComm) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-其他1：</span>
              <span class="value">{{ formatMoney(detailData.CostOther1) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-其他2：</span>
              <span class="value">{{ formatMoney(detailData.CostOther2) }}</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.RewardTechDept) }}</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>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'TechStockDetailDialog',
  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(33.333% - 14px);
          min-width: 250px;
          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>

