<template>
  <div class="martial-registration-container" v-loading="loading">
    <div class="page-header">
      <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
      <h2 class="page-title">报名详情</h2>
    </div>

    <div class="competition-info">
        <h3 class="section-title">{{ competitionInfo.competitionName || '赛事信息' }}</h3>
        <p class="detail-id">ID: {{ competitionInfo.id }}</p>

        <el-row :gutter="15" class="info-row">
          <el-col :span="6">
            <div class="info-item">
              <label>主办单位</label>
              <div class="info-value">{{ competitionInfo.organizer }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <label>地区</label>
              <div class="info-value">{{ competitionInfo.location }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <label>详细地点</label>
              <div class="info-value">{{ competitionInfo.venue }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <label>报名时间</label>
              <div class="info-value">{{ competitionInfo.registrationTime }}</div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="15" class="info-row">
          <el-col :span="6">
            <div class="info-item">
              <label>比赛时间</label>
              <div class="info-value">{{ competitionInfo.competitionTime }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <label>报名人数</label>
              <div class="info-value">{{ competitionInfo.totalParticipants }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <label>总金额</label>
              <div class="info-value amount">¥{{ competitionInfo.totalAmount }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <label>状态</label>
              <div class="info-value">
                <el-tag type="success" size="small">{{ competitionInfo.status }}</el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="tabs-section">
        <div class="tab-buttons">
          <el-button
            size="small"
            :type="activeTab === 'participants' ? 'primary' : ''"
            @click="activeTab = 'participants'"
          >
            参赛人数统计
          </el-button>
          <el-button
            size="small"
            :type="activeTab === 'projectTime' ? 'primary' : ''"
            @click="activeTab = 'projectTime'"
          >
            项目时间统计
          </el-button>
          <el-button
            size="small"
            :type="activeTab === 'amountStats' ? 'primary' : ''"
            @click="activeTab = 'amountStats'"
          >
            全额统计
          </el-button>
        </div>

        <!-- 参赛人数统计Tab -->
        <div v-show="activeTab === 'participants'" class="tab-content">
          <el-table :data="participantsData" border stripe size="small">
            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
            <el-table-column prop="schoolUnit" label="单位" min-width="180">
              <template #default="scope">
                <span>{{ scope.row.schoolUnit }}</span>
                <div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="类别" width="80"></el-table-column>
            <el-table-column prop="individual" label="2队" width="60" align="center"></el-table-column>
            <el-table-column prop="dual" label="2组" width="60" align="center"></el-table-column>
            <el-table-column prop="team1101" label="1101" width="60" align="center"></el-table-column>
            <el-table-column prop="workers" label="工作人员" width="90" align="center"></el-table-column>
            <el-table-column prop="female" label="女性组别" width="90" align="center"></el-table-column>
            <el-table-column prop="total" label="合计" width="60" align="center">
              <template #default="scope">
                <span class="total-num">+{{ scope.row.total }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 项目时间统计Tab -->
        <div v-show="activeTab === 'projectTime'" class="tab-content">
          <el-table :data="projectTimeData" border stripe size="small">
            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目" min-width="150">
              <template #default="scope">
                <span>{{ scope.row.projectName }}</span>
                <div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="participantCategory" label="参人/单位" width="100"></el-table-column>
            <el-table-column prop="teamCount" label="队伍" width="80" align="center"></el-table-column>
            <el-table-column prop="singleTeamPeople" label="单位型号人数" width="120" align="center"></el-table-column>
            <el-table-column prop="estimatedDuration" label="剩下显时(公共)" width="150" align="center"></el-table-column>
          </el-table>
        </div>

        <!-- 全额统计Tab -->
        <div v-show="activeTab === 'amountStats'" class="tab-content">
          <el-table :data="amountStatsData" border stripe size="small">
            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
            <el-table-column prop="schoolUnit" label="学校/单位" min-width="200"></el-table-column>
            <el-table-column prop="projectCount" label="项目" width="120" align="center"></el-table-column>
            <el-table-column prop="totalAmount" label="全额" width="150" align="center">
              <template #default="scope">
                <span class="amount">¥{{ scope.row.totalAmount }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="footer-actions">
        <el-button size="small" @click="handleExport">导出</el-button>
      </div>
  </div>
</template>

<script>
import {
  getOrderDetail,
  getOrderRegistrationDetail,
  getOrderProjectStats,
  getOrderAmountStats
} from '@/api/martial/order'
import { getCompetitionDetail } from '@/api/martial/competition'
import { getProjectDetail } from '@/api/martial/project'
import { getParticipantList } from '@/api/martial/participant'

export default {
  name: 'MartialRegistrationDetail',
  data() {
    return {
      competitionId: null,  // 改为赛事ID
      loading: false,
      activeTab: 'participants',
      competitionInfo: {
        id: '',
        competitionName: '',  // 添加赛事名称
        organizer: '',
        location: '',
        venue: '',
        registrationTime: '',
        competitionTime: '',
        totalParticipants: 0,
        totalAmount: 0,
        status: ''
      },
      participantsData: [],
      projectTimeData: [],
      amountStatsData: [],
      projectCache: new Map(),  // 添加项目信息缓存，避免重复API调用
      participantsCache: null  // 缓存参赛者列表，避免重复查询
    }
  },
  mounted() {
    this.competitionId = this.$route.query.competitionId  // 改为获取赛事ID
    if (this.competitionId) {
      this.loadCompetitionInfo(this.competitionId)
      this.loadRegistrationStats()
      this.loadParticipantsStats()
      this.loadProjectTimeStats()
      this.loadAmountStats()
    } else {
      this.$message.warning('未获取到赛事ID')
    }
  },
  methods: {
    // 统一获取参赛者列表（带缓存）
    async getParticipants() {
      if (this.participantsCache !== null) {
        return this.participantsCache
      }

      try {
        const res = await getParticipantList(this.competitionId, 1, 10000)
        const participants = res.data?.data?.records || res.data?.data || []
        this.participantsCache = participants
        return participants
      } catch (err) {
        console.error('查询参赛者列表失败:', err)
        return []
      }
    },

    // 统一的项目信息获取方法（带缓存）
    async getProjectInfo(projectId) {
      if (!projectId) return null

      // 先从缓存中查找
      if (this.projectCache.has(projectId)) {
        return this.projectCache.get(projectId)
      }

      // 缓存中没有，则调用API
      try {
        const projectRes = await getProjectDetail(projectId)
        const projectInfo = projectRes.data?.data
        if (projectInfo) {
          // 存入缓存
          this.projectCache.set(projectId, projectInfo)
          return projectInfo
        }
      } catch (err) {
        console.error(`查询项目${projectId}详情失败:`, err)
      }
      return null
    },

    // 批量预加载项目信息（一次性加载所有需要的项目）
    async preloadProjectInfo(participants) {
      const projectIds = new Set()
      participants.forEach(p => {
        const projectId = p.projectId || p.project_id
        if (projectId && !this.projectCache.has(projectId)) {
          projectIds.add(projectId)
        }
      })

      // 并行加载所有项目信息
      if (projectIds.size > 0) {
        const promises = Array.from(projectIds).map(id => this.getProjectInfo(id))
        await Promise.all(promises)
      }
    },

    // 加载赛事信息
    async loadCompetitionInfo(competitionId) {
      try {
        const res = await getCompetitionDetail(competitionId)
        console.log('赛事详情返回:', res)
        const compData = res.data?.data
        if (compData) {
          this.competitionInfo.id = compData.id
          this.competitionInfo.competitionName = compData.competitionName || compData.competition_name || ''
          this.competitionInfo.organizer = compData.organizer || ''
          this.competitionInfo.location = compData.location || ''
          this.competitionInfo.venue = compData.venue || ''

          // 格式化时间范围（兼容驼峰和下划线命名）
          const regStartTime = compData.registrationStartTime || compData.registration_start_time
          const regEndTime = compData.registrationEndTime || compData.registration_end_time
          const compStartTime = compData.competitionStartTime || compData.competition_start_time
          const compEndTime = compData.competitionEndTime || compData.competition_end_time

          if (regStartTime && regEndTime) {
            this.competitionInfo.registrationTime = `${regStartTime} - ${regEndTime}`
          }
          if (compStartTime && compEndTime) {
            this.competitionInfo.competitionTime = `${compStartTime} - ${compEndTime}`
          }

          // 设置赛事状态
          this.competitionInfo.status = this.getCompetitionStatus(compData.status)
        }
      } catch (err) {
        console.error('加载赛事信息失败', err)
        this.$message.error('加载赛事信息失败')
      }
    },

    // 加载报名统计信息（统计该赛事下所有订单）
    async loadRegistrationStats() {
      try {
        // 使用缓存的参赛者列表
        const participants = await this.getParticipants()
        console.log('运动员列表返回:', participants)

        this.competitionInfo.totalParticipants = participants.length

        // 预加载所有项目信息（一次性并行加载）
        await this.preloadProjectInfo(participants)

        // 计算总金额（从缓存中获取）
        let totalAmount = 0

        for (const athlete of participants) {
          const projectId = athlete.projectId || athlete.project_id
          if (projectId) {
            const project = this.projectCache.get(projectId)
            if (project) {
              totalAmount += parseFloat(project.price || 0)
            }
          }
        }

        this.competitionInfo.totalAmount = totalAmount.toFixed(2)
      } catch (err) {
        console.error('加载报名统计失败', err)
        this.$message.warning('加载报名统计数据失败，请稍后重试')
      }
    },

    // 加载参赛人数统计（该赛事的所有运动员）
    async loadParticipantsStats() {
      try {
        // 使用缓存的参赛者列表
        const participants = await this.getParticipants()
        console.log('参赛人员列表返回:', participants)

        // 按单位分组统计
        const unitMap = new Map()
        participants.forEach(p => {
          // 兼容驼峰和下划线命名
          const unit = p.organization || p.teamName || p.team_name || '未知单位'
          if (!unitMap.has(unit)) {
            unitMap.set(unit, {
              schoolUnit: unit,
              category: '',
              individual: 0,
              dual: 0,
              team1101: 0,
              workers: 0,
              female: 0,
              total: 0
            })
          }
          const stat = unitMap.get(unit)
          stat.total++
          if (p.gender === 2) stat.female++
        })

        this.participantsData = Array.from(unitMap.values())
      } catch (err) {
        console.error('加载参赛人员统计失败', err)
        this.$message.warning('加载参赛人员统计失败')
        // 使用空数组作为默认值
        this.participantsData = []
      }
    },

    // 加载项目时间统计（该赛事的所有项目及参赛人数）
    async loadProjectTimeStats() {
      try {
        // 使用缓存的参赛者列表
        const participants = await this.getParticipants()

        // 2. 按项目ID分组
        const projectMap = new Map()
        participants.forEach(athlete => {
          // 兼容驼峰和下划线命名
          const projectId = athlete.projectId || athlete.project_id
          if (projectId) {
            if (!projectMap.has(projectId)) {
              projectMap.set(projectId, [])
            }
            projectMap.get(projectId).push(athlete)
          }
        })

        // 3. 从缓存中获取项目信息并统计（项目信息已经在 loadRegistrationStats 中预加载）
        const projectStats = []
        for (const [projectId, athleteList] of projectMap) {
          const project = this.projectCache.get(projectId)
          if (project) {
            projectStats.push({
              projectName: project.projectName || project.project_name || '未知项目',
              participantCategory: project.category || '',
              teamCount: 1, // 简化处理，设为1
              singleTeamPeople: athleteList.length,
              estimatedDuration: project.estimatedDuration || project.estimated_duration || 0
            })
          } else {
            // 如果缓存中没有（理论上���应该发生），添加基本信息
            projectStats.push({
              projectName: `项目ID:${projectId}`,
              participantCategory: '',
              teamCount: 1,
              singleTeamPeople: athleteList.length,
              estimatedDuration: 0
            })
          }
        }

        this.projectTimeData = projectStats
      } catch (err) {
        console.error('加载项目统计失败', err)
        this.$message.warning('加载项目统计失败')
        this.projectTimeData = []
      }
    },

    // 加载金额统计（该赛事所有单位的报名金额）
    async loadAmountStats() {
      try {
        // 使用缓存的参赛者列表
        const participants = await this.getParticipants()

        // 2. 按单位分组并统计
        const unitMap = new Map()

        for (const athlete of participants) {
          // 兼容驼峰和下划线命名
          const unit = athlete.organization || '未知单位'
          const projectId = athlete.projectId || athlete.project_id

          if (!unitMap.has(unit)) {
            unitMap.set(unit, {
              projectIds: new Set(),
              totalAmount: 0
            })
          }

          const stat = unitMap.get(unit)

          // 添加项目ID（Set自动去重，用于统计项目数量）
          if (projectId) {
            stat.projectIds.add(projectId)

            // 从缓存中获取价格并累加到总金额
            const project = this.projectCache.get(projectId)
            const price = project ? (project.price || 0) : 0
            stat.totalAmount += parseFloat(price)
          }
        }

        // 3. 计算每个单位的总金额
        const amountStats = []
        for (const [unit, stat] of unitMap) {
          amountStats.push({
            schoolUnit: unit,
            projectCount: stat.projectIds.size,
            totalAmount: stat.totalAmount.toFixed(2)
          })
        }

        this.amountStatsData = amountStats
      } catch (err) {
        console.error('加载金额统计失败', err)
        this.$message.warning('加载金额统计失败')
        this.amountStatsData = []
      }
    },

    getCompetitionStatus(status) {
      const statusMap = {
        1: '未开始',
        2: '报名中',
        3: '进行中',
        4: '已结束'
      }
      return statusMap[status] || '未知'
    },

    goBack() {
      this.$router.go(-1)
    },

    handleExport() {
      this.$message.success('导出功能开发中')
    }
  }
}
</script>

<style lang="scss" scoped>
.martial-registration-container {
  padding: 15px;
  background: #fff;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;

    .page-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .competition-info {
    margin-bottom: 15px;
    padding: 15px;
    background: #fff;
    border: 1px solid #dcdfe6;

    .section-title {
      margin-bottom: 8px;
      font-size: 15px;
      font-weight: 600;
      padding-left: 8px;
      border-left: 3px solid #409eff;
    }

    .detail-id {
      margin-bottom: 15px;
      padding-left: 8px;
      color: #909399;
      font-size: 11px;
    }

    .info-row {
      margin-bottom: 12px;
    }

    .info-item {
      padding: 8px;
      background: #f5f7fa;

      label {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        color: #909399;
      }

      .info-value {
        font-size: 12px;
        color: #606266;

        &.amount {
          color: #e6a23c;
          font-weight: 600;
        }
      }
    }
  }

  .tabs-section {
    margin-bottom: 15px;

    .tab-buttons {
      margin-bottom: 15px;
      padding: 12px;
      background: #fff;
      border: 1px solid #dcdfe6;
    }

    .tab-content {
      min-height: 300px;
      padding: 15px;
      background: #fff;
      border: 1px solid #dcdfe6;

      .tab-hint {
        padding: 8px 12px;
        margin-bottom: 12px;
        background: #fff3e0;
        border-left: 3px solid #ff9800;
        color: #e65100;
        font-size: 11px;
      }

      .row-hint {
        margin-top: 4px;
        padding: 2px 5px;
        color: #f50057;
        font-size: 11px;
        background: rgba(245, 0, 87, 0.05);
        display: inline-block;
      }
    }
  }

  .total-num,
  .amount {
    color: #e6a23c;
    font-weight: 600;
  }

  .footer-actions {
    text-align: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #dcdfe6;
  }
}
</style>
