<template>
  <div class="lr-bg pd20">
    <el-row justify="center">
      <el-form
        ref="infoRef" :model="form" :rules="rules" style="width: 600px;" label-width="auto"
        label-suffix="："
      >
        <el-form-item label="考级名称" prop="name">
          <el-input v-model="form.name" disabled placeholder="自动生成" style="width: 100%" />
        </el-form-item>
        <el-form-item label="申请单位" prop="applyMemId">
          <el-input v-model="form.memberName" placeholder="请输入申请单位" readonly style="width: 100%" />
        </el-form-item>
        <el-form-item label="申请日期" prop="applyTime">
          <el-date-picker
            v-model="form.applyTime"
            style="width: 100%"
            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: 100%"
            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: 100%"
            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="examLocation">
          <!--          <el-cascader-->
          <!--            v-model="form.examLocationArr" clearable :show-all-levels="false" :options="examPoints" :props="{value:'id'}"-->
          <!--            style="width: 100%;"-->
          <!--          />-->
          <el-input v-model="form.examLocation" clearable 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: 100%"
            @click="selectFN(ec)"
          />
        </el-form-item>
        <el-form-item />
      </el-form>
    </el-row>
    <el-row justify="center">
      <el-button type="primary" @click="submitForm(0)">保 存</el-button>
      <el-button type="primary" @click="submitForm(1)">保存并下一步</el-button>
    </el-row>

    <choose-examiner ref="chooseExaminerRef" @chosen="chosenExaminer" />
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import useUserStore from '@/store/modules/user'
import { dayjs } from 'element-plus'
import { addInfo, getExamPointDeptTree, getInfo, updateInfo } from '@/api/exam/info'
import _ from 'lodash'
import ChooseExaminer from '@/views/exam/components/chooseExaminer'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['next'])
const data = reactive({
  form: {
    examId: null,
    name: null,
    type: '1',
    applyMemId: null,
    memberName: null,
    applyTime: null,
    startTime: null,
    endTime: null,
    examLocation: null,
    // examLocationArr: null,
    examiner: null,
    examinerNames: null,
    status: '0'
  },
  rules: {
    applyMemId: [
      { required: true, message: '申请单位不能为空', trigger: 'blur' }
    ],
    applyTime: [
      { required: true, message: '申请时间不能为空', trigger: 'blur' }
    ],
    startTime: [
      { required: true, message: '考试开始时间不能为空', trigger: 'blur' }
    ],
    endTime: [
      { required: true, message: '考试结束时间不能为空', trigger: 'blur' }
    ],
    examLocation: [
      { required: true, message: '考级地点不能为空', trigger: 'blur' }
    ],
    examiner: [
      { required: true, message: '考官不能为空', trigger: 'blur' }
    ]
  }
})
const { form, rules } = toRefs(data)

const memberInfo = computed(() => useUserStore().memberInfo)
watch(memberInfo, (val) => {
  form.value.applyMemId = val.memId
  form.value.memberName = val.name
  // form.value.examLocation = val.memId
  // form.value.address = val.adress
}, { immediate: true })

const examinerForChoose = ['A', 'B', 'C']
const examinerArr = []
const examPoints = ref([])

onMounted(() => {
  form.value.applyTime = dayjs().format('YYYY-MM-DD')

  _.each(examinerForChoose, ec => {
    form.value[`examiner_${ec}`] = null
  })

  getExamPointDeptTree().then(res => {
    examPoints.value = res.data
  })
})

function submitForm(flag) {
  form.value.status = '0'
  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
  }

  // if (form.value.examLocationArr) {
  //   form.value.examLocation = form.value.examLocationArr.join()
  // } else {
  //   form.value.examLocation = ''
  // }

  // 0 保存并下一步  1 草稿
  form.value.draftFlag = flag === 0 ? '1' : '0'

  if (flag === 0) {
    save()
  } else {
    proxy.$refs['infoRef'].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
        }

        save().then(() => {
          emit('next', form.value.examId)
        })
      }
    })
  }
}

function save() {
  if (form.value.examId) {
    return updateInfo(form.value).then(() => {
      proxy.$modal.msgSuccess('保存成功')
    })
  } else {
    return addInfo(form.value).then((res) => {
      form.value.examId = res.data.examId
      form.value.name = res.data.name
      proxy.$modal.msgSuccess('保存成功')
    })
  }
}

function init(examId) {
  getInfo(examId).then(res => {
    const data = res.data
    if (data.examiner) {
      _.each(data.examiner.split(','), (id) => {
        examinerArr.push({
          perId: id
        })
      })

      _.each(data.examinerNames.split('，'), (name, i) => {
        data[`examiner_${examinerForChoose[i]}`] = name
        examinerArr[i].name = name
      })
    }
    // if (data.examLocation) {
    //   data.examLocationArr = data.examLocation.split(',')
    // }

    form.value = data
  })
}

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
}

defineExpose({
  init
})

</script>

<style scoped>
.form-content{
/* text-align:center; */
}
</style>