<template>
  <el-form
    label-position="top"
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="100px"
  >
    <div style="margin-bottom: 15px">
      <span
        class="x_bg_blue"
        style="
          display: inline-block;
          width: 5px;
          height: 5px;
          margin: 0 5px;
          vertical-align: middle;
        "
      ></span>
      联系我
    </div>
    <el-form-item label="" prop="content">
      <el-input
        v-model="form.content"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6 }"
        placeholder="请输入需求"
      ></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="单位" prop="company">
      <el-input v-model="form.company" placeholder="请输入所在单位"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="mobile">
      <el-input
        v-model="form.mobile"
        maxlength="11"
        placeholder="请输入联系电话"
      ></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="x_btns" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { launch } from "@/api/config";
const { proxy } = getCurrentInstance();
const data = reactive({
  form: {},
  rules: {
    content: [{ required: true, message: "需求内容不能为空", trigger: "blur" }],
    name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
    company: [{ required: true, message: "单位不能为空", trigger: "blur" }],
    mobile: [
      { required: true, message: "联系电话不能为空", trigger: "blur" },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
  },
});
const { form, rules } = toRefs(data);
/** 表单重置 */
function reset() {
  form.value = {
    content: undefined,
    name: undefined,
    company: undefined,
    mobile: undefined,
    email: undefined,
  };
  proxy.resetForm("formRef");
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      launch(form.value).then((res) => {
        proxy.$modal.msgSuccess(res.message);
        reset();
      });
    }
  });
}
</script>
<style lang="scss" scoped>
.el-form {
  padding: 15px;
  background-color: #fff;
}
.el-form-item {
  margin-bottom: 15px;
}
::v-deep .el-form-item--medium .el-form-item__label {
  line-height: 22px;
  padding-bottom: 5px;
}
.x_btns {
  width: 100%;
}
</style>