<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', slots: 'table-score' },
      { label: '更新时间', prop: 'updated_time' },
      // {
      //   label: '模块一',
      //   prop: 'module_1',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 0)
      //   }
      // },
      // {
      //   label: '模块二',
      //   prop: 'module_2',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 1)
      //   }
      // },
      // {
      //   label: '模块三',
      //   prop: 'module_3',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 2)
      //   }
      // },
      // {
      //   label: '模块四',
      //   prop: 'module_4',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 3)
      //   }
      // },
      // {
      //   label: '模块五',
      //   prop: 'module_5',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 4)
      //   }
      // },
      // {
      //   label: '模块六',
      //   prop: 'module_6',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 5)
      //   }
      // },
      { label: '操作', slots: 'table-x', width: 100 }
    ]
  }
})

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

function onUpdateSuccess() {
  appList?.refetch()
}

// function getModuleStatus(row: any, index: number) {
//   const [first] = row.student_module_status_list
//   try {
//     const data: any = JSON.parse(first.data)
//     const status: number = data[index].status
//     if (status == 0) return '未开始'
//     if (status == 1) return '<span class="is-inProgress">进行中</span>'
//     if (status == 2) return '<span class="is-completed">已完成</span>'
//   } catch (error) {
//     // console.log(error)
//   }
//   return '未开始'
// }
</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_name !== '--' }">{{ row.score_name }}</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">
.is-info {
  color: #b18862;
}
.is-completed {
  color: #b8b8b8;
}
.is-inProgress {
  color: var(--main-color);
}
</style>
