// 分解计划
<template>
	<div id="endMaintenance">
		<page-title>分解计划</page-title>
    <div class="main">
			<span class="text">异地库计划</span>
			<span class="a"></span>
		</div>
    <dilTable v-bind.sync="six" @radio-change="currentRadioChange9">
		</dilTable>
    <div style="margin-left:0.625rem">
    <div class="main">
			<span class="text">选择线路</span>
			<span class="a"></span>
		</div>
    <dilTable v-bind.sync="zero" @radio-change="currentRadioChange1">
		</dilTable>
		<div class="main">
			<span class="text">分解</span>
			<span class="a"></span>
		</div>
    <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="materialName" title="物资名称"			
			>
      <template #edit="{ row }">
      <vxe-input v-model="row.materialName" type="text" disabled></vxe-input>
      </template>
			</vxe-table-column>
      <vxe-table-column field="materialCode" title="物资编码"			
			>
      <template #edit="{ row }">
      <vxe-input v-model="row.materialCode" type="text" disabled></vxe-input>
      </template>
			</vxe-table-column>
			<vxe-table-column field="materialWeight" title="物资重量"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.materialWeight" type="text"></vxe-input>
      </template>  
			</vxe-table-column>
      <vxe-table-column field="materialNumber" title="物资件数"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.materialNumber" type="text" ></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="300">
            <template #default="{ row }">
              <vxe-button status="primary" @click="drawerCapacity(row)">选择车牌</vxe-button>
              <vxe-button status="primary" @click="drawerMaterial(row)">选择物资</vxe-button>
              <vxe-button status="danger" @click="removeRow(row)">删除</vxe-button>
            </template>
          </vxe-column>
		</vxe-table>
    <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="onclickdriver()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
     <dilTable v-bind.sync="second" @radio-change="currentRadioChange" ></dilTable>    
    </el-drawer>
      <el-drawer
      :visible.sync="drawer1"
      :direction="direction1"
      :before-close="handleClose1"
      size="30%"
    >
      <el-input placeholder="请输入内容" v-model="inputText"  style="margin-top:10px;margin-left:20px" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclickMaterial()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
     <dilTable v-bind.sync="first" @radio-change="currentRadioChange4" ></dilTable>    
    </el-drawer>
		
    	<div class="main">
			<span class="text">选择订单类型</span>
			<span class="a"></span>
		</div>
    <div class="form-box" style="margin-left: 16rem">
        <dil-form :formId="318" v-model="form"></dil-form>
      </div>
		<div class="" style="margin-left:40rem">
			<el-button type="primary" @click="makeSure">确认分解</el-button>
			<el-button type="primary" @click="cancel">返回</el-button>
		</div>
	</div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
export default {
  components: {
    PageTitle,
  },
  data() {
    return {
      tableData:[],
      direction: "rtl",
      direction1: "rtl",
      input:'',
      inputText:'',
      selectRow:null,
      materialRow:null,
      drawer:false,
      drawer1:false,
      purchaseOrderNo:"",
      planNo:"",
      requirementNo:"",
     
      materialWeight:null,
      materialNumber:null,
      carrierId:null,
      form: {},
      first:{
       requestUrl: "/api/v1/ams/getMaterialMesByDayPlanId?apiId=362&dayplanId="+this.$route.params.dayPlanId,
       selectionType:"radio",
       mapList4:[]
      },
      six:{
        requestUrl:"/api/v1/ams/getRailOffsetDayplanId?apiId=183&dayPlanId="+this.$route.params.dayPlanId,
      },
      second:{
        requestUrl:"/api/v1/oms/getCapacityAndDriverList?apiId=246",
        selectionType: "radio",
        mapList1:[]
      },
      zero:{
        requestUrl:"/api/v1/rms/getAllLineDesk?apiId=249",
        selectionType: "radio",
        mapList0:[]
      }
    };
  },
  mounted() {
    this.information();
  },

  methods: {
    drawerCapacity(row){ 
      this.drawer = true;
      this.selectRow = row
      console.log(row.purchaseOrderNo)
    },
    drawerMaterial(row){
      this.drawer1 = true;
      this.materialRow = row,
      console.log(row)
      console.log(this.drawer1)
    },
    onclickdriver(){
        this.second.requestUrl = "/api/v1/oms/getCapacityAndDriverList?apiId=246&con="+this.input
    },
    currentRadioChange(selection){
      this.mapList1=selection,
      this.selectRow.capacityNumber = this.mapList1.capacityNumber
    },
    currentRadioChange1(selection){
      this.mapList0=selection
      console.log(this.mapList0.lineId)
    },
    currentRadioChange4(selection){
      this.mapList4 = selection
      console.log(this.mapList4)
      this.materialRow.materialName = this.mapList4.materailName,
      this.materialRow.materialCode = this.mapList4.materialCode
    },
   handleClose(done){
      done();
    },
    sumNum (list, field) {
              let count = 0
              list.forEach(item => {
                count += Number(item[field])
              })
              return count
    },
    information() {
      //查看需求详情
    },
    async insertEvent (row) {
              const $table = this.$refs.xTable
              const record = {
                purchaseOrderNo: this.purchaseOrderNo,         
              }
              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)
            },
    // 修改
    makeSure() {
      console.log(this.$refs.xTable.getInsertRecords())
      console.log(this.form)
      let BmsTrainFreight = {
          dayPlanId:this.$route.params.dayPlanId,
          lineId:this.mapList0.lineId,
          orderType:this.form.orderType,
          carrierId:this.carrierId,
          mapList:this.$refs.xTable.getInsertRecords()
      };
      console.log(BmsTrainFreight)
      this.$axios
        .post("/api/v1/oms/apportionInwardOffsetOrder", BmsTrainFreight)
        .then((res) => {
          if (res.data.code == 200) {
            this.$router.go(-1);
            this.$message({
              type: "success",
              message: "分解成功!",
            });
            
          } else {
            this.$message.error("分解失败！");
          }
        });
    },
    // 返回
    cancel() {
      console.log(this.sumNum(this.$refs.xTable.getInsertRecords(), 'materialWeight'))
      // this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
</style>
