<template>
  <div class="p-base">
    <el-card shadow="never">
      <base-form ref="formRef" :label-width="useVW(160)" :items="items" :rules="rules" :model="model">
        <el-form-item>
          <confirm-button @confirm="onSubmit" @cancel="back()"></confirm-button>
        </el-form-item>
      </base-form>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="EditExam">
/** 创建考试 */
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElCard, ElFormItem, ElMessage } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import useForm from '@/hooks/useForm'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import { TrueOrFalse, StatusMap } from '@/constants/dicts'

import type { EpFormItem, EpFormRules } from 'global-type'
import type { ExtractApiParams } from '@/api/api'

const props = defineProps<{ id?: string | number }>()

const isEdit = !!props.id

const { replace, back } = useRouter()

const { fetch: saveExamInfo } = useFetch('saveExamInfo')

const initModel: ExtractApiParams<'saveExamInfo'> = {
  name: '',
  doubtReject: true,
  markingMode: 'MOUSE',
  maxTaskRecover: 30,
  maxMarkingDuration: void 0,
  spotCheckReject: true,
  userNameCollect: true,
  enable: true,
}

const model = reactive<ExtractApiParams<'saveExamInfo'>>(initModel)

const { formRef, elFormRef, defineColumn, _ } = useForm()

const rules: EpFormRules = {
  name: [{ required: true, message: '请填写考试名称' }],
  markingMode: [{ required: true, message: '请选择评卷模式' }],
  maxMarkingDuration: [
    { required: true, message: '请设置在线评卷时长' },
    { type: 'number', min: 1, max: 1440, message: '在线评卷时长限制1-1440分钟' },
  ],
  spotCheckReject: [{ required: true, message: '抽查卷是否允许打回' }],
  doubtReject: [{ required: true, message: '问题卷是否允许打回' }],
  maxTaskRecover: [
    { required: true, message: '请设置自动任务回收的时间' },
    { type: 'number', min: 1, max: 1440, message: '任务回收时间限制1-1440分钟' },
  ],
  userNameCollect: [{ required: true, message: '是否收集用户姓名' }],
  enable: [{ required: true, message: '是否启用考试' }],
}

const span8 = defineColumn(_, '', { span: 8 })

const items: EpFormItem[] = [
  span8({ label: '考试名称', slotType: 'input', prop: 'name' }),
  span8({
    label: '评卷模式',
    slotType: 'select',
    prop: 'markingMode',
    slot: { options: [{ value: 'MOUSE', label: '键盘鼠标模式' }] },
  }),
  span8({
    label: '在线评卷时长',
    slotType: 'inputNumber',
    prop: 'maxMarkingDuration',
    slot: { stepStrictly: true, step: 1 },
  }),
  span8({ label: '抽查卷允许打回', slotType: 'select', prop: 'spotCheckReject', slot: { options: TrueOrFalse } }),
  span8({ label: '问题卷允许打回', slotType: 'select', prop: 'doubtReject', slot: { options: TrueOrFalse } }),
  span8({
    label: '自动任务回收(分钟)',
    slotType: 'inputNumber',
    prop: 'maxTaskRecover',
    slot: { stepStrictly: true, step: 1 },
  }),
  span8({ label: '用户姓名收集', slotType: 'select', prop: 'userNameCollect', slot: { options: TrueOrFalse } }),
  span8({ label: '状态', slotType: 'select', prop: 'enable', slot: { options: StatusMap } }),
]

/** 编辑模式 */
const { fetch: getExamInfo } = useFetch('getExamInfo')
if (isEdit) {
  getExamInfo({ id: +props.id }).then((result) => {
    Object.assign(model, result)
  })
}

/** 确定提交 */
async function onSubmit() {
  try {
    await elFormRef?.value?.validate()
    await saveExamInfo(model)
    elFormRef?.value?.resetFields()
    ElMessage.success({
      message: `${isEdit ? '修改' : '创建'}考试成功`,
      duration: 1000,
      onClose: back,
    })
  } catch (error) {
    console.error(error)
  }
}

/** 跳转开始列表 */
const toExamMange = () => {
  replace({ name: 'ExamMange' })
}
</script>

<style scoped lang="scss"></style>
