<template>
  <div class="martial-registration-detail">
    <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">赛事名称</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">
          <div class="tab-hint">
            在营业分组: 本操作， 提现栏标签， 提名栏标签， 比赛栏标签
          </div>
          <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">
          <div class="tab-hint">
            项目时间统计
          </div>
          <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>
export default {
  name: 'MartialRegistrationDetail',
  data() {
    return {
      orderId: null,
      activeTab: 'participants',
      competitionInfo: {
        id: '123456889900',
        organizer: '第三十届武术大赛主办单位',
        location: '四川省 成都市',
        venue: '武侯区人民医院',
        registrationTime: '2025-11-10 16:00:00 - 2025-11-28 16:00:00',
        competitionTime: '2025-11-10 16:00:00 - 2025-11-28 16:00:00',
        totalParticipants: 99999,
        totalAmount: 12345,
        status: '进赛中'
      },
      participantsData: [
        {
          schoolUnit: '清河小学',
          category: '集体',
          individual: 1,
          dual: 1,
          team1101: 1,
          workers: 4,
          female: 5,
          total: 12
        },
        {
          schoolUnit: '方山镇小学校',
          category: '',
          individual: 0,
          dual: 0,
          team1101: 0,
          workers: 0,
          female: 0,
          total: 0
        },
        {
          schoolUnit: '少林寺武术学校',
          category: '单人',
          individual: 3,
          dual: 2,
          team1101: 2,
          workers: 6,
          female: 8,
          total: 21
        },
        {
          schoolUnit: '访河社区',
          category: '集体',
          individual: 2,
          dual: 1,
          team1101: 1,
          workers: 3,
          female: 4,
          total: 11
        }
      ],
      projectTimeData: [
        {
          projectName: '小学组小组赛男女类',
          hint: '剩余功能在位置提现上，显示出运动类别名称的位置',
          participantCategory: '集体',
          teamCount: 1,
          singleTeamPeople: 10,
          estimatedDuration: 4
        },
        {
          projectName: '中学组个人赛',
          participantCategory: '单人',
          teamCount: 3,
          singleTeamPeople: 1,
          estimatedDuration: 2
        },
        {
          projectName: '少年组对抗赛',
          participantCategory: '双人',
          teamCount: 2,
          singleTeamPeople: 2,
          estimatedDuration: 3
        }
      ],
      amountStatsData: [
        {
          schoolUnit: '清河小学',
          projectCount: 5,
          totalAmount: 9300
        },
        {
          schoolUnit: '方山镇小学校',
          projectCount: 0,
          totalAmount: 0
        },
        {
          schoolUnit: '少林寺武术学校',
          projectCount: 8,
          totalAmount: 15600
        },
        {
          schoolUnit: '访河社区',
          projectCount: 4,
          totalAmount: 7200
        }
      ]
    }
  },
  mounted() {
    this.orderId = this.$route.query.orderId
    // 使用静态数据，不调用API
  },
  methods: {
    goBack() {
      this.$router.push('/martial/order/list')
    },
    handleExport() {
      this.$message.success('导出功能开发中')
    }
  }
}
</script>

<style lang="scss" scoped>
.martial-registration-detail {
  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>
