<style>
  .deliveryQuery .template_comheader {
    padding: 13px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
  }

  .deliveryQuery .template_comheader>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  .deliveryQuery .temp_content {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
  }

  .deliveryQuery .temp_imgStyle {
    display: inline-block;
    margin-right: 10px;
  }
  .deliveryQuery .app-add-cat .el-checkbox-group{
    font-size: 14px!important;
  }
  .deliveryQuery .app-add-cat .el-checkbox {
    margin-right: 0;
  }
  .deliveryQuery .app-add-cat .el-dialog__body{
    padding:10px 20px!important;
  }
  .deliveryQuery .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }
  .deliveryQuery .app-add-cat .tag-box {
    margin: 20px 0;
  }
  .deliveryQuery .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }
  .deliveryQuery .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }
  .deliveryQuery .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }
  .deliveryQuery .el-table td, .el-table th{
    padding: 5px 0;
    font-size: 14px;
  }
  .deliveryQuery .shopinformation{
    display: flex;
    flex-direction: row;
    font-size: 12px;
  }
</style>
<template>
  <div class="deliveryQuery" >
    <div class="template_comheader">
      <div>
        <span>出库查询</span>
        <el-button type="primary" size="small" @click="getagain">重新入库</el-button>
      </div>
    </div>
    <div class="temp_content">
      <div>

        <div class="searchInput" style="width:150px;margin-right: 10px;">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:125px;height:30px"
                    placeholder="请输入订单号"
                    v-model="msg.OrderNo"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <div class="searchInput" style="width:250px;margin-right: 10px;">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
                    placeholder="请输入订单ID"
                    v-model="msg.OrderId"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <div class="searchInput" style="width:250px;margin-right: 10px;">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
                    placeholder="请输入商品名称"
                    v-model="msg.GoodsName"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
      </div>
      <el-table :data="dataList" border style="width: 100%;margin-Top:10px" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column  type="selection" width="55" :selectable="checkSelectable"></el-table-column>
        <el-table-column prop="Id" label="ID" width="60"></el-table-column>
        <el-table-column prop="MaterialId" label="耗材ID" width="80"></el-table-column>
        <el-table-column prop="OrderNo" label="订单号" width="160"></el-table-column>
        <el-table-column prop="GoodsName" label="商品名称" width="200"></el-table-column>
        <el-table-column prop="Specification" label="规格" width="160"></el-table-column>
        <el-table-column prop="CostMoney" label="成本金额" width="80"></el-table-column>
        <el-table-column prop="ProductCode" label="货号" ></el-table-column>
        <el-table-column prop="WarehouseName" label="仓库名称" ></el-table-column>
        <el-table-column prop="Number" label="数量" width="60"> </el-table-column>
        <el-table-column prop="StockOutDate" label="出库日期" ></el-table-column>
        <el-table-column prop="StockInDate" label="重新入库时间" ></el-table-column>
        <el-table-column prop="FinanceId" label="财务单据" ></el-table-column>
        <el-table-column prop="StockInDate" label="重新入库数量" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.InventoryNum" type="number"
                      :min='0'
                      :max="scope.row.Number"
                      @input='validation(scope.row,$event,scope.$index)'
                      placeholder="请输入内容" :disabled="scope.row.showInventoryNum>0?true:false"></el-input>
          </template>
        </el-table-column>



      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange"  :current-page.sync="msg.pageIndex"
                     :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 选择分类 -->
    <el-dialog custom-class="app-add-cat" title="重新入库" :visible.sync="flDig" width="1100px" :close-on-click-modal="false" >
      <div v-for="(x,y) in selectList" :key="y" >
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="20">
            <div>
              商品名称:{{x.GoodsName}}
            </div>
            <div>
            商品规格:{{x.Specification}}
          </div>
          </el-col>
          <el-col :span="4">
            <div>{{x.InventoryNum != x.Number?'部分入库':'全部入库'}}</div>
            <div class="grid-content bg-purple">入库数量:{{x.InventoryNum}}</div>
          </el-col>
        </el-row>
        <div class="row" style="margin-top: 10px" v-if="x.InventoryNum != x.Number">
          <span>扫码入库</span>
          <el-input v-model="x.input" @input="$forceUpdate()" @keyup.enter.native="$forceUpdate(),payCode(x,y)" placeholder="商品出库条码" style="display:inline-block;width:300px;height:30px"></el-input>
        </div>
        <el-table :data="x.list" v-if="x.InventoryNum != x.Number" border style="width: 100%;margin-Top:20px" >
          <el-table-column prop="SuppliesNum" label="编号" ></el-table-column>
          <el-table-column prop="Name" label="商品名称" ></el-table-column>
          <el-table-column prop="SpecificationList" label="规格" >
            <template slot-scope="scope">
              <span v-for="(x,y) in scope.row.SpecificationList" :key="y">{{x}} <span v-if="scope.row.SpecificationList.length !== y+1"> , </span></span>
            </template>
          </el-table-column>
          <el-table-column prop="ExpirationDate" label="有效期" ></el-table-column>
          <el-table-column prop="SpecificationList" label="操作" >
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <img src="../../assets/img/setup/del.png" alt="" class="temp_imgStyle" @click="DeleteTemplate(scope.row,scope.$index,y)">
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="flDig = false" >取 消</el-button>
            <el-button @click="chooseFl" size="small" type="primary" >确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading:false,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 10,
          OrderNo:'',
          OrderId:'',
          GoodsName:'',
        },
        flDig:false,
        total: 0,
        selectList:[],
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        let msg = JSON.parse(JSON.stringify(this.msg))
        if(msg.OrderId!=''){
          msg.OrderId = Number(msg.OrderId)
        }else {
          msg.OrderId = 0
        }
        this.assetsApipost("/api/property/GetGoodsOutDetailPageList", msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.dataList.map(x=>{
              x.showInventoryNum = x.InventoryNum //方便在数据上判断
            })
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      chooseFl(){
          let msg= []
          this.selectList.map(x=>{
            let ValidityIds = ''
            if(x.InventoryNum == x.Number){
              ValidityIds = x.ValidityIds
            }else {
              x.list.map((j,jindex)=>{
                ValidityIds=ValidityIds+(jindex==0?'':',')+j.ValidityId
              })
            }
            let obj = {
              OrderId:x.OrderId,
              OrderGoodsId:x.OrderGoodsId,
              GoodsId:x.GoodsId,
              StockOutId:x.StockOutId,
              MaterialId:x.MaterialId,
              GoodsName:x.GoodsName,
              Specification:x.Specification,
              OrderNo:x.OrderNo,
              CostMoney:x.CostMoney,
              ProductCode:x.ProductCode,
              WarehouseId:x.WarehouseId,
              WarehouseName:x.WarehouseName,
              Number:x.Number,
              StockOutDate:x.StockOutDate,
              StockInDate:x.StockInDate,
              InventoryNum:x.InventoryNum,
              ValidityIds:ValidityIds,
            }
            msg.push(obj)
          })
        const loading = this.$loading({
          lock: true,
          text: '正在入库中,请稍等...',
          spinner: 'el-icon-loading',
        });
        this.assetsApipost("/api/property/SetGoodsAgainInventory", msg, res => {
          loading.close();
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
            this.flDig = false
          } else {
            this.Info(res.data.message);
          }
        })

      },
      validation(row,value,index){
        if(value>row.Number){
            this.dataList[index].InventoryNum = row.Number
        }
      },
      checkSelectable(row){//判断是否可以选择
          return row.showInventoryNum==0
      },
      handleSelectionChange(val){
        this.selectList = val
        this.selectList.map(x=>{
          x.InventoryNum = x.Number;
          x.input='';
          x.list=[];
        })
      },
      getagain(){
        if(this.selectList.length>0){
          let show = false;
          let idtext = 0
          this.selectList.map(x=>{
            if(x.InventoryNum ==0){
              show = true;
              idtext = x.Id;

              return
            }
          })
          if(show==true){
            this.Error('您所选ID为'+idtext+'的商品,重新入库数量不能为0');
          }else{
            this.flDig=true

          }
        }else {
          this.Error('选择你要重新入库的商品');

        }

      },
      payCode(x,index){//扫码结果处理
        if(x.list.length>= Number(x.InventoryNum) ){//扫的时候判断超出出库的数量没有
          this.Error('超出入库数量')
          return
        }else {
          this.assetsApipost("/api/property/GetStockOutGoodsInfo", {Code:x.input}, res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data.GoodsModel;
              this.Success(res.data.data.Msg);

              let show = false
              if(data.ValidityId>0){
                this.selectList[index].list.map(x=>{//判读有没有重复的扫码
                  if(x.ValidityId == data.ValidityId){
                    show=true;
                    return
                  }
                })
                if(show==true){
                  this.Error('重复扫码')
                  return
                }
              }

              if(x.MaterialId == data.SuppliesId){//判断是否是同一个商品 规格
                this.selectList[index].list.push(data)
              }else{
                this.Error('请扫码对应的商品')
                return
              }
            } else {
              this.Info(res.data.message);
            }
            this.selectList[index].input = ''
            this.$forceUpdate()
          },null)

        }


      },
      DeleteTemplate(row,index,y){//删除扫码的
        this.selectList[y].list.splice(index,1)
      }

    },
    mounted() {
      this.getList();
    }
  };

</script>
