<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="orgPersonForm"
    :rules="orgPersonFormRules"
    ref="orgPersonFormRef"
    style="max-width: 66%">
    <el-form-item label="联系人姓名" prop="contact_name">
      <el-input v-model="orgPersonForm.contact_name" />
    </el-form-item>
    <el-form-item label="证件类型" prop="document_type">
      <el-select v-model="orgPersonForm.document_type" placeholder="请选择证件类型" style="width: 100%">
        <el-option v-for="item in documentTypeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="证件号" prop="document_number">
      <el-input v-model="orgPersonForm.document_number" />
    </el-form-item>
    <el-form-item label="联系人邮箱" prop="contact_email">
      <el-input v-model="orgPersonForm.contact_email" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="3" v-model="orgPersonForm.remark" />
    </el-form-item>
  </el-form>
</template>

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

const orgPersonForm = reactive({
  contact_name: "",
  document_type: "",
  document_number: "",
  contact_email: "",
  remark: "",
});

const documentTypeList = ref([
  {
    label: "身份证",
    value: 1,
  },
]);

const orgPersonFormRules = reactive({
  contact_email: [
    // { required: true, message: '请输入手机号', trigger: 'blur' },
    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
  ],
  document_number: [
    {
      pattern:
        /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
});
const orgPersonFormRef = ref(null);
const emit = defineEmits(["action"]);

const submitForm = async () => {
  if (!orgPersonFormRef) return;
  await orgPersonFormRef.value.validate((valid, fields) => {
    if (valid) {
      emit("action", orgPersonForm);
    } else {
      emit("action", null);
    }
  });
};
const clearForm = () => {
  if (!orgPersonFormRef) return;
  orgPersonFormRef.value.resetFields();
};

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

onMounted(() => {});

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