// 新增计划
<template>
  <div class="addInwardPlan">
    <page-title>新增计划</page-title>
    <div class="carrier form">
      <el-form
        class="demo-form-inline"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="承运商">
          <el-autocomplete
            class="inline-input"
            v-model="state2"
            :fetch-suggestions="querySearch"
            placeholder="请输入承运商名称"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <div class="truckNum">
          <el-form
            class="demo-form-inline"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="车数">
              <el-input
                v-model="planTruckNumber"
                placeholder="非必填"
                class="input"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-form>
    </div>
    <!--   运输单价按钮   -->
    <div class="materialDrawer">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-form-item label="运输单价"> </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onprice" class="truckBtn"
          >浏览</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <template>
      <div>
        <mergeRowTable
          v-bind.sync="first"
          @radio-change="currentRadioChange"
          ref="table"
        >
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="deleteRequirement(scope)"
              >
                拒绝需求
              </el-button>
            </template>
          </el-table-column>
        </mergeRowTable>
      </div>
    </template>
    <!--   运输单价模态框   -->
    <el-drawer
      :visible.sync="drawerP"
      :direction="direction"
      close-on-press-escape
      modal
      wrapperClosable
      size="60%"
    >
      <div class="selectText">
        <el-input v-model="inputP" placeholder="请输入内容" style="width: 240px" clearable></el-input>
        <el-button
          type="primary"
          @click="onpriceSelect"
        ><i class="el-icon-search"></i>查询</el-button
        >
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable
            v-bind.sync="priceOptions"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="PriceDrawer"
            @func="funcP"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
    <div class="button-box">
      <el-button type="primary" @click="makeSure">确认新增</el-button>
      <el-button type="primary" @click="cancel">返回</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
export default {
  components: { PageTitle },
  data() {
    return {
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#5f9ea0", //滚动条颜色
          opacity: 0.8, //滚动条透明度
          "overflow-x": "hidden"
        }
      },
      direction: "rtl",
      //表格加载状态
      PriceDrawer:false,
      tableLoading: false,
      isKuang:false,
      priceOptions: {
        requestUrl: ""
      },
      inputP:"",
      drawerP:false,
      restaurants: [],
      state2: null,
      planTruckNumber: null,
      carrierId: null,
      requirementId: null,
      form: {},
      first: {
        requestUrl:
          "/api/v1/ams/getTruckRequirementList?apiId=250&requirementStatus=2",
        selectionType: "radio",
        columnIndexs: [0, 1, 2, 3, 4, 20, 21, 22],
        comparison: "requirementNumber",
        mapList: {}
      },
      numberValidateForm: {
        planTruckNumber: null
      }
    };
  },
  methods: {
    funcP(){
      this.isKuang = false;
      this.tableLoading = false;
    },
    handleCloseP(){
      if (this.drawerP) {
        this.drawerP = false;
        this.inputP = null;
      }
    },
    onpriceSelect(){
      this.loading = true;
      this.isKuang = true;
      if (this.inputP) {
        this.priceOptions.requestUrl =
          "/api/v1/ams/getInwardContractPrice?apiId=464&deleted=0&con=" +
          this.inputP;
      } else {
        this.priceOptions.requestUrl =
          "/api/v1/ams/getInwardContractPrice?apiId=464&deleted=0&i=" + new Date();
      }
    },
    onprice(){
      this.drawerP=true;
      this.priceOptions.requestUrl =
        "/api/v1/ams/getInwardContractPrice?apiId=464&deleted=0&i=" + new Date();
    },
    handleSelect(item) {
      this.carrierId = item.carrierId;
      this.state2 = item.carrierName;
    },
    //搜索
    querySearch(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getCarrierMesByLike?index=" + this.state2)
        .then(res => {
          if (res.data.code == "200") {
            console.log(res);
            var restaurants = res.data.data;
            var results = queryString
              ? restaurants.filter(this.createFilter(queryString))
              : restaurants;
            // 调用 callback 返回建议列表的数据
            console.log(results, "results");
            cb(results);
          }
        });
    },
    createFilter(queryString) {
      return restaurants => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        );
      };
    },
    currentRadioChange(selection) {
      this.mapList = selection;
      this.requirementId = selection.requirementId;
      console.log(this.mapList);
    },
    // 新增
    async makeSure() {
      console.log(typeof this.planTruckNumber);
      if (this.carrierId == null || this.state2 == "") {
        this.$alert("请输入承运商！");
        return;
      } else if (this.requirementId == null) {
        this.$alert("请选择需要制定计划的需求！");
        return;
      }
      let plan = {
        requirementId: this.mapList.requirementId,
        planTruckNumber: Number(this.planTruckNumber),
        carrierId: this.carrierId
      };
      try {
        await this.axios.post("/api/v1/ams/addTruckPlan", plan, {timeout: 45000}).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.$router.go(-1);
          } else {
            this.$message.error("新增失败！");
          }
        });
      }catch (e) {
        console.log(e)
        Message.error('网络异常，请刷新页面')
      }
    },
    // 返回
    cancel() {
      this.$router.go(-1);
    },
    deleteRequirement(scope) {
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.axios
            .post(
              "/api/v1/ams/deleteTruckRequirement/" + scope.row.requirementId
            )
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "拒绝成功!"
                });
                this.first.requestUrl =
                  "/api/v1/ams/getTruckRequirementList?apiId=250&requirementStatus=2&i=" +
                  new Date();
              } else {
                this.$message({
                  message: "拒绝失败",
                  type: "warning"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除操作已取消!"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.addInwardPlan {
  .carrier {
    display: inline-block !important;
    margin-left: 40%;
    .el-input {
      width: 250px;
    }
    .input {
      margin-left: -10px;
    }
    .el-form {
      padding: 10px;
    }
  }
  .truckNum {
    .el-input {
      width: 250px;
    }
  }
  .button-box {
    display: flex;
    justify-content: center;
    margin-left: 25px !important;
  }
  .materialDrawer {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-input {
      width: 320px;
    }
    .el-select {
      width: 320px;
    }
    .el-autocomplete {
      width: 320px;
    }
    .el-form {
      padding: 10px;
    }
    .truckBtn {
      width: 320px;
    }
  }
}
</style>
