<template>
  <el-dialog :title="`${projectName} - 裁判组成员`" v-model="dialog.visible" width="600px" append-to-body>
    <div v-if="loading" class="text-center">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>加载中...</span>
    </div>
    
    <div v-else>
      <el-table :data="refereeList" border style="width: 100%">
        <el-table-column label="裁判ID" align="center" prop="refereeId" width="80" />
        <el-table-column label="裁判姓名" align="center" prop="name" />
        <el-table-column label="账号" align="center" prop="account" />
        <!-- <el-table-column label="负责项目" align="center" prop="projectNameList" /> -->
      </el-table>
      
      <div v-if="refereeList.length === 0" class="text-center" style="padding: 20px; color: #999;">
        暂无裁判组成员
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog.visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="RefereeGroupDialog" lang="ts">
import { reactive, ref } from 'vue';
import { getGameReferee } from '@/api/system/gameReferee';
import { GameRefereeVO } from '@/api/system/gameReferee/types';

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

const loading = ref(false);
const projectName = ref('');
const refereeList = ref<GameRefereeVO[]>([]);

// 扩展GameRefereeVO类型，添加用于展示的projectNameList属性
interface GameRefereeVOExt extends GameRefereeVO {
  projectNameList?: string;
}

const openDialog = async (refereeGroups: number[], projectNameParam: string) => {
  projectName.value = projectNameParam;
  dialog.visible = true;
  loading.value = true;
  
  try {
    if (refereeGroups) {
      // 解析裁判组ID列表
      const refereeIds = refereeGroups.filter(id => id);
      
      if (refereeIds.length > 0) {
        // 获取裁判详细信息
        const refereePromises = refereeIds.map(id => getGameReferee(id));
        const refereeResults = await Promise.all(refereePromises);
        
        // 合并所有裁判信息
        const allReferees: GameRefereeVOExt[] = [];
        refereeResults.forEach(result => {
          if (result.data) {
            const referee = result.data as GameRefereeVOExt;
            
            // 处理项目名称列表显示
            if (referee.projectList) {
              // 这里可以根据需要格式化项目名称显示
              referee.projectNameList = referee.projectList;
            }
            
            allReferees.push(referee);
          }
        });
        
        refereeList.value = allReferees;
      } else {
        refereeList.value = [];
      }
    } else {
      refereeList.value = [];
    }
  } catch (error) {
    console.error('获取裁判组信息失败:', error);
    refereeList.value = [];
  } finally {
    loading.value = false;
  }
};

defineExpose({ openDialog });
</script>

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