<template>
  <view class="sh-content">
    <view class="sh-search">
      <u-form labelPosition="left" :model="dataForm" class="sh-form">
        <u-form-item label="商品条码" prop="barCode" labelWidth="150rpx">
          <u-input v-model="dataForm.barCode" border style="background-color: #ffffff;" 
		  placeholder="请输入或扫描条码"
            @input="inputQuery()"></u-input>
        </u-form-item>
      </u-form>

    </view>
    <!-- {{dataList}} -->
    <view class="sh-card" v-for="(item, index) in dataList" :key="item.id" :index="item.id" 
	v-if="dataList.length > 0"
      @click="goodDetail(item.id, item.sid, item.containerCode)" style="border-radius: 20rpx;">
      <view class="sh-card-title"  style="border-radius: 20rpx;">
        <view class="card-content">
          <view class="card-content-item">
            <text class="item-title">收货单号</text>
            <text class="item-value">{{item.sourceOrderNo}}</text>
          </view>
 
        </view>    
		<view class="card-content">
		 <view class="card-content-item">
			  <text class="item-title">容器编码</text>
				<text class="item-value">{{item.containerCode}}</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 class="card-content">
          <view class="card-content-item">
            <text class="item-title">商品名称</text>
            <text class="item-value">{{item.goodName}}</text>
          </view>
        </view>
		
        <view class="card-content">
          <view class="card-content-item">
            <text class="item-title">验收数量</text>
            <text class="item-value">{{item.qty}}</text>
          </view>
          <view class="card-content-item">
            <text class="item-title">待上架数量</text>
            <text class="item-value">{{item.ableQty}}</text>
          </view>
        </view>
      </view>
     
    </view>
    
    <u-empty class="no-list" mode="list" v-else>
    </u-empty>
    <view class="loadmore-data">
      <u-loadmore :status="loadStatus"></u-loadmore>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showDiv:false,
        queryFlag: '',
        dataForm: {
          // containerCode: null,
          barCode: "",
          pageNum: 1,
          pageSize: 10
        },
        dataList: [],
        query: {
          current: 1,
          size: 20
        },
        loadStatus: 'loadmore',
        dicOptions: []
      }
    },
    onLoad() {
      this.getDic(); //获取字典
      this.loadList();
    },
    //上拉刷新(当数据距离底部100时触发，距离在pages.json配置)
    onReachBottom() {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.dataForm.pageNum += 1;
        this.loadList();
      }, 100);
    },
    methods: {
      /**搜索框查询*/
      inputQuery() {
        if (this.queryFlag !== '') {
          clearTimeout(this.queryFlag);
           this.loadList()
        }
        if (this.dataForm.barCode == '' || this.dataForm.barCode == null || this.dataForm.barCode ==
          undefined) {
          return
        }
        this.queryFlag = setTimeout(() => {
          this.loadList()
        }, 500)
      },
      loadList() {
        this.$u.api.AvgOnShelf.ListAvgOnShelf(this.dataForm).then(res => {
          this.dataList = [...res.rows];
          if (!res.rows || res.rows.length == 0) {
            if (this.dataForm.barCode) {
              this.$u.toast("当前商品不存在");
            }
            this.loadStatus = "nomore";
            return;
          }
          
          this.loadStatus = "loadmore";
        });
      },
      //detailId：明细id， sId：汇总id
      goodDetail(detailId, sid, containerCode) {
        this.$u.route({
          url: 'pages/AvgOnShelf/shelfTask',
          type: 'navigateTo',
          params: {
            detailId: detailId,
            sid: sid,
          }
        })
      },
      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;
          }
        }
      },
      // 任务查看
      searchClick() {
        // this.$u.route({
        // 	url: 'pages/onShelf/taskView',
        // 	type: 'navigateTo'
        // })
        this.dataList = [];
        this.dataForm.pageNum = 1;
        this.loadList();
      },
    }
  }
</script>

<style lang="scss">
  @import "index.scss";
  .footer {
    display: flex;
    padding: 20rpx 0;
  }
</style>
