<!--我要买-->
<template>
  <div class="bg-F5">
    <div class="container">
      <div class="partTitle">
        <span class="orangeLine"></span>{{ $t("page.views.info.add.title") }}
      </div>
      <div class="formDiv">
        <el-form
          class="form"
          :rules="rules"
          ref="form"
          :model="form"
          label-width="150px"
        >
          <el-form-item
            :label="`${$t('page.views.info.add.purchaseTitle')}`"
            prop="purchaseTitle"
          >
            <el-input v-model="form.purchaseTitle"></el-input>
          </el-form-item>
          <el-form-item
            :label="`${$t('page.views.info.add.summaryOfNeeds')}:`"
            prop="summaryOfNeeds"
          >
            <el-input v-model="form.summaryOfNeeds"></el-input>
          </el-form-item>
          <el-form-item
            :label="`${$t('page.views.info.add.demandDetails')}:`"
            prop="demandDetails"
          >
            <el-input v-model="form.demandDetails" type="textarea"></el-input>
          </el-form-item>
          <el-form-item
            :label="`${$t('page.views.info.add.contacts')}:`"
            prop="contacts"
          >
            <el-input v-model="form.contacts"></el-input>
          </el-form-item>
          <el-form-item
            :label="`${$t('page.views.info.add.contactNumber')}:`"
            prop="contactNumber"
          >
            <el-input v-model="form.contactNumber"></el-input>
          </el-form-item>
        </el-form>
        <div class="line"></div>
        <div class="tc">
          <el-button class="submitBtn" type="primary" @click="validate">{{
            $t("form.submit")
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { ElForm } from "element-ui/types/form";
import i18n from "@/lang";
@Component
export default class extends Vue {
  private form = {
    purchaseTitle: "",
    summaryOfNeeds: "",
    demandDetails: "",
    contacts: "",
    contactNumber: ""
  };
  private rules = {
    purchaseTitle: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.info.add.purchaseTitle`
        )}`,
        trigger: "blur"
      }
    ],
    summaryOfNeeds: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.info.add.summaryOfNeeds`
        )}`,
        trigger: "blur"
      }
    ],
    demandDetails: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.info.add.demandDetails`
        )}`,
        trigger: "blur"
      }
    ],
    contacts: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.info.add.contacts`
        )}`,
        trigger: "blur"
      }
    ],
    contactNumber: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.info.add.contactNumber`
        )}`,
        trigger: "blur"
      }
    ]
  };
  get elForm() {
    return this.$refs.form as ElForm;
  }
  private validate() {
    this.elForm.validate(x => x && this.submit());
  }
  private async submit() {
    const [err] = await this.$post("/demand/info/insertDemandInfo", this.form);
    if (err) return;
    this.elForm.resetFields();
    this.$message.success(`${this.$i18n.t("message.success.infoAdd")}`);
    this.$router.push("/user?index=1");
  }
}
</script>
<style lang="scss" scoped>
.partTitle {
  padding: 3rem 0 2rem 0;
  font-size: 1.8rem;
  color: #333;
  .orangeLine {
    display: inline-block;
    height: 1.8rem;
    width: 0.3rem;
    background: #fd5522;
    vertical-align: middle;
    border-radius: 0.15rem;
    margin-right: 1rem;
  }
}
.formDiv {
  background: #fff;
  text-align: center;
  padding: 4rem 0 3rem 0;
  border-radius: 0.4rem;
  .form {
    width: 70%;
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
    .line {
      width: 100%;
      height: 0.1rem;
      background: #e5e5e5;
      margin-top: 4rem;
      margin-bottom: 3rem;
    }
  }
  .submitBtn {
    background: #fd5522;
    color: #fff;
    border: 0;
  }
}
.tc {
  text-align: center;
}
</style>
