<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>
      <!--      联系我-->
      {{ t("webContact.title") }}
    </div>
    <el-form-item label="" prop="content">
      <el-input
        v-model="form.content"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6 }"
        :placeholder="t('webContact.demandPlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="t('webContact.name')" prop="name">
      <el-input
        v-model="form.name"
        :placeholder="t('webContact.namePlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="t('webContact.unit')" prop="company">
      <el-input
        v-model="form.company"
        :placeholder="t('webContact.unitPlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="t('webContact.phone')" prop="mobile">
      <!--        maxlength="11"-->
      <el-input
        v-model="form.mobile"
        :placeholder="t('webContact.phonePlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="t('webContact.email')">
      <el-input
        v-model="form.email"
        :placeholder="t('webContact.emailPlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="x_btns" @click="submitForm">
        <!--        提交-->
        {{ t("webContact.submit") }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
// import { launch } from "@/api/config";
import { pubMessage } from "@/api/website/message";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { computed } from "vue"; // const { proxy } = getCurrentInstance();
// const { proxy } = getCurrentInstance();
const { t } = useI18n();
const data = reactive({
  form: {},
  rules: {
    content: [
      {
        required: true,
        message: computed(() => t("webContact.demandEmpty")),
        trigger: "blur",
      },
    ],
    name: [
      {
        required: true,
        message: computed(() => t("webContact.nameEmpty")),
        trigger: "blur",
      },
    ],
    company: [
      {
        required: true,
        message: computed(() => t("webContact.unitEmpty")),
        trigger: "blur",
      },
    ],
    mobile: [
      {
        required: true,
        message: computed(() => t("webContact.phoneEmpty")),
        trigger: "blur",
      },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: computed(() => t("webContact.phoneFormat")),
        trigger: "blur",
      },
    ],
  },
});
const { form, rules } = toRefs(data);

/** 表单重置 */
function reset() {
  form.value = {
    content: undefined,
    name: undefined,
    company: undefined,
    mobile: undefined,
    email: undefined,
  };
  if (formRef.value) {
    formRef.value.resetFields();
  }
}

const formRef = ref();

/** 提交按钮 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (valid) {
      pubMessage(form.value).then((res) => {
        // proxy.$modal.msgSuccess(res.message);
        ElMessage.success(t("tips.sendSuccess"));
        reset();
      });
    }
  });
}
</script>
<style lang="scss" scoped>
.el-form {
  padding: 15px;
  background-color: #fff;
}

.el-form-item {
  margin-bottom: 15px;
}

:deep(.el-form-item--medium .el-form-item__label) {
  line-height: 22px;
  padding-bottom: 5px;
}

.x_btns {
  width: 100%;
}
</style>
