<!--我要买-->
<template>
  <div class="bg-F5">
    <div class="container">
      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
      <div class="formDiv">
        <el-form
          class="form"
          :rules="rules"
          ref="form"
          :model="form"
          label-width="110px"
        >
          <!--<el-form-item label="商品类别：">-->
          <!--<el-select v-model="form.type" placeholder="请选择商品类别">-->
          <!--<el-option label="区域一" value="shanghai"></el-option>-->
          <!--<el-option label="区域二" value="beijing"></el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="需求标题：" prop="purchaseTitle">
            <el-input v-model="form.purchaseTitle"></el-input>
          </el-form-item>
          <el-form-item label="需求概要：" prop="summaryOfNeeds">
            <el-input v-model="form.summaryOfNeeds"></el-input>
          </el-form-item>
          <el-form-item label="需求详情：" prop="demandDetails">
            <el-input v-model="form.demandDetails" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contacts">
            <el-input v-model="form.contacts"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" 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="onSubmit('form')"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Component, Vue, Watch } from "vue-property-decorator";
export default {
  name: "app",
  components: {},
  data() {
    return {
      form: {
        purchaseTitle: "",
        summaryOfNeeds: "",
        demandDetails: "",
        contacts: "",
        contactNumber: ""
      },
      rules: {
        purchaseTitle: [
          { required: true, message: "请输入需求标题", trigger: "blur" }
        ],
        summaryOfNeeds: [
          { required: true, message: "请输入需求概要", trigger: "blur" }
        ],
        demandDetails: [
          { required: true, message: "请输入需求详情", trigger: "blur" }
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        contactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      var that = this;
      if (that.$store.state.user.UserInfo === null) {
        that.$message("用户未登录，请登录之后提交！");
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            that
              .$post("/demand/info/insertDemandInfo", that.form)
              .then(function(res) {
                console.log(res);
                if (!res[0]) {
                  that.$message({
                    message: "恭喜你，需求发布成功！",
                    type: "success"
                  });
                  // that.$message("需求发布成功！");
                  that.$refs[formName].resetFields();
                }
              });
          }
        });
      }
    }
  },
  mounted() {}
};
</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>
<style lang="scss">
.formDiv {
  .el-form-item__label {
    color: #666;
  }
}
</style>
