// 新增倒垛作业
<template>
    <div class="steel_restackAdd">
        <PageTitle>返回</PageTitle>
        <div class="search">
            <div class="warehouse">
                <span>仓库名称：</span>
                <el-select v-model="value1" placeholder="请选择" @change="onchange1()">
                    <el-option
                    v-for="(item,i) in options1"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="stack">
                <span>垛位：</span>
                <el-select v-model="value2" placeholder="请选择" @change ="onchange2()">
                    <el-option
                        v-for="(item,i) in options2"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="gradationnumber">
                <span>层次：</span>
                <el-select v-model="value3" placeholder="请选择" @change="onchange3()">
                    <el-option
                    v-for="(item,i) in options3"
                    :key="i"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>

                <el-button type="primary" class="btn" @click="selectMaterial()">新增倒垛单</el-button>
            </div>
        </div>
        <el-drawer
            :visible.sync="table"
            direction="rtl"
            size="50%"
            :show-close="false"
            >
            <el-button @click="open">取消</el-button>
            <el-button type="primary" @click="makeSure1">新增</el-button>
            <div class="warehouse">
                <span>仓库名称：</span>
                <el-select v-model="value1" placeholder="请选择" @change="onchange1()">
                    <el-option
                    v-for="(item,i) in options1"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="stack">
                <span>垛位：</span>
                <el-select v-model="value2" placeholder="请选择" @change ="onchange2()">
                    <el-option
                        v-for="(item,i) in options2"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="gradationnumber">
                <span>层次：</span>
                <el-select v-model="value3" placeholder="请选择" @change="onchange3()">
                    <el-option
                    v-for="(item,i) in options3"
                    :key="i"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="stack">
                <span>新垛位：</span>
                <el-select v-model="value5" placeholder="请选择" @change ="onchange5()">
                    <el-option
                        v-for="(item,i) in options5"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="tablecls">
                <!-- 查询所有的物资 -->
                <dilTable v-bind.sync="option" @selection-change="selectionChange1">
                    <!-- 操作列 -->
                <el-table-column fixed="right" label="件数" prop="quantity" width="100">
                <template slot-scope="scope">
                    <el-input
                    class="textinput1"
                    v-model.number="scope.row.quantity"
                    ></el-input>
                </template>
                </el-table-column>
                </dilTable>
            </div>
        </el-drawer> 
        <div class="table" >
            <dilTable v-bind.sync="options11"  @selection-change="selectionChange"></diltable>
        </div>
            <div class="search">
            <div class="warehouse">
                <span>仓库名称：</span>
                <el-select v-model="value1" disabled  placeholder="请选择" @change="onchange4()">
                    <el-option
                    v-for="(item,i) in options1"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="stack">
                <span>新垛位：</span>
                <el-select v-model="value5" placeholder="请选择" @change ="onchange5()">
                    <el-option
                        v-for="(item,i) in options5"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
     
        </div>
         <div class="table">
            <dilTable v-bind.sync="options" ></diltable>
        </div>
    </div>  
</template>

<script>
// import PageTitle from "@/components/Page/Title";
export default {
  data(){
    return{
      table:false,
      sselectionList1: [],
      form1:{},
      inputText:"",
      options11:{
        // first请求数据的地址
        requestUrl: "/api/v1/wms/getWmspRestackMakeResultList?apiId=106",
        selectionType: "select",
      },
      options:{
        // first请求数据的地址
      requestUrl: "/api/v1/wms/getWmspRestackMakeResultList?apiId=106",
      },
        //仓库
        options1:[],
        // 选中的仓库
        value1:'',
        // 垛位
        options2:[],
        // 选中垛位
        value2:'',
        // 层次
        options3:[],
        // 选中的层次
        value3:'',
        // 新增下拉框
        // 垛位
        options5:[],
        // 选中垛位
        value5:'',
        inf: {},
        // 每个物资型号的件数
        quantity:[],
        option: {
            // 表格请求物资型号
            requestUrl: "/api/v1/wms/getMaterialTypeList?warehouseid="+this.value1+"&stackingId="+this.value2+"&gradtionNumber="+this.value3+"&apiId=437",
            // 控制显示多选列
            selectionType: "select",
        },
    }
  },
    mounted(){
        this.initialization();
        //新增下拉框方法
        // this.initialization1();
    },
     methods: {
        //  创建选择物资型号的方法
        selectMaterial(){
            this.table =true
            this.option.requestUrl="/api/v1/wms/getMaterialTypeList?warehouseid="+this.value1+"&stackingId="+this.value2+"&gradtionNumber="+this.value3+"&apiId=437";
        },
         // 返回选中的物资信息
        selectionChange1(selection) {
            this.selectionList1 = [];
            this.selectionList1 = selection;
        },
         // 新增倒垛单
        makeSure1() {
            this.table = false;
            let maps =this.selectionList1;
            console.log("maps",maps)
            if(
                maps[0]==null 
            )this.$message.error("存在空值！");
            else
            this.axios
                .post("/api/v1/wms/createRestackMakeResult?keeperId=2&beforeLevel="+this.value3+"&afterStackingId="+this.value5+"&afterWarehouseId="+this.value1+"&afterBeforeStackingId="+this.value2+"&resultRemark="+"",maps)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                        type: "success",
                        message: "新增成功!",
                        });
                        this.$router.go(-1);
                    }else{
                        this.$message.error("新增失败,可能存在重复！");
                    }
                    });
        },
         open() {
            if (this.selectionList1.length != 0) {
                this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                    this.selectionList1 = [];
                    this.table = false;
                })
                .catch(() => {});
            } else {
                this.table = false;
            }
        },
        //  添加倒垛单
        toInsert() {
        this.$router.push({
          name: 'steel_restackTransfer',
          params: {
              mapValue:{
                valus:"ssss",
                cangku:this.value1,
                 duowei:this.value2,
                 cengci:this.value3
              }
              
          }
        })
        },
         //初始化选择仓库垛位
     initialization(){
         this.axios.get('/api/v1/wms/selectWarehouse').then((res)=>{
             this.options1 = res.data.data
             this.axios.post('/api/v1/wms/getWmspRestackMakeResultList?apiId=106',{
                 warehouseid:this.value1
             }) 
         })
     },
     onchange1(){
            console.log(1);
            //  查询选中的仓库垛位
             this.axios.get('/api/v1/wms/selectStackingId?warehouseid='+this.value1).then((res)=>{
             this.options2 = res.data.data;
             this.options5=res.data.data;
             this.options11.requestUrl="/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid="+this.value1;
             this.options.requestUrl = "/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid=" + this.value1;       
         })
     },
     onchange2(){
        if(this.value1 == ''){
            this.$message({
                message: '请选择仓库之后！再选择',
                type: 'warning'
            });
            this.value2 = ''
        }else{
            console.log('-----')
            console.log(this.value2)
        //     this.options11.requestUrl="/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid="+this.value1+"&stackingId="+this.value2;        
        //     this.options.requestUrl ="/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid="+this.value1+"&stackingId="+this.value2;   
        //    console.log(this.options11.requestUrl)
            //选择仓库层次号
            this.axios.get('/api/v1/wms/selectGardationNumber?warehouseid='+this.value1+'&stackingId='+this.value2).then((res)=>{
            this.options3 = res.data.data;
            console.log("层次选择"+this.options3)})
            console.log("fasdsaf")
    }},
    onchange3(){
        console.log("change3")
        if(this.value2 == ''||this.value1==''){
            this.$message({
                message: '请选择仓库和垛位之后！再选择',
                type: 'warning'
            });
            this.value3 = ''

        }else{
            console.log(this.value1,this.value2)
            this.options11.requestUrl="/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid="+this.value1 + 
            "&stackingId="+this.value2+"&gradtionNumber="  + this.value3 
        }
    },
    onchange4(){
        //  console.log(1);
        //  查询选中的仓库垛位
             this.axios.get('/api/v1/wms/selectStackingId?warehouseid='+this.value1).then((res)=>{
              console.log( this.options5 = res.data.data)
            //  this.options5 = res.data.data;
            
             this.axios.post('/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid='+this.value1)
         })
     },
     onchange5(){
        this.options.requestUrl = "/api/v1/wms/getWmspRestackMakeResultList?apiId=106&warehouseid="+this.value1+"&stackingId="+this.value5;    
    },

     onclick(){
      console.log("点击事件");
     },

       // 确认
      onClickConfirm() {
         //console.log("inf",this.inf);
        let wmspRestackMakeResult={
            //垛位id    
            stackingId:this.inf[0].stackingId,
            //层次    
            // gridGradationNumber:that.value3,
            //倒垛前网格id    
            GridId:this.inf[0].GridId,
            //仓库id    
            warehouseid:this.value1,
            //倒垛后的垛位id    
            stackingId1:this.value5,
            //倒垛后的层次id
            // gridGradationNumber1:that.value6, 
        };
        //初始化maplist
        var maplist=[];
        this.inf.forEach((item,i)=>{
            //初始化mapItem
            var mapItem={
                //物资编码
                materialCode:"",
                //物资炉号    
                materialFurnaceNumber:"",
                // 物资理重
                materialTheoreticalWeight:0,
                //物资名称    
                materialName:"",
                //物资件数   
                makeMaterialNumber:0,
                //物资id    
                materialId:0,
            };
            mapItem.materialCode=item.materialCode;
            mapItem.materialFurnaceNumber=item.materialFurnaceNumber;
            mapItem.materialTheoreticalWeight=item.materialTheoreticalWeight;
            mapItem.materialName=item.materialName;
            mapItem.makeMaterialNumber=item.makeMaterialNumber;
            mapItem.materialId=item.materialId;
            maplist.push(mapItem);
        });
      
       let map = {
       wmspRestackMakeResult : wmspRestackMakeResult,
       maplist: maplist
      };
        console.log(map)
        // console.log("map",map);

       this.axios
        .post("/api/v1/wms/addRestackMakeResult/", map)
         .then((res) => {
         if(res.data.code == 200){
                this.$router.push("/steel_restack")
               this.$message({
            type: "success",  
            message: "新增成功!",
           });
         }
         
       
          
        });
    },
    selectionChange(row) {
      console.log("当前选中行的数据：");
      console.log(row);
      this.inf = row;
      console.log(this.inf);
    },
    
    // 取消
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scode>
.steel_restackAdd{
    .search{
        height: 5rem;
        display: flex;
        align-items:center;
        padding-left:0.625rem;
        .warehouse,.stack,.gradationnumber{
            margin-left: 1.25rem;
        }
    }


    .form{
        display: inline;
        justify-content: center;
        margin-left: 1.25rem;
        
    }
    .button_box{
        width: 90%;
        position: fixed;
        bottom: 1.25rem;
        display: flex;
        justify-content: center;
    }
}
</style>