<script name="VerifierDetailDialog" lang="ts" setup>
import { ElLoading, ElMessage } from 'element-plus'
import type { IStaffVerifierDetail } from '../person-regitster'
import verifierParams from '/public/config/verifierParameter.json'
import type { IDictType } from '@/commonInterface/resource-interface'

const props = defineProps({
  verifierId: { type: String, default: '' },
})

const emit = defineEmits(['recordSaved'])

const detailTitle = ref<string>('')
const showVerifierDetail = ref(false) // 显示证书详情的对话框

const verifierFormRef = ref()

const paramsDict = ref<Array<IDictType>>([])
const workItemsDict = ref<Array<IDictType>>([])

const paramsSelected = ref<Array<string>>([])
const workItemsSelected = ref<Array<string>>([])
const verifierDetail = ref<IStaffVerifierDetail>({
  id: '',
  verifierId: props.verifierId,
  certificateParameters: '',
  identifiableWork: '',
  certificationDate: '',
})

const verifierDetailRules = ref({
  certificateParameters: [{ required: true, message: '持证参数不能为空', trigger: ['change', 'blur'] }],
  certificationDate: [{ required: true, message: '持证参数发证日期不能为空', trigger: ['change', 'blur'] }],
}) // 表单验证规则

const resetForm = () => {
  verifierDetail.value = {
    id: '',
    verifierId: props.verifierId,
    certificateParameters: '',
    identifiableWork: '',
    certificationDate: '',
  }

  paramsSelected.value = []
  workItemsSelected.value = []
}

const initParamsDict = () => {
  verifierParams.forEach((param: any) => {
    paramsDict.value.push({
      id: param.value,
      value: param.value,
      name: param.name,
    })
  })
}

const showDialog = (show: boolean, title = '') => {
  showVerifierDetail.value = show

  // 清除前次的校验结果
  nextTick(() => {
    verifierFormRef.value.clearValidate()
  })

  if (show === true) {
    detailTitle.value = title
    initParamsDict()
  }
  else {
    resetForm()
  }
}

const initVerifierDetail = (detail: IStaffVerifierDetail) => {
  verifierDetail.value = {
    id: detail.id,
    verifierId: detail.verifierId,
    certificateParameters: detail.certificateParameters,
    identifiableWork: detail.identifiableWork,
    certificationDate: detail.certificationDate,
    createTime: detail.createTime,
  }

  if (detail.certificateParameters.length > 0) {
    paramsSelected.value = detail.certificateParameters.split(',')
  }
  if (detail.identifiableWork.length > 0) {
    workItemsSelected.value = detail.identifiableWork.split(',')
  }
}

const saveVerifierDetail = async () => {
  verifierDetail.value.certificateParameters = paramsSelected.value.join(',')
  verifierDetail.value.identifiableWork = workItemsSelected.value.join(',')

  await verifierFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      emit('recordSaved', verifierDetail.value)
      showDialog(false)
    }
  })
}

const paramsChangedHandler = () => {
  verifierDetail.value.certificateParameters = paramsSelected.value.join(',')

  // 将下一级的可开展工作下拉框清空 重新选择
  verifierDetail.value.identifiableWork = ''
  workItemsDict.value = []

  paramsSelected.value.forEach((item) => {
    // 找到 参数 对应的 可开展工作项目
    const targetParam = verifierParams.filter((param: { name: string }) => param.name === item)
    if (targetParam.length > 0) {
      targetParam[0].workItem.forEach((work: { value: any; name: any }) => {
        // 判断下拉框中是否已经有该项目了
        // 按名字查找
        const targetWork = workItemsDict.value.filter(tar => tar.name === work.name)
        if (targetWork.length === 0) {
          workItemsDict.value.push({
            id: work.value,
            name: work.name,
            value: work.name,
          })
        }
      })
    }
  })
}

defineExpose({
  initVerifierDetail,
  showDialog,
})
</script>

<template>
  <el-dialog v-model="showVerifierDetail" :title="`${detailTitle}持证参数`" :append-to-body="true" :close-on-click-modal="false" align-center>
    <el-form ref="verifierFormRef" :model="verifierDetail" :rules="verifierDetailRules" label-position="right" label-width="110px" border stripe>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="持证参数" prop="certificateParameters">
            <el-select v-model="paramsSelected" placeholder="请选择持证参数，必填项" multiple clearable filterable style="width: 100%;" @change="paramsChangedHandler">
              <el-option v-for="dict in paramsDict" :key="dict.id" :value="dict.name" :label="dict.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="可开展工作">
            <el-select v-model="workItemsSelected" placeholder="请选择可开展工作" multiple clearable filterable style="width: 100%;">
              <el-option v-for="dict in workItemsDict" :key="dict.id" :value="dict.name" :label="dict.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="发证日期" prop="certificationDate">
            <el-date-picker v-model="verifierDetail.certificationDate" type="date" placeholder="请选择发证日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 50%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog(false)">取消</el-button>
        <el-button type="primary" @click="saveVerifierDetail">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>