<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="contactForm"
    :rules="contactFormRules"
    ref="contactRef"
    style="max-width: 66%">
    <el-form-item label="联系人姓名" prop="contact_name">
      <el-input v-model="contactForm.contact_name" />
    </el-form-item>
    <el-form-item label="联系人手机号" prop="contact_phone">
      <el-input v-model="contactForm.contact_phone" />
    </el-form-item>
    <el-form-item label="联系人邮箱" prop="contact_email">
      <el-input v-model="contactForm.contact_email" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="3" v-model="contactForm.remark" show-word-limit maxlength="300" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
const contactForm = reactive({
  contact_name: "",
  contact_phone: "",
  contact_email: "",
  remark: "",
});
const props = defineProps({
  formType: {
    type: Boolean,
    default: false, //false 新增 true 编辑
  },
  id: {
    type: String,
    default: "",
  },
});

const checkPhone = (rule, value, callback) => {
  var phone_ruler = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  setTimeout(() => {
    if (!phone_ruler.test(value) && value.length !== 0) {
      callback(new Error("请输入正确的手机号码"));
    } else {
      callback();
    }
  });
};


const checkName = (rule, value, callback) => {
  var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
  if (!reg.test(value)) {
    callback(new Error("只能输入字母、数字和汉字"));
  } else {
    callback();
  }
};

const contactFormRules = reactive({
  contact_name: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
    { max: 50, message: "联系人姓名最大长度为50个字符", trigger: "blur" },
    { validator: checkName, trigger: "blur" },
  ],
  contact_phone: [
    { required: true, message: "请输入联系人手机号", trigger: "blur" },
    { validator: checkPhone, trigger: "blur" },
  ],
  contact_email: [
    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
    { max: 100, message: "邮箱最大长度为100个字符", trigger: "blur" },
  ],
});
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) => {
  Object.assign(contactForm, data);
};

onMounted(() => {});

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