//新增运输派单
//新增运输订单
<template>
  <div class="addSaleOrderSend">
    <page-title>新增运输订单派车</page-title>
    <!-- 零星订单表的数据 -->
    <div class="saleOrder">
      <dilTable
        v-bind.sync="option"
        @radio-change="currentRadioChange"
      ></dilTable>
    </div>
    <!-- 表单选择车辆-->
    <div class="from">
        <div class="line">
        <span class="text">线路</span>
        <el-input
          v-model="lineName"
          placeholder="请选择线路"
          disabled
        ></el-input>
        <el-button type="primary" @click="onClick(1)">浏览</el-button>
      </div>
      <div class="orderType">
        <span class="text">订单类型</span>
        <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>
      </div>
      <div class="vehicle">
        <span class="text">车辆</span>
        <el-button type="primary" @click="onClick(2)">浏览</el-button>
        <span class="span"></span>
      </div>
    </div>
    <!-- 派车表格 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope.$index)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer 
      :visible.sync="lineDrawer" 
      :with-header="false"
      :destroy-on-close="true"
      direction="rtl"
      size="40%"
      :show-close="true"
      :wrapperClosable="false"
      close-on-press-escape
    >
      <el-input
        placeholder="请输入内容"
        v-model="lineText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="AddTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的车辆 -->
        <dilTable
          v-bind.sync="line"
          @radio-change="currentRadioChange2"
        ></dilTable>
      </div>
    </el-drawer>
    <!-- 车辆模态框 -->
    <el-drawer 
      :visible.sync="truckDrawer" 
      :with-header="false"
      :destroy-on-close="true"
      direction="rtl"
      size="40%"
      :show-close="true"
      :wrapperClosable="false"
      close-on-press-escape
    >
      <el-input
        placeholder="请输入内容"
        v-model="truckText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="AddTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的车辆 -->
        <dilTable
          v-bind.sync="truck"
          :isHeigth="isHeigth" :shiyHeigth="shiyHeigth" :isKuang="isKuang"
          @selection-change="currentRadioChange1"
        ></dilTable>
      </div>
    </el-drawer>
    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure" :disabled = "disabled" >确定</el-button>
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
import { getCookie } from "@/utils/util.js";
import { sjTime,isNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      shiyHeigth:140,
      isHeigth:true,
      isKuang:false,
      planId : null ,
      disabled:false,
      //线路名称
      lineId:null,
      lineName:null,
      lineText:null,
      materialId:null,
      lineDrawer:false,
      //线路的表格
      line: {
        requestUrl: "",
        selectionType: "radio",
      },
      //订单类型
      orderTypeList:[
        {
          value:10,
          label:'采购内转(铁专线-新区)'
        },{
          value:20,
          label:'采购内转(铁专线-老区)'
          }
      ],
      orderType:null,
      //已经选择车辆物资信息
      selectionList:[],
      //销售订单物资信息
      option: {
        // 表格请求数据的地址
        requestUrl:"",
        // 控制显示当选列
        selectionType: "radio",
        isPagination: false,
      },
      //是否打开选择车辆的模态框
      truckDrawer:false,
      //车辆的表格
      truck: {
        requestUrl: "",
        selectionType: "select",
      },
      tableTop: [
        {
          prop: "capacityNumber",
          label: "车牌号",
        }
      ],
      truckText:null,
      //当前多选选中的车辆
      selectTruck:[],
    };
  },
  created() {
    if (getCookie("orgCode") == "chengyunshang") {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
        getCookie("userId");
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3"
        this.option.requestUrl = "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&enableStatus=1&planStatus=2&carrierSsoId=" + getCookie("userId");
    }else if(getCookie("orgCode") == "biemeierchejian"){
         this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null + "&con="+"铁专线精煤";
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3" + "&con=" + "采购内转"
        this.option.requestUrl = "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&enableStatus=1&planStatus=2";
    } 
    else {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null;
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3"
        this.option.requestUrl = "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&enableStatus=1&planStatus=2";
    } 
  },
  methods: {
    //点击确定按钮的事件
    makeSure(){
        console.log(this.planId,this.lineId);
       console.log(this.selectionList)
        this.disabled = true
        if(this.planId == null){
          this.$message.error("未勾选计划")
          this.disabled = false
          return 
        }else if(this.lineId == null){
          this.$message.error("未选择路线") 
          this.disabled = false
          return
        }
        else if(this.selectionList.length == 0){
          this.$message.error("未选择车辆")
          this.disabled = false
          return
        }
        this.axios.post('/api/v1/oms/addPurInwardOrder',{
          materialId:this.materialId,
          lineId:this.lineId,
          orderType:this.orderType,
          orderId:this.orderId,
          planId:this.planId,
          mapList:this.selectionList,
        }).then((res)=>{
          if(res.data.code == '200'){
            this.$message.success('派车成功')
            this.disabled = false
            this.cancel();
          }
        })
    },
    //点击取消按钮的事件
    cancel(){
      this.$router.push('/purInwardTruckOrder')
    },
    //点击删除按钮删除当前点击的对象
    deleteRow(index){
      this.selectionList.splice(index,1)
    },
    //车辆模态框的确定事件
    AddTruckClick(){
        if(this.a==2){
            this.selectTruck.forEach(e => {
        this.selectionList.push({
          capacityId:e.capacityId,
          capacityNumber:e.capacityNumber,
        })
      });
      this.truckDrawer = false;
        }else{
            this.lineDrawer = false
        }
      
    },
    //车辆模态框框计算
    selectTruckClick(){
      if (getCookie("orgCode") == "chengyunshang") {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" +
          getCookie("userId") + "&index="+this.truckText;
      } else {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" + null + "&index="+this.truckText;
      }
    },
    //车辆表格
    currentRadioChange1(select){
      this.selectTruck = [];
      this.selectTruck = select;
    },
    currentRadioChange2(selection){
        this.lineId = selection.lineId
        if(selection.lineName == null &&selection.lineDesk == null){
          this.lineName = ''
        }else{
          this.lineName = selection.lineName+'  '+selection.lineDesk 
          this.lineId = selection.lineId;
      }  
    },
    //主界面表格单选
    currentRadioChange(row) {
      console.log(row)
      this.planId = row.planId
      this.materialId = row.materialId
    },
    onClick(num) {
      this.a = num
      if(num == 2){
      if(getCookie("orgCode") == "chengyunshang") {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
        getCookie("userId");
    }else if(getCookie("orgCode") == "biemeierchejian"){
         this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null + "&con="+"铁专线精煤"
    }else {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null;
    } 
        this.truckDrawer = true
        }else{
            this.lineDrawer = true
        }
    },
    //线路表格的框计算
    selectClick(){
      this.line.requestUrl = '/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con='+this.lineText;
    },
  },
};
</script>

<style lang='scss'>
.addSaleOrderSend {
  .from {
    margin-top: 20px;
    .line {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .vehicle {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .el-button {
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
      }
      .span {
        width: 70px;
      }
    }
  }
  .orderType{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-right: 130px;
    .el-select {
      padding-left: 10px;
    }
    
  }
  .tablecls{
    margin-top: 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
    margin: 20px;
    .el-button{
      width: 100px;
      margin-left: 20px;
    }
  }
}
</style>