<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="contactForm"
    :rules="contactFormRules"
    ref="contactRef"
    style="max-width: 66%"
  >
    <el-form-item label="联系人姓名" prop="name">
      <el-input v-model="contactForm.name" />
    </el-form-item>
    <el-form-item label="证件类型" prop="certificate_type">
      <el-input v-model="contactForm.certificate_type" />
    </el-form-item>
    <el-form-item label="证件号" prop="certificate_account">
      <el-input v-model="contactForm.certificate_account" />
    </el-form-item>
    <el-form-item label="联系人邮箱">
      <el-input v-model="contactForm.email"/>
    </el-form-item>
     <el-form-item label="备注">
      <el-input type="textarea" :rows="3" v-model="contactForm.remark" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'

const contactForm = reactive({
  name: '',
  certificate_type: '',
  certificate_account: '',
  email: '',
  remark: '',
})

const contactFormRules = reactive({
})
const contactRef = ref(null)
const emit = defineEmits(['action'])

const submitForm = async () => {
  if (!contactRef) return
  await contactRef.value.validate((valid, fields) => {
    if (valid) {
      emit('action', contactForm)
    } else {
      emit('action',null)
    }
  })
}
const clearForm = () => {
  if (!contactRef) return
  contactRef.value.resetFields()
} 

const setForm = (data) => {
  contactForm.value = Object.assign(contactForm, data);
}

onMounted(() => {
   
})

defineExpose({ submitForm, clearForm, setForm })
</script>