//新增运输需求
<template>
  <!-- 新增运输作业页面 -->
  <div class="addSporadic">
    <page-title>运输预约</page-title>
    <div class="form-box">
        <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
        >
        <el-form-item label="发货单位">
         <el-autocomplete
          class="inline-input"
          v-model="stateSupplier"
          :fetch-suggestions="querySearchSupplier"
          placeholder="请输入发货单位名称"
          :trigger-on-focus="false"
          @select="handleSelectSupplier"
        >
        <template slot-scope="{ item }">
          <div class="name">{{ item.supplierName }}</div>
        </template>
        </el-autocomplete>
        </el-form-item>
        </el-form>
        <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
        >
        <el-form-item label="收货单位">
         <el-autocomplete
          class="inline-input"
          v-model="stateConsignee"
          :fetch-suggestions="querySearchConsignee"
          placeholder="请输入收货单位名称"
          :trigger-on-focus="false"
          @select="handleSelectConsignee"
        >
        <template slot-scope="{ item }">
          <div class="name">{{ item.consigneeCompanyName }}</div>
        </template>
        </el-autocomplete>
        </el-form-item>
        </el-form>
        <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="流向">
        <el-select v-model="orderType" placeholder="请选择">
        <el-option
          v-for="item in orderTypeList"
          :key="item.value"
          :label="item.label" 
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
        </el-form>
        <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="选择路线">
          <el-input v-model="lineName" placeholder="必填" disabled>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ondrawer(5)">浏览</el-button>
        </el-form-item>
        </el-form>
         <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="选择承运商">
         <el-autocomplete
          class="inline-input"
          v-model="stateCarrier"
          :fetch-suggestions="querySearchCarrier"
          placeholder="请输入承运商名称"
          :trigger-on-focus="false"
          @select="handleSelectCarrier"
        >
        <template slot-scope="{ item }">
          <div class="name">{{ item.carrierName }}</div>
        </template>
        </el-autocomplete>
        </el-form-item>
        </el-form>
        <!-- <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="趟次">
         <el-input
          class="inline-input"
          v-model="materialTimes"
          placeholder="趟次"
          :trigger-on-focus="false"
          @input="onInputTimes()"
        >
        </el-input>
        </el-form-item>
        </el-form> -->
        <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="drawTable" class="truckBtn"
          >浏览</el-button>
        </el-form-item>
        </el-form>
    </div>
    <div class="swtichTop">
    <span class="titile">点击浏览选择物资之前请选择物资单位！</span>
    <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>
    <!-- 物资表格 -->
    <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 == 'materialPriority'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.materialPriority"
                  @input="onInputPriority(scope.row.materialPriority)"
                ></el-input>
              </template>
              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderMaterialNumber'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderMaterialNumber"
                  @input="onInputNumber(scope.row.orderMaterialNumber)"
                ></el-input>
              </template>
              <!-- 物资重量 -->
               <template v-if="item.prop == 'orderMaterialWeight'">
                <el-input
                  v-model.number="scope.row.orderMaterialWeight"
                  @input="onInputWeight(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>
    <!-- 物资模态框 -->
    <div class="drawSty">
      <el-drawer
      title="选择物资信息"
      :visible.sync="table"
      direction="rtl"
      size="40%"
      :show-close="false"
    >
      <el-input placeholder="请输入内容" v-model="inputMaterial" clearable > </el-input
      ><el-button type="primary" class="btn" @click="onclickMaterial">
        <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 ref="materialTable" v-bind.sync="materialOptions" @radio-change="selectionChange" :drawer="aaadrawer">
        </dilTable>
      </div>
    </el-drawer>
    <!-- 模态窗口 -->
    <el-drawer :visible.sync="drawer" :direction="direction" size="30%" :before-close="handleClose">
      <el-input
        placeholder="请输入内容"
        v-model="input"
        style="margin-top: 20px"
        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 == 5">
        <dilTable
          v-bind.sync="line"
          @radio-change="currentRadioChange5"
        ></dilTable>
      </div>
    </el-drawer>
    </div>  
    <div class="button-box">
      <el-button @click="onClickCancel">返回</el-button>
      <el-button type="primary" @click="makeSure" :disabled = "disabled">确认</el-button>
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
import { sjTime,isNumber } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      aaadrawer:false,
      disabled:false,
      materialTimes:null,
      options: [],
      value: '',
      receiveName:'',
      stateCarrier:null,
      stateSupplier:null,
      stateConsignee:null,
      restaurantsConsignee:null,
      restaurantsSupplier:null,
      restaurantsCarrier:null,
      orderTypeList:[
        {
          value:12,
          label:'进厂'
        },{
          value:13,
          label:'出厂'
        }
      ],
      orderType:12,
      // 线路名称
      lineName: "",
      //线路id
      lineId: null,
      // 件数与重量的开关
      value: false,
      //物资模态框开关
      table: false,
      //物资表格表头
      tableTop: [
        {
          prop: "materialCode",
          label: "物资编码",
          width: "160",
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "materialSpecification",
          label: "规格型号",
          width: "140",
        },
        {
          prop: "materialPriority",
          label: "装卸货优先级",
          slot: true,
        },
        {
          prop: "orderMaterialWeight",
          label: "重量",
          slot: true,
        },
      ],
      // 收货单位ID
      receiveId:null,
      //承运商ID
      carrierId:null,
      //物资表格数据
      tableData: [],
      selectionList1: [],
      //物资名称
      materialName: "",
      //发货单位名称
      supplierName: "",
      //发货单位id
      supplierId: null,
      //物资id
      materialId: null,
      //承运商id
      carrierId:null,
      //是否需要打开模态窗口
      drawer: false,
      a: 1,
      direction: "rtl",
      inputMaterial:null,
      input:null,
      //物资模态框
      materialOptions:{
          requestUrl:"",
          selectionType: "radio",
      },
      line: {
        requestUrl: "",
        selectionType: "radio",
      },
      row: {},
    };
  },
  watch: {
    value() {
      if (this.value) {
        console.log(this.value)
        console.log(this.tableTop.length)
        this.tableTop.splice(this.tableTop.length - 1, 1);
        this.tableTop.push({
          prop: "orderMaterialNumber",
          label: "件数",
          slot: true,
        });
      } else {
        this.tableTop.splice(this.tableTop.length - 1, 1);
        this.tableTop.push({
          prop: "orderMaterialWeight",
          label: "重量",
          slot: true,
        });
      }
    },
    table(val){
      if(val){
        this.aaadrawer = false;
      }else{
        this.aaadrawer = true;
      }
    }
  },
  methods: {
    //关闭运输线路
    handleClose(done){
        done()
        console.log("这里")
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3"
    },
    onclickMaterial(){
        if(this.inputMaterial != null){
          this.materialOptions.requestUrl = "/api/v1/uc/selectAllMaterialName?apiId=395&index=" + this.inputMaterial
        }
        else{
          this.materialOptions.requestUrl = "/api/v1/uc/selectAllMaterialName?apiId=395"
        }
    },
    onInputTimes(){
      if(!isNumber(this.materialTimes)){
        this.$message.warning('趟次请输入数字')
      }
    },
    onInputPriority(scope){
      if(!isNumber(scope)){
        this.$message.warning('装卸货次序请输入数字')
      }
    },
    onInputWeight(scope){
      if(!isNumber(scope)){
        this.$message.warning('重量请输入数字')
      }
    },
    onInputNumber(scope){
      if(!isNumber(scope)){
        this.$message.warning('件数请输入数字')
      }
    },
    drawTable(){
      this.materialOptions.requestUrl = "/api/v1/uc/selectAllMaterialName?apiId=395" +"&test=" + new Date()
      this.selectionList1 = []
      this.table = true
    },
    //收货单位弹出层
    handleSelectConsignee(item){   
      this.consigneeId = item.consigneeId
      item.consigneeCompanyName = this.consigneeCompanyName
  
    },
    //以下是发货单位边输边查搜索
    querySearchConsignee(queryString, cb) {
      this.axios.post('/api/v1/uc/getConsigneeByLike?index='+queryString).then((res)=>{
        if(res.data.code == "200"){
          console.log(res)
          var restaurantsConsignee = res.data.data
          var results = queryString ? restaurantsConsignee.filter(this.createFilterConsignee(queryString)) :restaurantsConsignee;
            // 调用 callback 返回建议列表的数据
          cb(results);
        }
      })    
      },
    createFilterConsignee(queryString) {
        return (restaurantsConsignee) => {
          return (restaurantsConsignee.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      //以上是返回单位边输边查搜索
     //发货单位弹出层
    handleSelectSupplier(item){
      this.supplierId = item.supplierId
      item.supplierName = this.supplierName
    },
    //以下是发货单位边输边查搜索
    querySearchSupplier(queryString, cb) {
        this.axios.post('/api/v1/uc/getSupplierMesByLike?index='+this.stateSupplier).then((res)=>{
        if(res.data.code == "200"){    
          var restaurantsSupplier = res.data.data
          var results = queryString ? restaurantsSupplier.filter(this.createFilterSupplier(queryString)) :restaurantsSupplier;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      })  
      },
    createFilterSupplier(queryString) {
        return (restaurantsSupplier) => {
          return (restaurantsSupplier.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
    //承运商弹出层
    handleSelectCarrier(item){    
      this.carrierId = item.carrierId
      item.carrierName = this.stateCarrier
    },
    //以下是承运商边输边查搜索
    querySearchCarrier(queryString, cb) {
        this.axios.post('/api/v1/uc/getCarrierMesByLike?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.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
    //以上是承运商边输边查搜索
    //删除行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 返回主界面
    makeSure1() {
        if(this.tableData.length != 0){
          this.$message.error("物资已选择，请删除后重试")
          return
        }
        console.log(JSON.stringify(this.selectionList1).length)
        if(JSON.stringify(this.selectionList1).length != 2){
            this.selectionList1.materialPriority = 1
            console.log(JSON.stringify(this.selectionList1))
            this.tableData.push(this.selectionList1);  
            this.selectionList1 = [];
            this.table = false;
        }else{
          this.$message.error("请选择物资！")
        }     
    },
    //取消模态框多选
    open() {
      console.log(this.selectionList1.length)
      if (this.selectionList1.length != 0) {
        this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.selectionList1 = [];
            this.table = false;
          })
          .catch(() => {});
      } else {
        this.table = false;
      }
    },
      // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
    },
    onclick(a) {
      if (a == 5) {
        this.line.requestUrl =
          "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con=" + this.input;
      }
    },
    ondrawer(num) {
      if(getCookie("orgCode") == "biemeierchejian"){
        this.line.requestUrl =
          "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con=" + "二厂-总厂：采购内转燃料路线" 
      }else{
        this.line.requestUrl =
          "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3" + "&t=" + new Date();
      }
      this.drawer = true;
      this.a = num;
    },
    // 返回
    onClickCancel() {
      this.$router.push("/sporadicTransportAppoint");
    },
    currentRadioChange5(selection) {
      if(selection.lineName == null &&selection.lineDesk == null){
          this.lineName = ''
      }else{
          this.lineName = selection.lineName+'  '+selection.lineDesk 
          this.lineId = selection.lineId;
      }    
    },
    // 确认
    makeSure() {
        this.disabled = true
        if(this.supplierId==null||this.lineId==null||this.consigneeId==null||this.carrierId==null){
          this.disabled = false
          this.$message.warning("存在值未填写")
          return
        }else if(this.tableData.length == 0){
          this.disabled = false
          this.$message.warning("请点击浏览勾选物资")
          return
        }
        var i = 0;
        var j = 0;
        this.tableData.forEach((e) => {
          if(e.materialPriority == null){
            i++
          }else if(e.orderMaterialWeight == null){            
            j++
          }            
        })
        if(i != 0){
           this.$message.warning("装卸货优先级未填写")
           this.disabled = false
           return
        }else if(j != 0){
           this.$message.warning("物资重量未填写")
           this.disabled = false
           return
        }
        let amsOrder = {
          supplierId:this.supplierId,
          lineId:this.lineId,
          orderType:this.orderType,
          carrierId: this.carrierId,
          receiveId: this.consigneeId,
          // orderTime:this.materialTimes,
          userId:getCookie("orgCode"),
          mapList: this.tableData,
        };
        this.axios.post("/api/v1/ams/addSporadicOrders", amsOrder).then((res) => {
          if (res.data.code == "200") {
            this.$router.push("/sporadicTransportAppoint")
            this.disabled = false
          }else{
            this.disabled = false
          }
        });
      }
    },
};
</script>
<style lang="scss" scoped>
.addSporadic{
  .contractDetails {
  width: 100%;
}
.drawSty{
  .el-input{
    width: 240px;
  }
}
.swtichTop{
  display: flex;
  height: 40px;
  align-content: center;
  justify-content: center;
  padding-right:20px ;
  .titile{
    color: red;
    font-size: 14px;
  }
  .switch{
    margin-right: -60px
  }
}
.form-box {
  display: inline-block !important;
  margin-left: 488px;
  .el-input {
    width: 320px;
  }
  .el-select{
    width: 320px;
  }
  .el-autocomplete{
    width: 320px;
  }
  .el-form {
    padding: 10px;
  }
  .truckBtn{
    width: 320px;
  }
}
.button-box {
  margin-left: 45% ;
}
}
</style>