<template>
  <el-dialog :title="`${projectName} - ${dialogTitle}`" v-model="dialog.visible" width="900px" append-to-body>
    <div v-loading="loading">
      <el-table :data="list" border style="width: 100%" height="450px">
        <el-table-column label="序号" align="center" type="index" />
        <!-- 运动员列 -->
        <template v-if="type === 'athlete'">
          <el-table-column label="运动员编号" align="center" prop="athleteCode" />
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="性别" align="center" prop="gender">
            <template #default="scope">
              <dict-tag :options="sys_user_sex" :value="scope.row.gender" />
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center" prop="phone" />
        </template>

        <!-- 代表队列 -->
        <template v-if="type === 'team'">
          <el-table-column label="队伍编号" align="center" prop="teamCode" />
          <el-table-column label="队伍名称" align="center" prop="teamName" />
          <el-table-column label="人数" align="center" prop="athleteNum" />
          <el-table-column label="备注" align="center" prop="teamDescribe" />
        </template>

        <!-- 分组列 -->
        <template v-if="type === 'group'">
          <el-table-column label="分组名称" align="center" prop="groupName" />
          <el-table-column label="性别" align="center" prop="memberGender" >
            <template #default="scope">
              <dict-tag :options="sys_group_sex" :value="scope.row.memberGender" />
            </template>
          </el-table-column>
          <el-table-column label="符合条件人数" align="center" prop="eligibleAthleteCount" />
          <el-table-column label="比赛时间" align="center" prop="beginTime" width="160" />
        </template>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <div v-if="list.length === 0 && !loading" class="text-center" style="padding: 20px; color: #999;">
        暂无相关数据
      </div>
    </div>

  </el-dialog>
</template>

<script setup name="StatsDetailDialog" lang="ts">
import { reactive, ref, toRefs, getCurrentInstance } from 'vue';
import { listGameAthlete, listTeamByProject } from '@/api/system/gameAthlete';
import { listGameEventGroup } from '@/api/system/gameEventGroup';

const { proxy } = getCurrentInstance() as any;
const { sys_user_sex, sys_group_sex } = toRefs<any>(proxy?.useDict('sys_user_sex', 'sys_group_sex'));

const dialog = reactive({
  visible: false
});

const loading = ref(false);
const projectName = ref('');
const dialogTitle = ref('');
const type = ref<'athlete' | 'team' | 'group'>('athlete');
const list = ref<any[]>([]);
const total = ref(0);
const currentProjectId = ref<string | number>('');

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  projectId: undefined as string | number | undefined
});

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    let res: any;
    const query = { 
      ...queryParams, 
      projectId: currentProjectId.value,
      orderByColumn: 'createTime', 
      isAsc: 'desc' 
    };

    if (type.value === 'athlete') {
      res = await listGameAthlete(query);
    } else if (type.value === 'team') {
      // 使用专门的新接口查询参与该项目的队伍
      res = await listTeamByProject(currentProjectId.value, query);
    } else if (type.value === 'group') {
      res = await listGameEventGroup(query);
    }

    if (res && res.rows) {
      list.value = res.rows;
      total.value = res.total || res.rows.length;
    } else if (res && res.data) {
      // 兼容某些接口返回结构
      if (Array.isArray(res.data)) {
        list.value = res.data;
        total.value = res.data.length;
      } else {
        list.value = res.data.rows || [];
        total.value = res.data.total || list.value.length;
      }
    } else {
      list.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取详情失败:', error);
    list.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

/** 打开弹窗 */
const openDialog = (projectId: string | number, name: string, detailType: 'athlete' | 'team' | 'group') => {
  projectName.value = name;
  type.value = detailType;
  currentProjectId.value = projectId;
  
  // 重置分页参数
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  
  dialog.visible = true;

  switch (detailType) {
    case 'athlete':
      dialogTitle.value = '参赛人员列表';
      break;
    case 'team':
      dialogTitle.value = '参赛代表队列表';
      break;
    case 'group':
      dialogTitle.value = '分组信息列表';
      break;
  }

  getList();
};

defineExpose({ openDialog });
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 10px;
}
</style>
