<script setup lang="ts">
import type { Contestant } from '../types'
import { Upload } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import { getContestantList } from '../api'
import { useMapStore } from '@/stores/map'
import { useGetContestList } from '@/composables/useGetContestList'

const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
const ViewDialog = defineAsyncComponent(() => import('../components/ViewDialog.vue'))
const ImportDialog = defineAsyncComponent(() => import('../components/ImportDialog.vue'))

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 性别
const genderList = useMapStore().getMapValuesByKey('system_gender')
const { contests } = useGetContestList()
// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getContestantList,
      params: { competition_id: '', student_name: '' }
    },
    filters: [
      {
        type: 'select',
        prop: 'competition_id',
        label: '赛项',
        placeholder: '请选择赛项',
        options: contests.value,
        valueKey: 'id',
        labelKey: 'name'
      },
      { type: 'input', prop: 'student_name', label: '选手姓名', placeholder: '请输入选手姓名' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '赛项名称', prop: 'competition.name' },
      { label: '选手姓名', prop: 'student.name' },
      { label: '参赛ID', prop: 'login_id' },
      {
        label: '性别',
        prop: 'student.gender',
        computed({ row }: { row: Contestant }) {
          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' },
      { label: '操作', slots: 'table-x', width: 200 }
    ]
  }
})

const importVisible = $ref(false)
let dialogVisible = $ref(false)
const rowData = ref<Contestant | undefined | null>(null)

// 查看
let viewVisible = $ref(false)
function handleView(row: Contestant) {
  rowData.value = row
  viewVisible = true
}

// 新增
// function handleAdd() {
//   rowData.value = null
//   dialogVisible = true
// }

// 编辑
function handleUpdate(row: Contestant) {
  rowData.value = row
  dialogVisible = true
}

function onUpdateSuccess() {
  appList?.refetch()
}
</script>

<template>
  <AppCard title="参赛选手管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <!-- <el-button type="primary" round :icon="CirclePlus" @click="handleAdd">新增参赛选手</el-button> -->
        <el-button
          type="primary"
          round
          :icon="Upload"
          @click="importVisible = true"
          v-permission="'competition-competitor-import'"
          >批量导入</el-button
        >
      </template>

      <template #table-x="{ row }: { row: Contestant }">
        <el-button type="primary" round @click="handleView(row)" v-permission="'competition-competitor-detail'"
          >查看</el-button
        >
        <el-button type="primary" round @click="handleUpdate(row)" v-permission="'competition-competitor-update'"
          >编辑</el-button
        >
      </template>
    </AppList>
  </AppCard>
  <!-- 编辑 -->
  <FormDialog
    v-model="dialogVisible"
    :data="rowData"
    @update="onUpdateSuccess"
    v-if="dialogVisible && rowData"></FormDialog>
  <!-- 查看 -->
  <ViewDialog
    v-model="viewVisible"
    :data="rowData"
    @update="onUpdateSuccess"
    v-if="viewVisible && rowData"></ViewDialog>
  <!-- 批量导入 -->
  <ImportDialog v-model="importVisible" @update="onUpdateSuccess" v-if="importVisible"></ImportDialog>
</template>
