<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
        }
        this.rukuloading = true
        this.assetsApipost("/api/property/SetProcurementStockIn", msg, res => {
          this.rukuloading = false
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            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) {},
      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>