<template>
  <div class="lr-bg pd20">
    <el-row justify="center">
      <el-form
        ref="infoRef" :model="form" :rules="rules" style="width: 600px;background: #fff;padding: 40px" 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>
    </el-row>
    <el-row justify="center" class="pd20">
      <el-button type="primary" @click="submitForm(0)">保 存</el-button>
      <el-button color="#13B5B1" style="--el-color-black:#fff;" @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, getInfo, updateInfo, getExamAddress, getExamPointDeptTree } from '@/api/exam/info'
import _ from 'lodash'
import ChooseExaminer from '@/views/exam/components/chooseExaminer'
import { useRoute } from 'vue-router'

const route = useRoute()
const { proxy } = getCurrentInstance()

const data = reactive({
  form: {
    examId: null,
    name: null,
    type: '2',
    applyMemId: null,
    memberName: null,
    applyTime: null,
    startTime: null,
    endTime: null,
    examLocation: null,
    // examLocationArr: [],
    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
}, { immediate: true })

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

let type
onMounted(() => {
  if (route.path.indexOf('rank') > -1) {
    type = 'rank'
    form.value.type = '2'
  } else if (route.path.indexOf('beyond') > -1) {
    type = 'beyond'
    form.value.type = '3'
  }

  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(flag)
  } 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
        }

        proxy.$modal.confirm('确定提交审核？')
          .then(() => save(flag))
          .then(() => {
            proxy.$tab.closeReOpenPage({ path: `/${type}/apply` })
          })
      }
    })
  }
}

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

examAddresses()
function examAddresses() {
  getExamAddress().then(res => {
    examAddress.value = res.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>
.right{
  padding-right: 100px;
}
</style>