//新增运输预约
<template>
  <!-- 新增运输作业页面 -->
  <div id="contractDetails">
    <page-title>运输预约</page-title>
    <div class="main">
      <el-divider content-position="left">新增运输预约</el-divider>
    </div>
    <div class="forwardingUnit from">
      <span class="text">发货单位：</span>
      <el-input v-model="supplierName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(2)">浏览</el-button>
    </div>
    <div class="forwardingUnit from">
      <span class="text">收货单位：</span>
      <el-input v-model="receiveName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(1)">浏览</el-button>
    </div>
    <div class="forwardingUnit from">
      <span class="text">卸货点：</span>
      <el-input v-model="unloadPointName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(4)">浏览</el-button>
    </div>
    <div class="lineId from">
      <span class="text">选择路线：</span>
      <el-input v-model="lineName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(5)">浏览</el-button>
    </div>
    <div class="truckList1">
      <div class="truckList from">
        <span class="text">选择承运商：</span>
       <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入承运商名称"
      :trigger-on-focus="false"
      @select="handleSelect"
      @input="oninput"
    >
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
  </template>
    </el-autocomplete>
      </div>
    </div>
    <div class="truckList1">
      <div class="truckList from">
        <span class="text">选择物资：</span>
        <el-button type="primary" @click=" table = true" class="truckBtn"
          >浏览</el-button
        >
      </div>
    </div>
      <div class="switch" v-if="tableData.length > 0">
      <el-tooltip placement="top">
        <div slot="content">下面表格已有数据，不能进行更改！！！</div>
        <el-switch
          v-model="value"
          active-text="重量"
          inactive-text="件数"
          disabled
        >
        </el-switch>
      </el-tooltip>
    </div>
    <div class="switch" v-else>
      <el-tooltip placement="top">
        <div slot="content">当下面表格有数据之后，将不能进行更改！！！</div>
        <el-switch v-model="value" active-text="重量" inactive-text="件数">
        </el-switch>
      </el-tooltip>
    </div>
    <!-- 物资表格 -->
    <div class="truckListTable">
    <div class="selectionTable">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          align="center"
          show-overflow-tooltip
        >
          <template slot="scope" v-if="item.label !== '件数'">
            <span>{{ item.label }}</span>
          </template>
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">
              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderMaterialNumber'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderMaterialNumber"
                ></el-input>
              </template>
              <!-- 物资重量 -->
               <template v-if="item.prop == 'orderMaterialWeight'">
                <el-input
                  v-model.number="scope.row.orderMaterialWeight"
                ></el-input>
              </template>
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
    <!-- 物资模态框 -->
    <el-drawer
      title="选择物资信息"
      :visible.sync="table"
      direction="rtl"
      size="35%"
      :show-close="false"
    >
      <el-input placeholder="请输入内容" v-model="input" clearable> </el-input
      ><el-button type="primary" class="btn" @click="onclick">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button @click="open">取消</el-button>
      <el-button type="primary" @click="makeSure1">确定</el-button>
      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable v-bind.sync="materialOptions" @selection-change="selectionChange">
        </dilTable>
      </div>
    </el-drawer>
    <!-- 模态窗口 -->
    <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(a)"
        style="margin-bottom: 0.9375rem"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
       <div v-show="a == 1">
        <dilTable
          v-bind.sync="receiveOptions"
          @radio-change="currentRadioChange1"
        ></dilTable>
      </div>
      <div v-show="a == 2">
        <dilTable
          v-bind.sync="secend"
          @radio-change="currentRadioChange2"
        ></dilTable>
      </div>
      <div v-show="a == 3">
        <dilTable
          v-bind.sync="third"
          @selection-change="currentRadioChange3"
        ></dilTable>
      </div>
      <div v-show="a == 4">
        <dilTable
          v-bind.sync="unloadPoint"
          @radio-change="currentRadioChange4"
        ></dilTable>
      </div>
      <div v-show="a == 5">
        <dilTable
          v-bind.sync="line"
          @radio-change="currentRadioChange5"
        ></dilTable>
      </div>
    </el-drawer>
    <div class="button_box">
      <el-button @click="onClickCancel">返回</el-button>
      <el-button type="primary" @click="makeSure">确认</el-button>
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
export default {
  components: { PageTitle },
  data() {
    return {
      receiveName:'',
      state2:null,
      restaurants: [],
      orderType:12,
      // 线路名称
      lineName: "",
      //线路id
      lineId: null,
      // 件数与重量的开关
      value: false,
    //   物资模态框开关
      table: false,
      // 物资表格表头
      tableTop: [
        {
          prop: "materialCode",
          label: "物资编码",
          width: "160",
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140",
        },
        {
          prop: "orderMaterialNumber",
          label: "件数",
          slot: true,
        },
      ],
      // 收货单位ID
      receiveId:null,
      //承运商ID
      carrierId:null,
      //物资表格数据
      tableData: [],
      selectionList1: [],
      //物资名称
      materialName: "",
      //发货单位名称
      supplierName: "",
      //发货单位id
      supplierId: null,
      //物资id
      materialId: null,
      //是否需要打开模态窗口
      drawer: false,
      //卸货点id
      unloadPointId: "",
      //卸货点名称
      unloadPointName: "",
      a: 1,
      direction: "rtl",
      input: "",
      //物资模态框
      materialOptions:{
          requestUrl:
            "/api/v1/uc/queryMaterialByLike?apiId=395&startNum=" + '0801',
           selectionType: "select",
      },
      secend: {
        requestUrl:
          "/api/v1/uc/querySupplierByLike?apiId=247",
        selectionType: "radio",
        mapList2: [],
      },
      receiveOptions:{
        requestUrl:
          "/api/v1/uc/queryConsigneeByLike?apiId=396",
          selectionType:"radio",
      },
      third:{
        requestUrl:
        "/api/v1/uc/getCarrierMesByLike?apiId=244",
        selectionType:"radio",
        carriermapList:[]
      },
      unloadPoint: {
        requestUrl: "/api/v1/uc/getUnloadingMesByLike?apiId=374",
        selectionType: "radio",
        unloadMapList:[]
      },
      line: {
        requestUrl: "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3",
        selectionType: "radio",
      },
      row: {},
    };
  },
  watch: {
    value() {
      if (this.value) {
        this.tableTop.splice(this.tableTop.length - 1, 1);
        this.tableTop.push({
          prop: "orderMaterialWeight",
          label: "重量",
          slot: true,
        });
      } else {
        this.tableTop.splice(this.tableTop.length - 1, 1);
        this.tableTop.push({
          prop: "orderMaterialNumber",
          label: "件数",
          slot: true,
        });
      }
    },
  },
  methods: {
    handleSelect(item){
      this.carrierId = item.carrierId
      item.carrierName = this.state2
    },
    oninput(){
      this.axios.post('/api/v1/uc/getCarrierMesByLike?index='+this.state2).then((res)=>{
        if(res.data.code == "200"){
          this.restaurants = res.data.data
        }
      })
    },
    //搜索
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        console.log(this.restaurants,"this.restaurants");
        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()) === 0);
        };
      },
    //删除行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 返回主界面
    makeSure1() {
      console.log(this.selectionList1)     
      this.selectionList1.forEach((e) => {
        var addmap = {
          materialCode: e.materialCode,
          materialName: e.materialName,
          Specification: e.materialSpecification+e.materialModel,
          orderMaterialWeight: null,        
          materialId: e.materialId,
        };
        this.tableData.push(addmap);
        this.selectionList1 = [];
        this.table = false;
      }); 
    },
    //取消模态框多选
    open() {
      if (this.selectionList1.length != 0) {
        this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.selectionList1 = [];
            this.table = false;
          })
          .catch(() => {});
      } else {
        this.table = false;
      }
    },
    onClick(index) {
      this.tableData.splice(index, 1);
    },
      // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
    },
    onclick(a) {
      if (a == 1) {
        this.frist.requestUrl =
          "/api/v1/uc/queryAPOMaterialByLike?apiId=244&startNum=050&index=" +
          this.input;
      } else if (a == 2) {
        this.secend.requestUrl =
          "/api/v1/uc/getSupplierMesByMaterialId?apiId=247&materialId=" +
          this.materialId +
          "&index=" +
          this.input;
      } else if (a == 3) {
        this.third.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&index=" +
          this.input;
      } else if (a == 4) {
        this.third.requestUrl =
          "/api/v1/uc/getUnloadingMesByLike?apiId=347&index=" + this.input;
      } else if (a == 5) {
        this.option.requestUrl =
          "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con=" + this.input;
      }
    },
    ondrawer(num) {
      this.drawer = true;
      this.a = num;
    },
    // 返回
    onClickCancel() {
      this.$router.push("/importedFuel/transportReserveRan");
    },
    currentRadioChange1(selection) {
      console.log(selection);
      this.receiveName = selection.consigneeCompanyName;
      this.receiveId = selection.consigneeId;
    },
    currentRadioChange2(selection) {
      this.supplierName = selection.supplierName;
      this.supplierId = selection.supplierId;
    },
    currentRadioChange4(selection) {
      this.unloadPointId = selection.warehouseId;
      this.unloadPointName = selection.warehouseName;
    },
    currentRadioChange5(selection) {
      this.lineName = selection.lineName;
      this.lineId = selection.lineId;
    },
    currentRadioChange3(selection) {
      this.carriermapList = [];
      this.carriermapList = selection;
    },
    // 确认
    makeSure() {
      console.log(this.tableData)
        let amsOrder = {
          supplierId:this.supplierId,
          unloadPointId:this.unloadPointId,
          lineId:this.lineId,
          orderType:12,
          carrierId: this.carrierId,
          receiveId: this.receiveId,
          mapList: this.tableData,
        };
        console.log(amsOrder);
        //debugger
        this.axios.post("/api/v1/ams/addSporadicOrders", amsOrder).then((res) => {
          if (res.data.code == "200") {
            this.$router.push("/steelReturn/steelTransportAppoint");
          }
        });
      }
    },
};
</script>

<style lang="scss" >
.contractDetails {
  width: 100%;
}
.from {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
.remark {
  .text {
    display: inline-block;
    width: 5.625rem;
    text-align: right;
  }
}
.lineId {
  .text {
    display: inline-block;
    width: 10rem;
    text-align: right;
  }
}
.material {
  .text {
    display: inline-block;
    width: 10rem;
    text-align: right;
  }
}
.orderType{
  .text{
    display: inline-block;
    width: 5.625rem;
    text-align: right;
  }
}
.switch {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6.875rem;
}
.forwardingUnit {
  .text {
    display: inline-block;
    width: 10rem;
    text-align: right;
  }
}
.truckList1 {
  width: 100%;
  .truckList {
    width: 96%;
    .text {
      display: inline-block;
      width: 9.375rem;
      text-align: right;
    }
    .truckBtn {
      width: 17.5rem;
    }
  }
}
.button_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.25rem;
}
</style>