<template>
  <!-- 分解计划页面 -->
  <div id="contractDetails">
    <page-title>分解计划作业</page-title>

    <div class="main">
      <span class="text">待分解的计划</span>
      <span class="a"></span>
    </div>
    <div>
      <dilTable
        v-bind.sync="option"
        v-model="table1"
        @change="handleCheckedCitiesChange"
        ref="table"
      >
      </dilTable>
    </div>
    <div class="main">
      <span class="text">分解计划</span>
      <span class="a"></span>
    </div>
    <div style="margin-left:0.625rem">
			<vxe-toolbar>
				<template #buttons>
					<vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
				</template>
			</vxe-toolbar>
		</div>
		<vxe-table v-model="tableData" keep-source border resizable show-overflow show-footer ref="xTable"
			max-height="400" :footer-method="footerMethod" :data="tableData"
			:edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
			@edit-closed="editClosedEvent"
      @edit-actived="editActivedEvent">
			<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
			<vxe-table-column field="purchaseOrderNo" title="采购订单号" >
        <template #edit="{ row }">
              <vxe-input v-model="row.purchaseOrderNo" type="text" disabled></vxe-input>
        </template>
			</vxe-table-column>
			<vxe-table-column field="materialName" title="物资名称"		
			>
      <template #edit="{ row }">
      <vxe-input v-model="row.materialName" type="text" disabled></vxe-input>
      </template>
			</vxe-table-column>
			<vxe-table-column field="orderMaterialWeight" title="物资重量"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.orderMaterialWeight" type="text"></vxe-input>
      </template>  
			</vxe-table-column>

      	<vxe-table-column field="lineName" title="运输线路"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.lineName" type="text" disabled></vxe-input>
      </template>  
			</vxe-table-column> -->
      	<vxe-table-column field="unloadPoint" title="卸货点"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.unloadPoint" type="text" disabled></vxe-input>
      </template>  
			</vxe-table-column>
       <vxe-table-column field="capacityNumber" title="车牌号"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.capacityNumber" type="text" disabled></vxe-input>
      </template>      
			</vxe-table-column>
		    <vxe-column title="操作" width="360">
            <template #default="{ row }">
              <vxe-button status="primary" @click="clickLineRow(row)">选择路线</vxe-button>
              <vxe-button status="primary" @click="clickPointRow(row)">卸货点</vxe-button>
              <vxe-button status="primary" @click="drawerCapacity(row)">选择车牌</vxe-button>
              <vxe-button status="danger" @click="removeRow(row)">删除</vxe-button>
            </template>
          </vxe-column>
		</vxe-table>
    <!-- //卸货点 -->
    <el-drawer
      :visible.sync="drawerPoint"
      :direction="direction"
      :before-close="handleClose"
      size="30%"
    >
      <el-input placeholder="请输入内容" v-model="input"  style="margin-top:10px;margin-left:20px" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
     <dilTable v-bind.sync="unloadPoint" @radio-change="currentRadioChange20" ></dilTable>    
    </el-drawer>
    <!-- //线路 -->
    <el-drawer
      :visible.sync="drawerLine"
      :direction="direction"
      :before-close="handleClose"
      size="30%"
    >
      <el-input placeholder="请输入内容" v-model="input"  style="margin-top:10px;margin-left:20px" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
     <dilTable v-bind.sync="zero" @radio-change="currentRadioChange30" ></dilTable>    
    </el-drawer>
    <!-- //运力 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="30%"
    >
      <el-input placeholder="请输入内容" v-model="input"  style="margin-top:10px;margin-left:20px" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
    <dilTable v-bind.sync="option2" @radio-change="currentRadioChange1" ></dilTable>
    </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";

export default {
  components: { PageTitle },
  data() {
    return {
      drawerLine:false,
      drawerPoint:false,
      lineName:'',
      unloadPointName:"",
      warehouseName:"",
      unloadPointId:"",
      tableData:[],
      direction: "rtl",
      input:'',
      selectRowLine:null,
      selectRow:null,
      selectRowPoint:null,
      drawer:false,
      purchaseOrderNo:"",
      planNo:"",
      planId:null,
      purchaseOrderId:null,
      shipName:"",
      materialName:"",
      materialWeight:null,
      lineId:null,
      materialId:null,
      option: {
        // 表格请求数据的地址
        requestUrl:
          "/api/v1/ams/getDecomposedPlan?planId=" + this.$route.params.planId + "&apiId=82"+"&planStatus=0",
        // 控制显示当选列
      },
      option2: {
        // 表格请求数据的地址
        requestUrl:
          "/api/v1/oms/getAllCapacity?apiId=85",
        // 控制显示当选列
        selectionType: "radio",
      },
       zero:{
        requestUrl:"/api/v1/rms/getAllLineDesk?apiId=249",
        selectionType: "radio",
      },
       unloadPoint: {
        requestUrl: "/api/v1/uc/getUnloadingMesByLike?apiId=374",
        selectionType: "radio",
        mapListPoint:[]
      },
      // 表单
      form1: {},
      // 表格
      table1: {},
      table2:{},
      contractId: "",
      inf: {},
      inf2: {},
	    adb:{}
    };
  },
  mounted() {
    this.information()
  },
  methods: {
     drawerCapacity(row){ 
      this.drawer = true;
      this.selectRow = row
    },
    clickLineRow(row){  
      this.drawerLine = true,
      this.selectRowLine = row   
    },
    clickPointRow(row){
      this.drawerPoint = true,
      this.selectRowPoint = row
    },
    //选择卸货点
     currentRadioChange20(selection){
      this.selectRowPoint.unloadPoint = selection.warehouseName
    },
    //选择运输路径
    currentRadioChange30(selection){ 
        this.selectRowLine.lineName = selection.lineName
        this.lineId = selection.lineId
        this.lineName = selection.lineName
    },
    //选择车牌号
    currentRadioChange1(selection){
        this.selectRow.capacityNumber = selection.capacityNumber
    },
    information() {
      //查看需求详情
      this.axios
        .post(
          "/api/v1/ams/getDecomposedPlan?planId=" + this.$route.params.planId + "&apiId=82"+"&planStatus=0"
        )
          .then((res) => {    
            const planRow = res.data.data.list    
            console.log(planRow)
            this.purchaseOrderNo = planRow[0].purchaseOrderNo,          
            this.planNo = planRow[0].planNo,
            this.planId = planRow[0].planId,
            this.purchaseOrderId = planRow[0].purchaseOrderId,
            this.materialId=planRow[0].materialId,
            this.shipName = planRow[0].resultForeignShipName,
            this.materialName = planRow[0].materialName,
            this.materialWeight = planRow[0].materialUnallocatedWeight
        });
    },
     sumNum (list, field) {
              let count = 0
              list.forEach(item => {
                count += Number(item[field])
              })
              return count
    },
     async insertEvent (row) {
              if(this.materialWeight - (this.sumNum(this.$refs.xTable.getInsertRecords(), 'orderMaterialWeight')) <= 0){
                this.$alert("不能再新增物资了")
              }
              else{
              const $table = this.$refs.xTable
              const record = {
                purchaseOrderNo: this.purchaseOrderNo,
                materialName:this.materialName,
                lineName:this.lineName,
                orderMaterialWeight:this.materialWeight - (this.sumNum(this.$refs.xTable.getInsertRecords(), 'orderMaterialWeight'))          
              }
              const { row: newRow } = await $table.insertAt(record, row)
              await $table.setActiveCell(newRow, 'name')
              }
             
            },
    //删除行
    async removeRow (row) {
              const $table = this.$refs.xTable
              await $table.remove(row)
            },
    handleCheckedCitiesChange(value) {
      console.log(value);
    },
    // 返回
    onClickCancel() {
      this.$router.go(-1);
    },
    // 确认
    onClickConfirm() {      
        let adb = {
        planId: this.planId,
        purchaseOrderId: this.purchaseOrderId,
        lineId:this.lineId,
        materialId: this.materialId,
        mapList:this.$refs.xTable.getInsertRecords(),
        orderType: 8
      };
      this.axios.post("/api/v1/oms/addInputOrder", adb)
        .then(() => {
        this.$message({
                type: "success",  
                message: "分解成功!",
              });
              this.$router.go(0);
          });
        
      }
      }
};
</script>
<style lang="scss" scoped>
//@import "@/styles/appoint/contract/ContractInsert.scss";
</style>