<template>
  <div v-loading="loading" style="padding: 10px">
    <div style="margin-bottom: 10px; padding-left: 65px">
      <el-button type="primary" @click="handleSend">发送</el-button>
    </div>
    <div style="width: 70%">
      <byForm
        :formConfig="formConfig"
        :formOption="formOption"
        v-model="formData.data"
        :rules="rules"
        ref="submit"
      >
        <template #contentSlot> 内容插槽 </template>
      </byForm>
    </div>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";
let loading = ref(false);
const formOption = reactive({
  inline: true,
  labelWidth: 65,
  itemWidth: 100,
  labelPosition: "left",
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "aa",
      label: "收件人",
      required: true,
      itemWidth: 100,
      itemType: "text",
    },
    {
      type: "input",
      prop: "bb",
      label: "主题",
      required: true,
      itemWidth: 100,
      itemType: "text",
    },
    {
      type: "slot",
      slotName: "contentSlot",
      label: " ",
    },
    {
      type: "input",
      prop: "cc",
      label: "发件人",
      required: true,
      itemWidth: 100,
      itemType: "text",
    },
  ];
});
const rules = ref({
  aa: [{ required: true, message: "请输入收件人", trigger: "blur" }],
  bb: [{ required: true, message: "请输入主题", trigger: "blur" }],
  cc: [{ required: true, message: "请输入发件人", trigger: "blur" }],
});
const formData = reactive({
  data: {},
});
const submit = ref(null);
const handleSend = () => {
  submit.value.handleSubmit(() => {});
};
</script>

<style lang="scss" scoped>
</style>