<template>
  <!-- 定向派单接单选择路段顺序号 -->
  <div id="contractDetails">
    <page-title>选择路段顺序号和车</page-title>
    <div class="lineId from">
      <div class="materialId">
        <span class="text">选择路线：</span>
        <el-input class="input" v-model="lineNameAndRouter" disabled> </el-input>
        <el-button type="primary" class="btn" @click="tableOpen">浏览</el-button>
      </div>
    </div>
    
    <div class="lineId from">
      <div class="materialId">
        <span class="text">选择车辆：</span>
        <el-input class="input" v-model="capacityNumber" disabled> </el-input>
        <el-button type="primary" @click="drawerOpen" class="truckBtn"
          >浏览</el-button
        >
      </div>
    </div>
    
    <!-- 模态窗口 -->
    <el-drawer
      title="选择路线"
      :visible.sync="table"
      direction="rtl"
      size="50%"
      :show-close="false"
    >
      <el-input placeholder="请输入内容" v-model="input"  
      style="margin-top: 10px; margin-left: 20px;width:160px" clearable> </el-input
      ><el-button type="primary" class="btn" @click="onclick1" style="margin-left: 4px;">
        <i class="el-icon-search"></i>查询
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的路线 -->
        <dilTable
          v-bind.sync="line" @radio-change="currentRadioChange5"
        ></dilTable>
      </div>
    </el-drawer>

    <el-drawer title="选择车" :visible.sync="drawer" :direction="direction"
				:modal="false" size="30%" style="margin-top: 2.625rem;">
        <el-input placeholder="请输入内容" v-model="input"  style="margin-top:10px;margin-left:20px;width:160px" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick2()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
      <!-- 查询所有的车 -->
            <dilTable v-bind.sync="third" @radio-change="currentRadioChange"></dilTable>
            <!-- <div>
                <el-button type="primary" @click="makeSure">派发</el-button>
            </div> -->
	</el-drawer>

    <div class="button_box">
      <el-button @click="onClickCancel">返回</el-button>
      <el-button type="primary" @click="onClickConfirm">确认</el-button>
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
import { sjTime,isNumber,isIntegerNumber } from '@/utils/sharedJsFile'
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      table: false,
      drawer: false,
      // 线路名称
      lineName: "",
      //线路名称和路段
      lineNameAndRouter : "",
      //线路id
      lineId: null,
      // 车牌号
      capacityNumber: "",
      direction: "rtl",
      input: "",
      third: {
        requestUrl: "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId="+ getCookie('userId'),
        selectionType: "radio",
        mapList3: [],
      },
      line: {
        requestUrl: "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3",
        selectionType: "radio",
      },
    };
  },
  methods: {
    onclick1() {
        this.option.requestUrl =
          "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con=" + this.input;

    },
    onclick2(){
        this.third.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&index=" +
          this.input;
    },
    //打开车辆模态框
    drawerOpen(){
        this.third.requestUrl = "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId="+ getCookie('userId')+"&i=" + new Date(),
        this.drawer = true;
    },
    //打开线路模态框
    tableOpen(){
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3"+"&i=" + new Date(),
         this.table = true;
    },
    // 返回
    onClickCancel() {
      this.$router.push("/openDistribution");
    },
    currentRadioChange(selection) {
      this.capacityNumber = selection.capacityNumber;
    },
    currentRadioChange5(selection) {
      this.lineName = selection.lineName;
      this.lineNameAndRouter = selection.lineName +"  "+selection.lineDesk;
      this.lineId = selection.lineId;
    },
    // 确认
    onClickConfirm() {
      let map = {
          orderType : 1,
          lineId: this.lineId,
          dispatchId: this.$route.params.dispatchId,
          capacityNumber: this.capacityNumber,
      }
    //   console.log("map",map);
      this.axios.post("/api/v1/oms/addSaleTruckOrder", map).then((res) => {
          if (res.data.code == "200") {
            this.$router.go(-1);
            this.$message({
            type: "success",
            message: "派单成功!",
          });
          }
        });
    },
  },
};
</script>

<style lang="scss" >
.contractDetails {
  width: 100%;
}
.from {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 20px;
}
.remark {
  display: flex;
  justify-content: center;
  .text {
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .input{
    width: 250px;
    margin-right: 20px;
  }
}
.lineId {
  display: flex;
  justify-content: center;
  .text {
    display: inline-block;
    width: 170px;
    text-align: right;
  }
  .input{
    width: 380px;
    margin-right: 20px;
  }
}
.material {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .text {
    display: inline-block;
    width: 170px;
    text-align: right;
  }
  .input{
    width: 250px;
    margin-right: 20px;
  }
}
.orderType{
  display: flex;
  justify-content: center;
  .text {
    display: inline-block;
    width: 110px;
    text-align: right;
  }
  .select{
    width: 250px;
  }
  .span{
    display: inline-block;
    width: 30px;height: 10px;
  }
}
.contractTitle{
  display: flex;
  justify-content: center;
  .el-form-item{
    display: flex;
    justify-content: center;
    .el-form-item__label{
      display: flex;
      align-items: center;
    }
    .el-input{
      width: 250px;
    }
  }
}
.forwardingUnit {
  display: flex;
  justify-content: center;
  .text {
    display: inline-block;
    width: 170px;
    text-align: right;
  }
  .input{
    width: 250px;
    margin-right: 20px;
  }
}
.truckList1 {
  width: 100%;
  .truckList {
    width: 96%;
    .text {
      display: inline-block;
      width: 120px;
      text-align: right;
    }
    .truckBtn {
      width: 250px;
    }
  }
}
.button_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
}
</style>