<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="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)'
                placeholder="请输入"></el-input>
            </template>
        </el-table-column>
      </el-table>
    </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,
    };
  },
  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 => {
                  x.InStockNum = 0
              });
              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 showtis = false
        this.Detaildata.DetailList.forEach(x=>{
            if(x.InStockNum.length== 0){
                showtis=true
            }
            let obj = {}
            obj.GoodsId = x.MaterialModel.GoodsId;
            obj.SpecificationKey = x.MaterialModel.SpecificationKey;
            obj.InStockNum = x.InStockNum;
            msg.DetailList.push(obj)
        })
        if(showtis == true){
             this.Error('请输入入库数量');
             return
        }
        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){

      let that = this
      if(value>v){
        this.Error('数量不足');
        that.Detaildata.DetailList.forEach(x=>{
          if(x.Id == row.Id){
            x.InStockNum=0
          }
        })
      }
    }


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

  }
};
</script>
