<template>
  <div>
    <el-dialog v-model="show" draggable title="修改考试信息" :close-on-click-modal="false" width="650">
      <el-form ref="examRef" :model="form" :rules="rules" label-width="200px" label-suffix="：">
        <el-form-item label="考段名称" prop="name">
          <el-input v-model="form.name" disabled placeholder="自动生成" style="width: 300px" />
        </el-form-item>
        <el-form-item label="申请日期" prop="applyTime">
          <el-date-picker
            v-model="form.applyTime"
            disabled
            style="width: 300px"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择申请日期"
          />
        </el-form-item>
        <el-form-item label="考试开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            style="width: 300px"
            clearable
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            placeholder="请选择考试开始时间"
          />
        </el-form-item>
        <el-form-item label="考试结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            style="width: 300px"
            clearable
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            placeholder="请选择考试结束时间"
          />
        </el-form-item>
        <el-form-item v-for="ec in examinerForChoose" :key="ec" :label="`考官${ec}`">
          <el-input
            v-model="form[`examiner_${ec}`]" clearable placeholder="请选择考官" style="width: 300px"
            @click="selectFN(ec)"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer center">
          <el-button type="primary" @click="submitForm()">确 定</el-button>
          <el-button @click="show=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <choose-examiner ref="chooseExaminerRef" @chosen="chosenExaminer" />
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance } from 'vue'
import { updateExam } from '@/api/exam/info'
import { dayjs } from 'element-plus'
import _ from 'lodash'
import ChooseExaminer from '@/views/exam/components/chooseExaminer'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit'])

const data = reactive({
  form: {
    examId: null,
    name: null,
    applyTime: null,
    startTime: null,
    endTime: null,
    examiner: null,
    examinerNames: null,
    type: null
  },
  rules: {
    startTime: [
      { required: true, message: '考试开始时间不能为空', trigger: 'blur' }
    ],
    endTime: [
      { required: true, message: '考试结束时间不能为空', trigger: 'blur' }
    ]
  },
  show: false
})
const { form, rules, show } = toRefs(data)

const examinerForChoose = ['A', 'B', 'C']
const examinerArr = []

function selectFN(ec) {
  const chosen = []
  const type = form.value.type
  _.each(examinerForChoose, ec => {
    const key = `examiner_${ec}`
    if (form.value[key]) {
      const examiner = _.find(examinerArr, (e) => {
        return e.name == form.value[key]
      })
      if (examiner) {
        chosen.push(examiner)
      }
    }
  })

  proxy.$refs['chooseExaminerRef'].open({ ec, chosen, type })
}

function chosenExaminer(examiner, ec) {
  examinerArr.push(examiner)
  form.value[`examiner_${ec}`] = examiner.name
}

// 提交
function submitForm() {
  const examinerIds = []
  const examinerNames = []
  _.each(examinerForChoose, ec => {
    const key = `examiner_${ec}`
    if (form.value[key]) {
      const examiner = _.find(examinerArr, (e) => {
        return e.name == form.value[key]
      })
      if (examiner) {
        examinerIds.push(examiner.perId)
        examinerNames.push(examiner.name)
      }
    }
  })

  if (examinerIds.length > 0) {
    form.value.examiner = examinerIds.join(',')
    form.value.examinerNames = examinerNames.join('，')
  } else {
    form.value.examiner = null
    form.value.examinerNames = null
  }

  proxy.$refs['examRef'].validate(valid => {
    if (valid) {
      if (dayjs(form.value.startTime).valueOf() < dayjs(form.value.applyTime).valueOf()) {
        proxy.$modal.msgError('考试开始时间应大于申请日期')
        return
      }
      if (dayjs(form.value.endTime).valueOf() < dayjs(form.value.startTime).valueOf()) {
        proxy.$modal.msgError('考试结束时间应大于考试开始时间')
        return
      }

      if (examinerIds.length % 2 === 0) {
        proxy.$modal.msgError('录入的考官人数必须为单数')
        return
      }

      proxy.$modal.confirm('确定修改考试信息？')
        .then(() => updateExam(form.value))
        .then(() => {
          proxy.$modal.msgSuccess('修改成功')
          show.value = false
          emit('submit')
        })
    }
  })
}

function open(row) {
  const { examId, name, applyTime, startTime, endTime, examiner, examinerNames, type } = row

  form.value = {
    examId,
    name,
    applyTime,
    startTime,
    endTime,
    examiner,
    examinerNames,
    type
  }

  _.each(examiner.split(','), (id) => {
    examinerArr.push({
      perId: id
    })
  })

  _.each(examinerNames.split('，'), (name, i) => {
    form.value[`examiner_${examinerForChoose[i]}`] = name
    examinerArr[i].name = name
  })

  show.value = true
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped>

</style>