<template>
  <view class="sh-content" style="position: relative;">
    <!-- <view class="sh-search" style="padding: 0 40rpx;"> -->
    <u-form labelPosition="left" :model="dataForm" class="sh-form">
      <u-form-item prop="containerCode" labelWidth="150rpx">
        <u-input v-model="dataForm.containerCode" border style="background-color: #ffffff;" placeholder="请输入或扫描容器号"
          @input="queryFun"></u-input>
      </u-form-item>
    </u-form>
    <view class="sh-card" v-for="(item, index) in dataList" :key="item.id" :index="item.id" v-if="dataList.length > 0"
      style="border-radius: 10rpx" @click="openFun(item)">
      <view class="sh-card-title" style="border-radius: 10rpx">
        <view class="card-content">
          <view class="card-content-item">
            <text class="item-title">商品名称</text>
            <text class="item-value">{{item.goodName}}</text>
          </view>
          <view class="card-content">
            <text class="item-title"> {{item.pickQty}} / {{item.qty}}</text>
          </view>
        </view>
        <view class="card-content">
          <view class="card-content-item">
            <text class="item-title">商品编码</text>
            <text class="item-value">{{item.goodNo}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="confrim-btn"
      style="margin-bottom: 40rpx;position: fixed;bottom: 20rpx;left: 50%;transform: translateX(-50%);">
      <u-button type="primary" style="width:300rpx; margin-top: 40rpx" @click="toExamine">完成拣选</u-button>
    </view>
    <u-popup ref="popup" mode="center" :mask-click="false" :mask-close-able="false">

      <!--商品确定-->
      <view style="padding:30rpx;width: 560rpx;" v-if="showDiv == false">
        <view class="" style="text-align: center;margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">
          <text>商品确定</text>
        </view>
        <!-- <view class="labelValue" style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <span class="label"> 商品条码：</span>
          <u-input v-model="barcodePrinter" border style="background-color: #ffffff;"
            placeholder="请输入或扫描商品条码">
          </u-input>
        </view> -->
        <view class="labelValue" style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <span class="label">商品编码：</span>
          <span class="value"> {{data.goodNo === undefined ? ' - ' : data.goodNo}}</span>
        </view>
        <view class="labelValue" style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <span class="label">商品名称：</span>
          <span class="value"> {{data.goodName === undefined ? ' - ' : data.goodName}}</span>
        </view> 
		<view class="labelValue" style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <span class="label">待捡数量：</span>
          <span class="value"> {{data.qty === undefined ? ' - ' : data.qty}}</span>
        </view>

        <view class="labelValue" style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <span class="label"> 拣货数量：</span>
          <u-input v-model="pickQty"  border style="background-color: #ffffff;" placeholder="请输入拣货数量">
          </u-input>
        </view>
    <!--    <view class="labelValue" style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <span class="label">批 号：</span>
          <span class="value"> {{ data.batchNo === undefined ? ' - ' : data.batchNo}}</span>
        </view> -->
        <view class="footer" style="margin-top: 25rpx;display: flex;">
          <u-button style="width: 200rpx;" size="mini" @click="cancel">取消</u-button>
          <u-button style="width: 200rpx;" type="primary" @click="affrim" size="mini">确认</u-button>
        </view>
      </view>

      <!--拣货之前的确定-->
      <view class="" v-else :mask-click="false">
        <view class=""
          style="width: 450rpx;padding: 20rpx;text-align: center;margin-bottom: 20rpx;font-size: 30rpx;font-weight: 600;">
          <text>拣货确定</text>
        </view>
        <view class="" style="text-align: center;">
          <text>请确认拣货数量是否有差异,<br></text><text>
            点击确定完成拣货</text>
        </view>
        <view class="footer" style="margin-top: 40rpx;display: flex;margin-bottom: 30rpx;">
          <u-button style="width: 150rpx;" size="mini" @click="cancel">取消</u-button>
          <u-button style="width: 150rpx;" type="primary" @click="operation" size="mini">确认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showDiv: false,
        dataList: [],
        dataForm: {
          containerCode: ''
        },
        data: {},
        barcodePrinter: '',
        pickQty: '',
        //查询节流
        queryFlag: '',
      }
    },
    onLoad() {
      this.getList()
    },
    methods: {
      /**获取数据*/
      getList() {
        this.$u.api.AvgOrderPkg.queryPick(this.dataForm.containerCode).then(res => {
          if (res.code == 200) {
            this.dataList = res.data
            if (res.data == '' || res.data == undefined || res.data == null) {
              this.$u.toast('此容器下没有拣货任务')
              return
            }
          } else {
            this.$u.toast(res.msg)
          }
        })
      },
      /**完成拣货之前的校验*/
      toExamine() {
        let flag = this.dataList.some(item => {
          return item.pickQty == item.ableQty
        })
        if (flag) {
          this.operation()
          return
        }
        this.showDiv = true
        this.$refs.popup.open('center')
      },
      /**完成拣货操作*/
      operation() {
        this.$u.api.AvgOrderPkg.pickAGV({
			containerCode:this.dataForm.containerCode,
          detailBoList: this.dataList
        }).then(res => {
          // if(res.code == 200){
          this.$u.toast(res.msg)
          // }else{
          // this.$u.toast(res.msg)
          // }
        })
      },
      /**商品确认拣货*/
      affrim() {
        const regPos = /^[0-9]+.?[0-9]*/;
        // if (!this.barcodePrinter) {
        //   this.$u.toast('请输入商品条码')
        //   return
        // }
        if (!regPos.test(this.pickQty)) {
          this.$u.toast('请输入正确的拣货数量')
          return
        }
        if (this.pickQty > this.data.qty) {
          this.$u.toast('拣货数量不能超过原有数量')
          return
        }
        this.data.pickQty = this.pickQty
		
		for (var i = 0; i < this.dataList.length; i++) {
			if(this.data.goodNo === this.dataList[i].goodNo){
				this.dataList[i].pickQty = this.pickQty
			}
		}
		
        this.pickQty = ''
        this.barcodePrinter = ''
        this.$refs.popup.close()
      },
      /**二次确定商品*/
      verify() {
        if (this.barcodePrinter && this.barcodePrinter != this.data.barcodePrinter)
          this.$u.toast('扫描的商品条码不存在，请确认后重新扫描')
      },
      /**取消商品确定弹窗*/
      cancel() {
        this.$refs.popup.close()
        this.showDiv = false
      },
      /**查询容器下有多少的拣货任务*/
      queryFun() {
        if (this.queryFlag !== '') {
          clearTimeout(this.queryFlag);
        }
        if (this.dataForm.containerCode == null || this.dataForm.containerCode == undefined || this.dataForm
          .containerCode == '') {
          // this.$u.toast()
          return
        }
        this.queryFlag = setTimeout(() => {
              this.getList()
              }, 500)
          },
          /**开启拣货弹窗*/
          openFun(row) {
            this.pickQty = row.pickQty
            this.data = {
              ...row
            }
            this.$refs.popup.open('center')
          }
      }
    }
</script>

<style lang="scss">
  @import "../index.scss";
</style>
