<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { ContestItem } from '../types'
import { ElMessage } from 'element-plus'
import { pick } from 'lodash-es'
import { createExam, updateExam, getExamList } from '../api'

interface Props {
  data?: any
}
const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const detail = $ref(inject('detail') as ContestItem)

const formRef = $ref<FormInstance>()
const form = reactive<any>({
  competition_id: detail.id,
  exam_id: '',
  sort: 1,
  platform_key: 'career_data_analysis'
})
watchEffect(() => {
  if (!props.data) return
  Object.assign(form, props.data)
})

const rules = ref<FormRules>({
  exam_id: [{ required: true, message: '请选择试卷', trigger: 'change' }]
})
const isUpdate = $computed(() => {
  return !!props.data?.id
})
const title = $computed(() => {
  return isUpdate ? '编辑大赛模块试卷' : '新增大赛模块试卷'
})

let examList = $ref<Record<string, any>[]>([])
// 获取关联考试列表
function fetchExamList() {
  getExamList({ project: 'x1', 'per-page': 1000 }).then(res => {
    examList = res.data.list || []
  })
}
onMounted(() => {
  fetchExamList()
})
// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    const params = Object.assign({}, pick(form, ['competition_id', 'exam_id', 'sort']))
    isUpdate ? handleUpdate(params) : handleCreate(params)
  })
}
// 新增
function handleCreate(params: any) {
  createExam(params).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate(params: any) {
  params.id = props.data?.id
  updateExam(params).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @update:modelValue="$emit('update:modelValue')">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="试卷名称" prop="exam_id">
        <el-select v-model="form.exam_id" filterable style="width: 100%">
          <el-option v-for="item in examList" :key="item.exam_id" :label="item.name" :value="item.exam_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模块" prop="sort">
        <el-select v-model="form.sort">
          <el-option v-for="item in 6" :value="item" :key="item"></el-option>
        </el-select>
        <!-- <el-input v-model="form.sort"></el-input> -->
      </el-form-item>
      <el-form-item label="关联赛项">
        <el-input :value="detail.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="关联实验">
        <el-radio-group v-model="form.platform_key">
          <el-radio label="career_data_analysis">商业数据分析实验</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row justify="center">
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
