<template>
  <el-dialog title="参赛运动员列表" :model-value="visible" @update:model-value="updateVisible" width="800px" append-to-body>
    <el-table v-loading="loading" :data="athleteList" border>
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="运动员编号" align="center" prop="athleteCode" />
      <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="unit" />
      <!-- <el-table-column label="所属单位" align="center" prop="unit" /> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateVisible(false)">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="AthleteListDialog" lang="ts">
import { ref, reactive, watch, getCurrentInstance } from 'vue';
import { listGameAthlete } from '@/api/system/gameAthlete';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  projectId: {
    type: [String, Number],
    default: ''
  },
  eventId: {
    type: [String, Number],
    default: ''
  }
});

const emit = defineEmits(['update:visible']);

const { proxy } = getCurrentInstance();
const { sys_user_sex } = toRefs(proxy.useDict('sys_user_sex'));

const loading = ref(false);
const athleteList = ref([]);
const total = ref(0);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  projectId: undefined,
  eventId: undefined
});

/** 更新显示状态 */
const updateVisible = (val) => {
  emit('update:visible', val);
};

/** 查询运动员列表 */
const getList = async () => {
  if (!props.projectId) return;
  loading.value = true;
  try {
    queryParams.projectId = props.projectId;
    queryParams.eventId = props.eventId;
    const res = await listGameAthlete(queryParams as any);
    athleteList.value = res.rows;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
};

// 监听 projectId 变化
watch(() => props.projectId, () => {
  if (props.visible) {
    queryParams.pageNum = 1;
    getList();
  }
});

// 监听 visible 变化
watch(() => props.visible, (val) => {
  if (val && props.projectId) {
    queryParams.pageNum = 1;
    getList();
  }
});
</script>
