<template>
  <!-- 新增运输作业页面 -->
  <div class="contractDetails">
    <page-title>运输预约</page-title>
    <div class="contractTitle">
      <div class="Carrier">
        <span class="text">承运商</span>
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @input="onInput"
        ></el-autocomplete>
        <span class="spankong"></span>
      </div>
      <div class="form_box">
        <el-form><dil-form :formId="166" v-model="form1"></dil-form></el-form>
        <div class="buttonins">
          <el-button type="primary" @click="onDrawer()">浏览</el-button>
        </div>
      </div>
    </div>

    <div class="button_box">
      <el-button @click="onClickCancel">返回</el-button>
      <el-button type="primary" @click="onClickConfirm">确认</el-button>
    </div>

    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      size="30%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="input"
        style="margin-top: 0.625rem; margin-left: 1.25rem"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick()"
        style="margin-bottom: 0.9375rem"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <dilTable
        v-bind.sync="options"
        @radio-change="currentRadioChange1"
      ></dilTable>
    </el-drawer>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";

export default {
  components: { PageTitle },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      input: "",
      options: {
        requestUrl: "api/v1/uc/queryBatchByLike?apiId=375",
        selectionType: "radio",
        maplist: [],
      },
      // 表单
      form1: {},
      restaurants:[],
      state:'',
    };
  },
  methods: {
    async onInput(){
      await this.axios.post('/api/v1/uc/getCarrierMesByLike?index='+this.state).then((res)=>{
        this.restaurants = [];
        res.data.data.forEach(element => {
          this.restaurants.push({
            value:element.carrierName,
            carrierId:element.carrierId
          })
        });
      })
    },
    async querySearch(queryString, cb) {
      var results = await queryString ? this.restaurants.filter(this.createFilter(queryString)) : this.restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    onDrawer() {
      this.drawer = true;
    },
    currentRadioChange1(selection) {
      this.maplist = selection;
      this.form1 = {
        batchId: selection.resultForeignShipName + selection.materialName,
      };
    },
    onclick() {
      this.options.requestUrl =
        "api/v1/uc/queryBatchByLike?apiId=375&con=" + this.input;
    },

    // 返回
    onClickCancel() {
      this.$router.go(-1);
    },
    // 确认
    onClickConfirm() {
      let addTmsTruck = {
        batchId: this.maplist.batchId,
        planTruckTime: sjTime(this.form1.planTruckTime),
        carrierId: this.form1.carrierId,
        materialTotalWeight: this.form1.materialTotalWeight,
        planIncomingTime: sjTime(this.form1.planIncomingTime),
      };
      function isNumber() {
        var value = addTmsTruck.materialTotalWeight;
        //验证是否为数字
        var patrn = /^(-)?\d+(\.\d+)?$/;
        if (patrn.exec(value) == null || value == "") {
          return false;
        } else {
          return true;
        }
      }
      var val = this.value;
      if (
        addTmsTruck.batchId == null ||
        addTmsTruck.planTruckTime == null ||
        addTmsTruck.carrierId == null ||
        addTmsTruck.materialTotalWeight == null ||
        addTmsTruck.planIncomingTime == null
      )
        this.$message.error("存在空值！");
      else if (!isNumber(val)) this.$message.error("重量必须是数字！");
      else
        this.axios.post("/api/v1/ams/addPurPlan", addTmsTruck).then(() => {
          this.$message({
            type: "success",
            message: "新增成功!",
          });
          this.$router.push("/transportReserve");
        });
    },
  },
};
</script>
<style lang="scss">
.contractDetails {
  .contractTitle {
    .Carrier {
      margin-top: 1.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .text{
        text-align: right;
        width: 6.25rem;
        padding-right: 0.9375rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #606266;
      }
      .spankong{
        display: inline-block;
        width: 4.5625rem;
        height: 1.875rem;
      }
    }
  }
  .form_box{
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
  }
  .button_box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6.25rem;
  }

}
</style>