<!-- 添加证书信息弹窗 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
const emits = defineEmits(['add'])
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  certificateNo: '', // 证书号
  certificateName: '', // 证书名称
  certificateCompany: '', // 发证单位
  certificateDate: '', // 发证日期
  validDate: '', // 有效日期
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  certificateNo: [
    { required: true, message: '请输入证书号', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  certificateName: [{ required: true, message: '请输入证书名称', trigger: 'blur' }],
  certificateCompany: [{ required: true, message: '请输入发证单位', trigger: 'blur' }],
  certificateDate: [{ required: true, message: '请选择发证日期', trigger: 'blur' }],
  validDate: [{ required: true, message: '请选择有效日期', trigger: 'blur' }],
})
const initDialog = () => {
  dialogFormVisible.value = true
}
defineExpose({ initDialog })
// 点击保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('add', form)
      dialogFormVisible.value = false
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  formEl.resetFields()
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="添加证书信息">
    <el-form
      ref="ruleFormRef" :model="form"
      :rules="rules"
    >
      <el-form-item label="证书号" :label-width="formLabelWidth" prop="certificateNo">
        <el-input v-model="form.certificateNo" placeholder="证书号" />
      </el-form-item>
      <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateName">
        <el-input v-model="form.certificateName" placeholder="证书名称" />
      </el-form-item>
      <el-form-item label="发证单位" :label-width="formLabelWidth" prop="certificateCompany">
        <el-input v-model="form.certificateCompany" placeholder="发证单位" />
      </el-form-item>
      <el-form-item label="发证日期" :label-width="formLabelWidth" prop="certificateDate">
        <el-date-picker
          v-model="form.certificateDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择发证日期"
        />
      </el-form-item>
      <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
        <el-date-picker
          v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择有效日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
        <el-button @click="resetForm(ruleFormRef)">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>