<template>
  <el-dialog
    title="总部股份详情"
    :visible="visible"
    width="1000px"
    :close-on-click-modal="false"
    @close="handleClose"
    class="detail-dialog"
    :modal="true"
    :modal-append-to-body="true"
  >
    <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">{{ 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.IncomeGeneral) }}</span>
            </div>
            <div class="info-item">
              <span class="label">收入-科技部：</span>
              <span class="value highlight large">{{ formatMoney(detailData.IncomeTechDept) }}</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.CostLabor) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-教育部房租：</span>
              <span class="value">{{ formatMoney(detailData.CostEducationRent) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-仓库房租：</span>
              <span class="value">{{ formatMoney(detailData.CostWarehouseRent) }}</span>
            </div>
            <div class="info-item">
              <span class="label">成本-总部房租：</span>
              <span class="value">{{ formatMoney(detailData.CostHQRent) }}</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 profit">{{ formatMoney(detailData.OperationalProfit) }}</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: 'HeadquartersStockDetailDialog',
  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 {
  ::v-deep .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
  }

  ::v-deep .el-dialog__header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .el-dialog__title {
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(135deg, #303133 0%, #606266 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .el-dialog__close {
      color: #606266;
      font-size: 20px;
      transition: all 0.3s ease;

      &:hover {
        color: #3b82f6;
        transform: rotate(90deg);
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
  }

  .detail-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(144, 147, 153, 0.1);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.3);
      border-radius: 4px;
      transition: background 0.3s ease;

      &:hover {
        background: rgba(144, 147, 153, 0.5);
      }
    }
  }

  .detail-section {
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(144, 147, 153, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #3b82f6 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);

      &::before {
        opacity: 1;
      }
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid rgba(59, 130, 246, 0.2);
      font-size: 18px;
      font-weight: 700;
      background: linear-gradient(135deg, #303133 0%, #606266 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;

      i {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          transition: left 0.5s ease;
        }

        &.el-icon-user,
        &.el-icon-user-solid {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
          color: #3b82f6;
        }

        &.el-icon-trophy {
          background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
          color: #f59e0b;
        }

        &.el-icon-money,
        &.el-icon-coin {
          background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
          color: #22c55e;
        }

        &.el-icon-medal {
          background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%);
          color: #a855f7;
        }

        &.el-icon-wallet {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
          color: #3b82f6;
        }

        &.el-icon-circle-minus {
          background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
          color: #ef4444;
        }

        &.el-icon-circle-plus {
          background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
          color: #22c55e;
        }

        &.el-icon-document,
        &.el-icon-document-copy {
          background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.15) 100%);
          color: #6b7280;
        }

        &.el-icon-credit-card {
          background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.15) 100%);
          color: #ec4899;
        }

        &.el-icon-date,
        &.el-icon-calendar {
          background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.15) 100%);
          color: #6b7280;
        }

        &.el-icon-data-line,
        &.el-icon-s-data {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
          color: #3b82f6;
        }

        &.el-icon-goods,
        &.el-icon-shopping-bag-1 {
          background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.15) 100%);
          color: #ec4899;
        }

        &:not([class*="el-icon-"]) {
          background: linear-gradient(135deg, rgba(96, 98, 102, 0.1) 0%, rgba(144, 147, 153, 0.1) 100%);
          color: #606266;
        }

        &:hover {
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

          &::before {
            left: 100%;
          }

          &.el-icon-user,
          &.el-icon-user-solid {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
          }

          &.el-icon-trophy {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #fff;
          }

          &.el-icon-money,
          &.el-icon-coin {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
          }

          &.el-icon-medal {
            background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
            color: #fff;
          }

          &.el-icon-wallet {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
          }

          &.el-icon-circle-minus {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: #fff;
          }

          &.el-icon-circle-plus {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
          }

          &.el-icon-document,
          &.el-icon-document-copy {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            color: #fff;
          }

          &.el-icon-credit-card {
            background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
            color: #fff;
          }

          &.el-icon-date,
          &.el-icon-calendar {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            color: #fff;
          }

          &.el-icon-data-line,
          &.el-icon-s-data {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
          }

          &.el-icon-goods,
          &.el-icon-shopping-bag-1 {
            background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
            color: #fff;
          }

          &:not([class*="el-icon-"]) {
            background: linear-gradient(135deg, #606266 0%, #909399 100%);
            color: #fff;
          }
        }
      }
    }

    .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);
          padding: 12px 16px;
          background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(240, 242, 245, 0.8) 100%);
          border-radius: 8px;
          border: 1px solid rgba(144, 147, 153, 0.1);
          transition: all 0.3s ease;
          cursor: default;

          &:hover {
            background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.9) 100%);
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
          }

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

          .value {
            color: #303133;
            font-size: 14px;
            font-weight: 500;
            flex: 1;
            text-align: right;

            &.highlight {
              color: #3b82f6;
              font-weight: 700;
              font-size: 16px;
            }

            &.large {
              font-size: 24px;
              font-weight: 700;
              background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }

            &.profit {
              color: #22c55e;
              font-weight: 600;
            }
          }
        }
      }
    }
  }

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

    i {
      font-size: 64px;
      margin-bottom: 20px;
      color: #cbd5e1;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }

    span {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .dialog-footer {
    text-align: right;
    padding: 20px;
    border-top: 1px solid rgba(228, 231, 237, 0.5);
  }
}
</style>

