//
<template>
  <div class="admin">
    <template>
      <div class="admin1">
        <el-tabs v-model="activeName">
          <el-tab-pane label="提货单" name="first">
            <div class="admin2">
              <div class="carrier from">
                <el-form
                  :inline="true"
                  class="demo-form-inline"
                  label-width="80px"
                >
                  <el-form-item label="车牌号:">
                    <el-autocomplete
                      class="inline-input"
                      v-model="capacityName"
                      :fetch-suggestions="querySearchCapacity"
                      placeholder="车牌号"
                      :trigger-on-focus="false"
                      @select="handleSelectCapacity"
                    >
                      <template slot-scope="{ item }">
                        <div class="name">{{ item.capacityNumber }}</div>
                      </template>
                    </el-autocomplete>
                  </el-form-item>
                </el-form>
              </div>
              <div class="poundNo from">
                <span class="text">运输订单号:</span>
                <el-input v-model="orderNumber" disabled></el-input>
              </div>
              <div
                class="material from"
                v-for="(item, index) in materialList"
                :key="index"
                style="margin-left:430px"
              >
                <el-form inline>
                  <el-form-item label="物资名称">
                    <el-input
                      v-model="item.materialName"
                      placeholder="物资名称"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="物资件数">
                    <el-input
                      v-model="item.materialNum"
                      placeholder="物资件数"
                      @blur="onblur(item)"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div class="material from">
                <span class="text">发货单位:</span>
                <el-input v-model="shipperName" disabled></el-input>
              </div>
              <div class="material from">
                <span class="text">收货单位:</span>
                <el-input v-model="consigneeCompanyName" disabled></el-input>
              </div>
              <div class="material from">
                <span class="text">收货地址:</span>
                <el-input v-model="receiveAddressName" disabled></el-input>
              </div>
              <div class="material from">
                <span class="text">截止日期:</span>
                <el-input v-model="saleDateOfReceipt" disabled></el-input>
              </div>
            </div>
            <div class="button_box">
              <el-button
                type="primary"
                @click="onClickConfirm"
                :disabled="disabled"
                >确认</el-button
              >
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </div>
</template>
<script>
import { isNumber } from "@/utils/sharedJsFile";
var i = 0;
export default {
  data() {
    return {
      orderNumber: null,
      activeName: "first",
      capacityName: null,
      stateCapacity: null,
      materialList: [],
      capacityId: null,
      materialId: null,
      disabled: false,
      orderId: null,
      orderList: [],
      materialNum: null,
      saleDateOfReceipt: null,
      consigneeCompanyName: null,
      receiveAddressName: null,
      shipperName: null,
      materialList1: []
    };
  },
  methods: {
    //运力弹出层
    handleSelectCapacity(item) {
      console.log(item);
      this.capacityId = item.capacityId;
      this.capacityName = item.capacityNumber;
      this.axios
        .get("/api/v1/oms/getSteelOrderNum?capacityId=" + this.capacityId)
        .then(res => {
          if (res.data.code == "200") {
            console.log(res.data.data);
            this.orderList = res.data.data;
            this.orderNumber = res.data.data[0].orderNumber;
            this.orderId = res.data.data[0].orderId;
            this.changeOrderNo();
          }
        });
    },
    changeOrderNo() {
      this.axios
        .get("/api/v1/oms/getMesToSteelDepartment?orderId=" + this.orderId)
        .then(res => {
          this.materialList = res.data.data.materialMes;
          this.materialList1 = res.data.data.materialMes;
          console.log(this.materialList);
          this.saleDateOfReceipt = res.data.data.saleDateOfReceipt;
          this.consigneeCompanyName = res.data.data.consigneeCompanyName;
          this.receiveAddressName = res.data.data.receiveAddressName;
          this.shipperName = res.data.data.shipperName;
          this.saleOrderId = res.data.data.saleOrderId;
        });
    },
    changeMaterial() {
      console.log(this.materialId);
      this.materialList.forEach(e => {
        if (e.materialId == this.materialId) {
          this.materialNum = e.materialNum;
          this.maxMaterialNum = e.materialNum;
        }
      });
    },
    onblur(item) {
      if (!isNumber(item.materialNum)) {
        this.$message.error("请输入数字！");
        this.materialList1.forEach(e => {
          if (item.materialId == e.materialId) {
            item.materialNum = e.materialNum;
          }
        });
      } else {
        this.materialList1.forEach(e => {
          if (item.materialId == e.materialId) {
            if (item.materialNum > e.materialNum) {
              this.$message.error("修改数量不得大于计划数");
            }
          }
        });
      }
    },
    //以下是运力边输边查搜索
    querySearchCapacity(queryString, cb) {
      if (queryString.length < 3) {
        return;
      }
      this.axios
        .get("/api/v1/uc/getCapacityNumber?index=" + queryString)
        .then(res => {
          if (res.data.code == "200") {
            var restaurantsCarrier = res.data.data;
            console.log(restaurantsCarrier, "restaurantsCarrier");
            var results = queryString
              ? restaurantsCarrier.filter(this.createFilterCarrier(queryString))
              : restaurantsCarrier;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilterCarrier(queryString) {
      return restaurantsCarrier => {
        return (
          restaurantsCarrier.capacityNumber
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },

    materialCompareTo(e) {
      this.materialList1.forEach(e2 => {
        console.log(e2.materialId);
        if (e.materialId == e2.materialId) {
          return e.materialNum;
        }
      });
    },
    //以上是运力边输边查搜索
    onClickConfirm() {
      var i = 0;
      this.materialList.forEach(e => {
        if (!isNumber(e.materialNum) || e.materialNum == 0) {
          this.$message.error("件数不符合要求");
          i++;
        }
      });
      if (i != 0) {
        return;
      }
      // //判断不能超过最大值
      // this.materialList.forEach(e => {
      //   for (let j = 0; j < this.materialList1.length; j++) {
      //     if (
      //       this.materialList1[j].materialId == e.materialId &&
      //       this.materialList1[j].materialNum == e.materialNum
      //     ) {
      //       this.$message.error("修改数量不得大于计划数量");
      //       i++;
      //     }
      //   }
      // });
      // console.log(i);
      // if (i != 0) {
      //   return;
      // }
      let updateNumMap = {
        orderId: this.orderId,
        mapList: this.materialList,
        saleOrderId: this.saleOrderId
      };
      this.axios
        .post("/api/v1/oms/updateMaterialMes", updateNumMap)
        .then(res => {
          console.log(res);
          if (res.data.code == "200") {
            this.$message.success("修改物资数量成功");
          } else {
            this.$message.error("新增失败请联系管理员");
          }
        });
    }
  }
};
</script>
<style lang="scss">
.admin {
  .admin1 {
    margin-top: 40px;
    margin-left: 40px;
    .switch {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      color: aqua;
    }
    .button_box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100px;
    }
    .admin2 {
      margin-top: 40px;
      .from {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .carrier {
        display: flex;
        justify-content: center;
        align-items: center;
        .el-form-item {
          text-align: right;
        }
        .el-autocomplete {
          width: 250px;
        }
      }
      .material {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
      .poundNo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
      .block {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 100px;
        .el-input {
          width: 250px;
        }
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
      }
      .truckCalFirst {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
      .truckCalSecond {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
      .secondWeight {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
      .firstWeight {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
      .netWeight {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
          display: inline-block;
          width: 170px;
          text-align: right;
        }
        .el-input {
          width: 250px;
        }
      }
    }
  }
}
</style>
