<script setup lang="ts">
import { Refresh, Upload } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import { getCheckList } from '../api'
import { useFilterList } from '../composables/useFilterList'

const SyncExamDialog = defineAsyncComponent(() => import('../components/SyncExamDialog.vue'))
const ImportExamDialog = defineAsyncComponent(() => import('../components/ImportExamDialog.vue'))
const ImportScoreDialog = defineAsyncComponent(() => import('../components/ImportScoreDialog.vue'))

const route = useRoute()

const { competitions, schools, status } = useFilterList()

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

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getCheckList,
      params: {
        competition_id: route.query.competition_id || '',
        check_status: '',
        organ_id: '',
        login_id: '',
        student_name: ''
      }
    },
    filters: [
      {
        type: 'select',
        prop: 'competition_id',
        label: '赛项',
        placeholder: '请选择赛项',
        options: competitions.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'check_status',
        label: '状态',
        placeholder: '请选择是否评分',
        options: status.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'organ_id',
        label: '学校',
        placeholder: '请选择学校',
        options: schools.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      { type: 'input', prop: 'student_name', label: '考生姓名', placeholder: '请输入考生姓名' },
      { type: 'input', prop: 'login_id', label: '考生ID', placeholder: '请输入考生ID' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '赛项名称', prop: 'competition_id_name' },
      { label: '选手姓名', prop: 'student_name' },
      { label: '参赛ID', prop: 'login_id' },
      { label: '性别', prop: 'gender' },
      { label: '所在学校', prop: 'organ_id_name' },
      { label: '所在专业', prop: 'specialty_id_name' },
      { label: '所在班级', prop: 'class_id_name' },
      { label: '训练次数', prop: 'train_count' },
      { label: '评分规则', prop: 'competition_is_more_status' },
      { label: '已评分人数', prop: 'checked_count', slots: 'table-count' },
      { label: '已评分', prop: 'checked_flag_name' },
      { label: '得分', prop: 'score_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 100 }
    ]
  }
})

const syncDialogVisible = $ref(false)
const importExamVisible = $ref(false)
const importScoreVisible = $ref(false)

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

<template>
  <AppCard title="大赛评分">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button
          type="primary"
          round
          :icon="Refresh"
          @click="syncDialogVisible = true"
          v-permission="'v1-expert-check-sync-exam'"
          >系统同步考试成绩</el-button
        >
        <el-button
          type="primary"
          round
          :icon="Upload"
          @click="importExamVisible = true"
          v-permission="'v1-expert-check-import-exam'"
          >批量导入考试成绩</el-button
        >
        <el-button
          type="primary"
          round
          :icon="Upload"
          @click="importScoreVisible = true"
          v-permission="'v1-expert-check-import-score'"
          >批量导入完整评分</el-button
        >
      </template>
      <template #table-count="{ row }"> {{ row.checked_count }}/{{ row.need_check_count }} </template>
      <template #table-score="{ row }">
        <span :class="{ 'is-info': row.score !== '--' }">{{ row.score }}</span>
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" v-if="row.publish_status === '0'" v-permission="'v1-expert-check-set-score'">
          <router-link :to="`/admin/contest/check/${row.id}`" target="_blank">评分</router-link>
        </el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 系统同步考试成绩 -->
  <SyncExamDialog v-model="syncDialogVisible" @update="onUpdateSuccess" v-if="syncDialogVisible"></SyncExamDialog>
  <!-- 批量导入考试成绩 -->
  <ImportExamDialog v-model="importExamVisible" @update="onUpdateSuccess" v-if="importExamVisible"></ImportExamDialog>
  <!-- 批量导入完整评分 -->
  <ImportScoreDialog
    v-model="importScoreVisible"
    @update="onUpdateSuccess"
    v-if="importScoreVisible"></ImportScoreDialog>
</template>

<style lang="scss" scoped>
.is-success {
  color: #63a103;
}
.is-info {
  color: #b18862;
}
</style>
