<template>
  <view class="container">
    <u-input class="input" v-model="wareHouse" border type="text" placeholder="请扫描货位"
      placeholder-style="color:#666666" />
    <view class="content">
      <view class="item">
        <span class="itemLabel">货位名称：</span>
        <span class="itemValue">{{ result.outLocationName }}</span>
      </view>
      <view class="item">
        <span class="itemLabel">商品编号：</span>
        <span class="itemValue">{{ result.goodNo }}</span>
      </view>
      <view class="item">
        <span class="itemLabel">商品名称：</span>
        <span class="itemValue">{{ result.goodName }}</span>
      </view>
      <view class="item">
        <span class="itemLabel">规格：</span>
        <span class="itemValue">{{ result.specifications }}</span>
      </view>
      <!-- <view class="item">
				<span class="itemLabel">厂家：</span>
				<span class="itemValue">{{ result.factory }}</span>
			</view> -->
      <!-- <view class="item">
				<span class="itemLabel">产地：</span>
				<span class="itemValue">{{ result.areaCode }}</span>
			</view> -->
      <!-- <view class="item">
				<span class="itemLabel">件装量：</span>
				<span class="itemValue">{{ result.packageQty }}  单位：{{ transUnit(result.unit) }}</span>
			</view> -->
      <view class="item" style="display: flex;align-items: center;">
        <span class="itemLabel">拣货数量：</span>
        <!-- <span class="itemValue">{{ result.pickQty }}</span> -->
        <u-input class="input" v-model="pickQty" border type="text" placeholder="请输入拣货数量"
          placeholder-style="color:#666666" />
      </view>
      <view class="item">
        <span class="itemLabel">批号：</span>
        <span class="itemValue">{{ result.batchNo }}</span>
      </view>
      <!-- 	<view class="item">
				<span class="itemLabel">显示效期：</span>
				<span class="itemValue">{{ result.productionDate }} —— {{ result.expiredDate }}</span>
			</view> -->
    </view>
    <div>
      <view class="desktop">
        <view v-for="item in container" :key="item.containerCode" class="desktopItem"
          :style="{backgroundColor:(item.pickQty?'#67c237':null)}">
          <span class="desktopLabel">{{ item.containerCode}}</span>
          <span v-if="item.pickQty" class="desktopValue">{{ item.pickQty }}</span>
        </view>
      </view>
      <view class="footer">
        <!-- <u-button type="primary" @click="show = true">冲红</u-button> -->
        <u-button type="success" @click="judge()">拣货确认</u-button>
        <!--sure-->
      </view>
    </div>
    <u-popup v-model="show" mode="center" width="80%" height="200px" border-radius="14">
      <view class="" v-if="showFlag == false">
        <view style="display: flex;align-items: center;padding: 0 40rpx;margin:40rpx 0rpx">
          <span style="width: 100rpx;">工号</span>
          <u-input v-model="username" type="text" :border="true" />
        </view>
        <view style="display: flex;align-items: center;padding: 0 40rpx;">
          <span style="width: 100rpx">密码</span>
          <u-input v-model="password" type="password" :border="true" />
        </view>
        <view class="confrim-btn">
          <u-button type="primary" style="width:200rpx; margin-top: 40rpx" @click="isHave()">确定</u-button>
        </view>
      </view>
      <view class="" v-else style="text-align: center;">
        <view class="" style="font-weight: 600;margin-bottom: 60rpx;margin-top: 20rpx;">
          <text style="font-size: 28rpx;">拣货确认</text>
        </view>
        <text>当前拣货数量有差异，请确认
          是否已拣货完成</text>
        <view class="confrim-btn" style="display: flex;margin-top: 60rpx;">
          <u-button  style="width:200rpx; margin-top: 40rpx" @click="abolish">取消</u-button>
          <u-button type="primary" style="width:200rpx; margin-top: 40rpx" @click="sure">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showFlag: true,
        result: {},
        container: [],
        wareHouse: '',
        show: false,
        username: '',
        password: '',
        dicOptions: [],
        pickQty: '',
      }
    },
    onLoad(e) {
      this.result = JSON.parse(e.list)
      this.pickQty = this.result.pickQty
      this.container = JSON.parse(e.container)
      this.getDic()
    },

    methods: {
     
      getDic() {
        this.$u.api.getByDicType().then(res => {
          this.dicOptions = res.data;
        });
      },
      transUnit(unit) {
        console.log('这里没执行')
        console.log(unit)
        for (let dic in this.dicOptions) {
          if (this.dicOptions[dic].dictValue === unit) {
            return this.dicOptions[dic].dictLabel;
          }
        }
      },
    
      isHave() {
        if (this.username && this.password) {
          this.$u.api.pickingManage.loginConfirm({
            username: this.username,
            password: this.password
          }).then((res) => {
            if (res.code === 200) {
              this.$u.route({
                url: 'pages/dispersion/rushRed',
                type: 'navigateTo',
                params: {
                  list: JSON.stringify(this.result)
                }
              })
            } else {
              this.$u.toast(res.msg)
            }
            this.show = false
          })
        } else {
          this.$u.toast('请输入账号或密码')
        }

      },

      checkOutPick() {
        this.$u.api.pickingManage.checkOutPick({
          taskType: 2
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            //  进入索取页面
            if (res.data.pickType === 200) {
              // 跳转复核台页面
              this.$u.route({
                url: 'pages/dispersion/reviewStage',
                type: 'navigateTo',
                params: {
                  pickGroup: this.result.pickGroup
                }
              })
            }
            //进入拣货页面
            if (res.data.pickType === 800) {
              // 整散合一
              this.$u.route({
                url: 'pages/dispersion/picking',
                type: 'navigateTo',
                params: {
                  list: JSON.stringify(res.data.businOutPickDTaskVo),
                  container: JSON.stringify(res.data.containrList)
                }
              })

            }
            // 进入绑定周转箱页面
            if (res.data.pickType === 801) {
              // 整件
              // if(params.taskType===1) {
              // 	this.$u.route({
              // 		url: 'pages/allPiece/bind',
              // 		type: 'navigateTo',
              // 		params: {
              // 			list: res.data.taskAndContainerList
              // 		}
              // 	})
              // }
              // 整散合一
              this.$u.route({
                url: 'pages/dispersion/bind',
                type: 'navigateTo',
                params: {
                  list: JSON.stringify(res.data.taskAndContainerList)
                }
              })
            }
          } else {
            this.$u.toast(res.msg);
          }

        });
      },
      judge() {
        if(this.pickQty < this.result.pickQty){
          this.showFlag = true
          this.show = true
          return
        }
        this.sure()
      },
      /**取消拣货*/
      abolish(){
       this.showFlag = false
       this.show = false
      },
      sure() {
        this.abolish()
        if (this.wareHouse) {
          var testNumber = /^[0-9]+.?[0-9]*$/;
          if (!testNumber.test(this.pickQty)) {
            this.$u.toast('请输入正确的拣货数量 ')
            return
          }
          if (this.pickQty > this.result.pickQty) {
            this.$u.toast('拣货数量不能超过原有数量')
            return
          }
          this.$u.api.pickingManage.pickCasePieceTaskConfirm({
            ...this.result,
            scannedLocationCode: this.wareHouse
          }).then((res) => {
            console.log(res)
            if (res.code === 200) {
              this.checkOutPick()
            } else {
              this.$u.toast(res.msg)
            }
          })
        } else {
          this.$u.toast('请先扫描货位')
        }
      },
    }
  }
</script>

<style lang="scss">
  .container {
    width: 90%;
    height: calc(100vh - 120rpx);
    margin: 20rpx auto;
    border: 0.5px solid #333333
  }

  .input {
    width: 90%;
    margin: 20rpx auto;
  }

  .content {
    width: 90%;
    margin: 20rpx auto;
  }

  .item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    line-height: 50rpx;

    .itemLabel {
      color: #555555;
      width: 160rpx;
      text-align: right;
    }

    .itemValue {
      color: #333333;
    }
  }

  .desktop {
    border-top: 0.5px solid #333333;
    border-left: 0.5px solid #333333;
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    margin: 0 auto;
  }

  .desktopItem {
    width: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 140rpx;
    border-bottom: 0.5px solid #333333;
    border-right: 0.5px solid #333333;
  }

  .desktopLabel {
    text-align: center;
  }

  .desktopValue {
    text-align: center;
    color: #0000FF;
    ;
  }

  .footer {
    width: 90%;
    margin: 0 auto;
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
  }
</style>
