<script setup lang="ts">
import type { ContestItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getContestantList } from '../api'
import { useMapStore } from '@/stores/map'

const detail = $ref(inject<ContestItem>('detail'))

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 性别
const genderList = useMapStore().getMapValuesByKey('system_gender')

const listOptions = {
  remote: {
    httpRequest: getContestantList,
    params: { competition_id: detail?.id, student_name: '' }
  },
  filters: [{ type: 'input', prop: 'student_name', label: '选手姓名', placeholder: '请输入选手姓名' }],
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '选手姓名', prop: 'student.name' },
    { label: '参赛ID', prop: 'login_id' },
    { label: '电话', prop: 'mobile' },
    {
      label: '性别',
      prop: 'student.gender',
      computed({ row }: { row: any }) {
        const found = genderList.find(item => item.value === row.student.gender)
        return found?.label || row.student.gender
      }
    },
    { label: '学校', prop: 'student.org.department_name' },
    { label: '所在专业', prop: 'student.specialty.name' },
    { label: '所在年级', prop: 'grade' },
    { label: '所在班级', prop: 'student.class.name' },
    { label: '训练次数', prop: 'train_count' },
    { label: '更新时间', prop: 'updated_time' }
  ]
}

const exportUrl = $computed(() => {
  return `/api/resource/v1/backend/competition-competitor/export?competition_id=${detail?.id}`
})
</script>

<template>
  <el-dialog title="参赛选手列表">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <a :href="exportUrl" target="_blank" v-permission="'competition-competitor-export'">
          <el-button type="primary">导出</el-button>
        </a>
      </template>
    </AppList>
    <el-row justify="center">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>
