<script setup lang="ts">
import type { ContestantScoreItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getContestantsList } from '../api'

const ScoreViewDialog = defineAsyncComponent(() => import('../components/ScoreViewDialog.vue'))

interface Props {
  id: string
}
const props = defineProps<Props>()

const appList = $ref<InstanceType<typeof AppList> | null>(null)

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getContestantsList,
      params: { competition_id: props.id }
    },
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '选手姓名', prop: 'student_name' },
      { label: '参赛ID', prop: 'login_id' },
      { label: '性别', prop: 'gender' },
      { label: '所在学校', prop: 'organ_id_name' },
      { label: '所在专业', prop: 'specialty_id_name' },
      { label: '所在年级', prop: 'grade' },
      { label: '训练次数', prop: 'train_count' },
      { label: '评分规则', prop: 'competition_is_more_status' },
      { label: '已评分人数', prop: 'checked_count', slots: 'table-count' },
      { label: '得分', prop: 'score_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 140 }
    ]
  }
})

let dialogVisible = $ref(false)
const rowData = ref<ContestantScoreItem>()
// 查看评分详情
function handleView(row: ContestantScoreItem) {
  rowData.value = row
  dialogVisible = true
}
function onUpdateSuccess() {
  appList?.refetch()
}
</script>

<template>
  <AppCard title="发布成绩">
    <el-descriptions>
      <el-descriptions-item label="赛项名称：">{{ $route.query.name }}</el-descriptions-item>
    </el-descriptions>
    <AppList v-bind="listOptions" ref="appList">
      <template #table-count="{ row }"> {{ row.checked_count }}/{{ row.need_check_count }} </template>
      <template #table-x="{ row }">
        <el-button text type="primary" @click="handleView(row)" v-permission="'v1-teacher-record-check'">
          查看评分详情
        </el-button>
      </template>
    </AppList>
  </AppCard>
  <ScoreViewDialog
    :data="rowData"
    v-model="dialogVisible"
    @update="onUpdateSuccess"
    v-if="dialogVisible && rowData"></ScoreViewDialog>
</template>
