<style>
.putinStorage .mimitBody {
  padding: 20px;
  background-color: #fff;
  margin: 10px 0 20px 0;
  display: table;
  width: 100%;
}
.putinStorage .tpEdit_header {
    padding: 18px;
    background: #fff;
    color: #606266;
    margin-bottom: 10px;
  }
.putinStorage .mimitList {
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
}

.putinStorage .mimitBody .el-tag {
  min-width: 120px;
  padding-right: 50px;
}

.putinStorage .el-button--small {
  padding: 9px 25px;
}
.putinStorage .box_tip{
  width: 100%;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#F56C6C;
  font-size: 26px;
}
</style>
<template>
  <div class="putinStorage">
    <div class="tpEdit_header">
      <span style="color:rgb(64, 158, 255);cursor:pointer;" @click="CommonJump('procurementMange')">采购管理</span><span
        style="margin:0 9px;color:#C0C4CC">/</span><span>入库</span>
    </div>
    <div class="mimitBody">
        <div class='box_tip' v-if="ISoperation == true">
          <span>此仓库正在盘点中,暂不支持任何操作！</span>
        </div>
        <div>
            <span>仓库名称：{{Detaildata.WareHouseName}}</span>
            <span style="margin-left:30px">备注：{{Detaildata.Remark}}</span>
        </div>
         <el-table :data="Detaildata.DetailList" border style="width: 100%;margin-Top:20px">
        <el-table-column prop="Id" label="ID" width="60"></el-table-column>
        <el-table-column prop="ImageList" label="封面图" width="80" align='center'>
            <template slot-scope="scope">
                <img :src="scope.row.MaterialModel.ImageList[0]" alt="" style="width: 50px; height: 50px;">
            </template>
        </el-table-column>
        <el-table-column prop="Name" label="商品名称" >
            <template slot-scope="scope">
                <span>{{scope.row.MaterialModel.Name}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="GoodsSpecificationList" label="规格" >
            <template slot-scope="scope">
                <span v-for="(x,y) in scope.row.MaterialModel.GoodsSpecificationList" :key="y">{{x}} <span v-if="scope.row.MaterialModel.GoodsSpecificationList.length !== y+1"> , </span></span>
            </template>
        </el-table-column>
        <el-table-column prop="Number" label="采购数量" width="80"></el-table-column>
        <el-table-column prop="StockInNum" label="已入数量" width="80">
             <template slot-scope="scope">
                 <span>{{scope.row.StockInNum!=null?scope.row.StockInNum:0}}</span>
            </template>
        </el-table-column>
         <el-table-column prop="" label="条码" width="250">
           <template slot-scope="scope">
             <el-input  v-model="scope.row.MaterialModel.Barcode"
                        @input='getBarcode(scope.row,$event,scope.row,scope.$index)'
                        placeholder="请输入"></el-input>
           </template>
         </el-table-column>
        <el-table-column prop="" label="入库数量" width="200">
            <template slot-scope="scope">
                <el-input  v-model="scope.row.InStockNum" type="number" :min='0'
                :max="scope.row.Number -(scope.row.StockInNum!=null?scope.row.StockInNum:0)"
                :disabled="(scope.row.Number -(scope.row.StockInNum!=null?scope.row.StockInNum:0))==0? true:false"
                @input='validation(scope.row.Number -(scope.row.StockInNum!=null?scope.row.StockInNum:0),scope.row,$event,scope.$index)'
                placeholder="请输入"></el-input>
            </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 10px">
        入库商品 <span style="color: #666666">(如果入库数量改变下列的有效日期会全清空)</span>
      </div>
      <div v-for="(x,y) in Warehousinglist" :key="y">
        <div style="display: flex;align-items: flex-start;justify-content: space-between;margin-top: 15px;" >
          <div style="width: 50%;">{{x.name}}</div>
          <div style="display: flex;align-items: flex-start;">
            <el-date-picker
              v-model="x.time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
            <el-button @click="setupTime(y)" type="primary" size="small" style="margin-left: 15px" >设置日期</el-button>
          </div>
        </div>
        <el-table :data="x.list" border style="width: 100%;margin-Top:20px" @selection-change="handleSelectionChange($event,y)">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="序号"  width="60">
            <template slot-scope="scope">
                {{y+1}}-{{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column prop="ImageList" label="封面图" width="80" align='center'>
            <template slot-scope="scope">
              <img :src="scope.row.MaterialModel.ImageList[0]" alt="" style="width: 50px; height: 50px;">
            </template>
          </el-table-column>
          <el-table-column prop="Name" label="商品名称" >
            <template slot-scope="scope">
              <span>{{scope.row.MaterialModel.Name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="GoodsSpecificationList" label="规格" >
            <template slot-scope="scope">
              <span v-for="(x,y) in scope.row.MaterialModel.GoodsSpecificationList" :key="y">{{x}} <span v-if="scope.row.MaterialModel.GoodsSpecificationList.length !== y+1"> , </span></span>
            </template>
          </el-table-column>

          <el-table-column prop="" label="有效时间" >
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


    <el-button size="small" type="primary" @click="submitForm()"  :disabled = 'ISoperation' :loading="rukuloading">入库</el-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
        Detaildata:{},
        WareHouseId:0,
        ISoperation:false,
        rukuloading:false,
        Warehousinglist:[],
    };
  },
  created() {},
  methods: {

    getProcurementInfo(data) {

        this.assetsApipost("/api/property/GetProcurementInfo", {ProcurementId:data.ID}, res => {
          if (res.data.resultCode == 1) {
              let data = res.data.data
              data.DetailList.forEach((x,y) => {
                  x.InStockNum = 0;
                  let obj = {
                    Id:y+1,
                    UniqueID:x.Id,
                    name:x.MaterialModel.Name,
                    list:[],
                    time:'',
                    multipleSelection:[]
                  }
                  this.Warehousinglist.push(obj)
              });
              this.Detaildata = data
          } else {
            this.Error(res.data.message);
          }
        })

    },
    getSuppliesCheckList(WareHouseId){
       this.assetsApipost("/api/Property/GetSuppliesCheckList", {}, res => {
          if (res.data.resultCode == 1) {
             let data = res.data.data
             if(data.length>0){
                data.forEach(x=>{
                  if(x.WarehouseId == WareHouseId){
                    this.ISoperation = true //如果有在盘点的仓库
                  }
                })
             }
          } else {
            this.Error(res.data.message);
          }
        })
    },
    submitForm(){
        let msg = {
             Id:0,
             WareHouseId:0,
             DetailList:[]
        };
        msg.Id = this.Detaildata.Id;
         msg.WareHouseId = this.Detaildata.WareHouseId;
         let showtime=false;
         let zonglist = [];
        this.Warehousinglist.map((x,xi)=>{
          if(x.list.length>0){
            let list = [];
            x.list.map((j,ji)=>{
              if(j.time==''){
                showtime= true
              }else{
                let obj ={ExpirationDate:j.time}
                list.push(obj)
              }
            })
            let objlist ={ValidityList:list,UniqueID:x.UniqueID}
            zonglist.push(objlist)
            if(showtime==true){
              this.Error(x.name+'的有效日期没选择,请选择');
              return
            }
          }
       })
      if(showtime==true){
        return
      }
      let showtis = false;
      this.Detaildata.DetailList.forEach((x,y)=>{
            if(x.InStockNum.length== 0){
                showtis=true
            }
            let obj = {}
            obj.GoodsId = x.MaterialModel.GoodsId;
            obj.SpecificationKey = x.MaterialModel.SpecificationKey;
            obj.InStockNum = x.InStockNum;
            obj.Barcode = x.MaterialModel.Barcode;
            //2021-4-1加的日期列表
            zonglist.map((item,index)=>{
              if(x.Id == item.UniqueID ){
                obj.ValidityList = zonglist[index].ValidityList;
                return
              }
            })

            msg.DetailList.push(obj)
        })
        if(showtis == true){
             this.Error('请输入入库数量');
             return
        }
        console.log(msg)
       this.rukuloading=true
       this.assetsApipost("/api/property/SetProcurementStockIn", msg, res => {
           this.rukuloading=false
           if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            // this.getProcurementInfo(this.$route.query)
            this.CommonJump('procurementMange')
          } else {
            this.Error(res.data.message);
          }
        })

    },
    validation(v,row,value,index){

      let that = this
      if(value>v){
        this.Error('数量不足');
        that.Detaildata.DetailList.forEach(x=>{
          if(x.Id == row.Id){
            x.InStockNum=0
          }
        })
      }else{
        this.Warehousinglist[index].list=[]
        for(let i= 0;i<value;i++){
          let obj ={
            CostMoney:row.CostMoney,
            Id:row.Id,
            InStockNum:row.InStockNum,
            MaterialId:row.MaterialId,
            MaterialModel:row.MaterialModel,
            Number:row.Number,
            StockInNum:row.StockInNum,
            time:'',
            xuhao:i+1,
          }
          this.Warehousinglist[index].list.push(obj)

        }

      }


    },
    handleSelectionChange(val,y){
      this.Warehousinglist[y].multipleSelection= val
    },
    getBarcode(val,row,index){
      console.log(val,row,index)
    },
    setupTime(y){//全体设置
      if(this.Warehousinglist[y].multipleSelection.length==0){
        this.Error('请选择要设置的对象');
        return
      }
      if(this.Warehousinglist[y].time==''){
        this.Error('请选择有效日期');
        return
      }
      this.Warehousinglist[y].multipleSelection.map(x=>{
        this.Warehousinglist[y].list.map((j,yi)=>{
          if(x.xuhao==j.xuhao){
            this.Warehousinglist[y].list[yi].time=  this.Warehousinglist[y].time;
            return
          }
        })
      })
    }


  },
  mounted() {
     this.WareHouseId = this.$route.query.WareHouseId;
    this.getSuppliesCheckList(this.$route.query.WareHouseId)
    this.getProcurementInfo(this.$route.query)

  }
};
</script>
