<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="platformPersonForm"
    :rules="platformPersonFormRules"
    ref="platformPersonFormRef"
    style="max-width: 66%">
    <el-form-item label="姓名" prop="contact_name">
      <el-input v-model="platformPersonForm.contact_name" />
    </el-form-item>
    <el-form-item label="邮箱" prop="contact_email">
      <el-input v-model="platformPersonForm.contact_email" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="3" v-model="platformPersonForm.remark" />
    </el-form-item>
  </el-form>
</template>

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

const platformPersonForm = reactive({
  contact_name: "",
  contact_email: "",
  remark: "",
});

const platformPersonFormRules = reactive({
  contact_email: [{ type: "email", message: "请输入正确的邮箱", trigger: "blur" }],
});
const platformPersonFormRef = ref(null);
const emit = defineEmits(["action"]);

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

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

onMounted(() => {});

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