<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { useFilterList } from '../composables/useFilterList'
import { syncExam } from '../api'

const emit = defineEmits<{
  (e: 'update'): void
}>()

// 评分方法
const scoreMethods = useMapStore().getMapValuesByKey('scoring_manner')

const { competitions } = useFilterList(1)
const form = reactive<any>({
  competition: undefined
})
// 同步
function handleSync(row?: any) {
  syncExam({ competition_id: form.competition?.id, detail_id: row?.id }).then(() => {
    ElMessage.success('同步成功')
    emit('update')
  })
}
// 评分方法
function scoreMethodText(value: string) {
  return scoreMethods.find(item => item.value == value)?.label || value
}
</script>

<template>
  <el-dialog title="同步1+X考试成绩" :close-on-click-modal="false">
    <el-form>
      <el-form-item label="赛项名称">
        <el-select v-model="form.competition" value-key="id">
          <el-option v-for="item in competitions" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-button type="primary" :disabled="!form.competition" @click="handleSync">一键同步成绩</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="form.competition?.rules">
      <el-table-column label="评分方法" prop="type" align="center" width="200">
        <template #default="{ row }"> {{ scoreMethodText(row.type) }} </template>
      </el-table-column>
      <el-table-column label="考试名称" prop="exam_name" align="center"></el-table-column>
      <el-table-column label="实考人数/应考人数" align="center" width="160">
        <template #default="{ row }"> {{ row.finish_count }}/{{ row.all_count }} </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template #default="{ row }">
          <el-button round type="primary" @click="handleSync(row)">同步导入成绩</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
