<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" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted,getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
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 checkPhoneRepet = (rule, value, callback) => {
    let params = null;
    if (props.id){
      params = {id: parseInt(props.id),contact_phone: value,}
    }else {
      params = {id: 0,contact_phone: value}
    }

    $axios.post(`/apaas/system/v5/org/check`,params)
      .then((res) => {
        if (res.data.code == 200) {
              callback()
        }else {
            callback(new Error(res.data.data))
        }
      })
    }

const contactFormRules = reactive({
  contact_name: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
  ],
  contact_phone: [
    { required: true, message: '请输入联系人手机号', trigger: 'blur' },
    { validator: checkPhone, trigger: 'blur' },
    { validator: checkPhoneRepet, trigger: 'blur' }
  ],
  contact_email: [
    { type: 'email', message: '请输入正确的邮箱', 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>