<template>
  <view>
    <view class="top">
      <u-form labelPosition="left" :model="dataForm" class="sh-form">

        <u-form-item label="商品条码" prop="goodNoCode" labelWidth="150rpx" :border-bottom="false">
          <u-input v-model="dataForm.goodNoCode" border style="background-color: #ffffff;" placeholder="请输入或商品扫描条码"
            @input="inputQuery()"></u-input>
        </u-form-item>

      </u-form>
    </view>
    <view class="center" v-if="data !== null">
      <!-- {{data}} -->
      <view class="labelValue">
        <span class="bigLabel">收货单号</span>
        <span class="bigValue">{{data.businInShelfDVo === null ? '-' : data.sourceOrderNo}}</span>
      </view>
      <view class="labelValue">
        <span class="label">商品编号</span>
        <span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bgGoodNo}}</span>
      </view>
      <view class="labelValue">
        <span class="label">商品名称</span>
        <span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bgGoodName}}</span>
      </view>

      <view class="labelValue">
        <span class="label">待上架件数量</span>
         <span class="value">{{data.ableQty || '-'}}</span>
      </view>

      <view class="labelValue">
        <span class="label">批号</span>
        <span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.batchNo}}</span>
      </view>
      <view class="labelValue">
        <span class="label">生产日期</span>
        <span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.productionDate}}</span>
      </view>
      <view class="labelValue">
        <span class="label">有效期至</span>
        <span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.expiredDate}}</span>
      </view>
      <view class="labelValue marginBottom">
        <span class="label">上总数量</span>
        <u-input v-model="data.qty" @input="changeCase" border style="background-color: #F2F2F2;" placeholder="请输入上架件数"
          :disabled="true">
        </u-input>
      </view>
      <view class="labelValue marginBottom">
        <span class="label">上架件数量</span>
        <u-input v-model="caseQty" @input="changeCase"   border style="background-color: #ffffff;" placeholder="请输入上架件数">
        </u-input>
      </view>

      <view class="labelValue">
        <span class="label">零散数</span>
        <u-input v-model="pieceQty" @input="changPiece" border style="background-color: #ffffff;"
          placeholder="请输入上架零散数"></u-input>
      </view>
      <view class="footer">

        <u-button type="primary" @click="open">呼叫AVG入库</u-button>
      </view>
    </view>
    <view class="" style="padding: 0px 40rpx;text-align: center;">
      <text>呼叫AGV将在库托盘送达上料点后，
        放入商品并扫描放入的托盘条码，完成入库！</text>
    </view>

    <u-popup ref="popup" type="bottom" :mask-click="false" :mask-close-able="false" mode="center">
      <div style="padding:30rpx;text-align: center;min-width:300rpx ;" v-if="showDiv == false">
        <text>入库确认</text>
        <div style="text-align: center;font-weight: 600;margin-bottom: 40rpx;margin-top: 40rpx;">
          <text>AGV到达后，扫描将商品放入的容器编号</text>
        </div>
        <u-form-item label="容器编号" prop="containerCode" labelWidth="140rpx">
          <u-input v-model="containerCode" border style="background-color: #ffffff;" placeholder="请输入或扫描容器号">
          </u-input>
        </u-form-item>
        <view class="footer" style="margin-top: 25rpx;">
          <u-button size="mini" @click="showDiv =true">取消入库</u-button>
          <u-button type="primary" @click="putConfirm" size="mini">确认入库</u-button>
        </view>
      </div>
      <div style="padding:30rpx;text-align: center;min-width: 80%;" v-else>
        <text>取消确认</text>
        <div style="text-align: center;margin-bottom: 40rpx;margin-top: 40rpx;">
          <text>确认取消入库后，AGV会将当前容器移送</text><br>
          <text> 回原货位，请确认是否取消！</text>
        </div>
        <view class="footer" style="margin-top: 25rpx;">
          <u-button size="mini" @click="showDiv = false">取消</u-button>
          <u-button type="primary" @click="cancel" size="mini">确认</u-button>
        </view>
      </div>
    </u-popup>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        showDiv: false,
        dataForm: {
          goodNoCode: '',
          locationName: '', //上架货位
          detailId: null, //明细id
          sid: null, //汇总id
          containerCode: "", //容器编号
        },
        caseQty: 0, //上架件数
        pieceQty: 0, //上架零散数
        containerCode: "", //容器编号
        data: {
          ableQty: 0,
          qty: 0,
          bcsConsignorName: "",
          businInShelfDVo: {}
        }, //接口数据对象
        dicOptions: [],
        queryFlag: '',
      }
    },
    onLoad: function(option) {
      this.dataForm.detailId = option.detailId
      this.dataForm.sid = option.sid
      this.dataForm.containerCode = option.containerCode
      this.loadDetail({
          sid: this.dataForm.sid,
          did: this.dataForm.detailId
        })
      this.getDic(); //获取字典
    },
    methods: {
      /**取消AGV*/
      cancel() {
         this.$refs.popup.close()
        this.showDiv = false
         this.$u.api.AvgOnShelf.cancelAGV({did:this.dataForm.detailId})
        this.containerCode = ''
      },
      /**开启AGV*/
      open() {
        this.$u.api.AvgOnShelf.callAGV({did:this.dataForm.detailId}).then(res=>{
          if(res.code==200){
             this.$refs.popup.open('center')
			    setTimeout(() => {
			                         this.$Router.back(1)
			                     },1000)
          }else{
			  
            this.$u.toast(res.msg)
          }
        })
      },
      /**搜索框查询*/
      inputQuery() {
        if (this.queryFlag !== '') {
          clearTimeout(this.queryFlag);
       
        }
        if (this.dataForm.goodNoCode == '' || this.dataForm.goodNoCode == null || this.dataForm.goodNoCode == undefined) {
             this.loadDetail()
          return
        }
        this.queryFlag = setTimeout(() => {
          this.loadDetail({sid:this.dataForm.sid,barCode:this.dataForm.goodNoCode})
        }, 500)
      },

      // 改变件数
      changeCase(e) {
        this.data.qty = this.data.businInShelfDVo.bpPackageQty * e + Number(this.pieceQty)
        // console.log(this.data.bpPackageQty, this.pieceQty)
        // this.data.qty = this.data.bpPackageQty * e + Number(this.pieceQty)
      },
      // 改变零散数
      changPiece(e) {
        if (this.caseQty) {
          this.data.qty = this.caseQty * this.data.businInShelfDVo.bpPackageQty + Number(e)
          // this.data.qty = this.caseQty * this.data.bpPackageQty + Number(e)
        } else {
          this.data.qty = Number(e)
        }
      },
      loadDetail(option) {
        this.$u.api.AvgOnShelf.getAvgShelf(option).then(res => {
          if (res.code === 200) {
            this.data = res.data;
            if (res.data === null || res.data === '') {
              // if (this.containerCode === '') {
              // 	this.$u.toast("当前容器无任务");
              // } else 
              if (this.dataForm.goodNoCode === '') {
                this.$u.toast("当前商品无待上架任务");
              }
            }
          } else {
            this.$u.toast(res.msg);
          }
        });
      },
      putConfirm() {
        if (this.caseQty === '') {
          this.$u.toast("上架件数不能为空");
          return
        }
        if (this.pieceQty === '') {
          this.$u.toast("上架零散数不能为空");
          return
        }
        // if (this.containerCode === '') {
        //   this.$u.toast("容器编号不能为空");
        //   return
        // }
        // console.log(this.data.qty)
        this.$u.api.AvgOnShelf.agvSubmit({
          did: this.dataForm.detailId, //明细
          id: this.dataForm.sid, //汇总id
          caseQty: this.caseQty,
          qty:this.data.qty,
          pieceQty: this.pieceQty,
          containerCode: this.containerCode
        }).then(res => {
          if (res.code === 200) {
            this.$u.toast('上架成功');
            // this.data = null
            this.containerCode = ''
			   setTimeout(() => {
			        this.$Router.back(1)
					this.$refs.popup.close()
			},1000)
			  
          } else {
			  this.$refs.popup.open()
				this.$u.toast(res.msg);
          }
        });
      
      },
      errorConfir() {
        this.$u.api.onShelf.billingToAdnormal({
          id: this.data.id,
        }).then(res => {
          if (res.code === 200) {
            this.$u.toast('填报成功');
          } else {
            this.$u.toast(res.msg);
          }
        });
      },
      getDic() {
        this.$u.api.getByDicType().then(res => {
          this.dicOptions = res.data;
        });
      },
      transUnit(unit) {
        for (let dic in this.dicOptions) {
          if (this.dicOptions[dic].dictValue === unit) {
            return this.dicOptions[dic].dictLabel;
          }
        }
      },
    }
  }
</script>

<style lang="scss">
  .top {
    width: 95%;
    margin: 0 auto;
    margin-top: 20rpx;
    background-color: #f2f2f2;
    padding: 0 20rpx;
  }

  .u-form-item {
    padding: 5rpx 0px;
  }

  .center {
    line-height: 55rpx;
    padding: 20rpx 40rpx;

    .labelValue {
      display: flex;
      align-items: center;

      .bigLabel {
        font-size: 36rpx;
        color: #555555;
        width: 160rpx;
      }

      .bigValue {
        font-size: 36rpx;
        color: #333333;
      }

      .label {
        font-size: 24rpx;
        color: #555555;
        width: 160rpx;
        text-align: left;
      }

      .value {
        font-size: 24rpx;
        color: #333333;
      }
    }

    .marginBottom {
      margin-bottom: 20rpx;
    }
  }

  .footer {
    display: flex;
    padding: 20rpx 0;
  }
</style>
