<template>
  <view class="sh-content">
    <view class="sh-search">
      <u-form labelPosition="left" :model="dataForm" class="sh-form">
        <!-- 	<u-form-item label="容器" prop="containerCode" labelWidth="150rpx">
					<u-input v-model="dataForm.containerCode" border style="background-color: #ffffff;"
						placeholder="请输入或扫描容器号"></u-input>
				</u-form-item> -->
        <u-form-item label="商品条码" prop="goodsMnemonic" labelWidth="150rpx">
          <u-input v-model="dataForm.goodsMnemonic" border style="background-color: #ffffff;" placeholder="请输入或扫描条码"
            @input="inputQuery"></u-input>
        </u-form-item>
      </u-form>
      <!-- <view class="sh-sub-search" style="width: 130rpx">
				<u-button class="sh-search-button" @click="searchClick()">搜索</u-button> 
				<u-button class="sh-search-button" style="width: 130rpx" @click="searchClick()">任务查看</u-button>
			</view> -->
    </view>
    <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)">
      <view class="sh-card-title" :class="{'borderBottom':!item.businInShelfDVoList.length}">
        <view class="receipt-number">
          <text class="receipt-number-title">收货单号</text>
          <text class="receipt-number-value">{{item.sourceOrderNo}}</text>
        </view>
        <view class="card-content">
          <view class="card-content-item">
            <text class="item-title">商品编码</text>
            <text class="item-value">{{item.batchNo}}</text>
          </view>
          <view class="card-content-item">
            <text class="item-title">商品名称</text>
            <text class="item-value">{{item.bgGoodName}}</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 class="sh-card-content" v-for="(item2, index2) in item.businInShelfDVoList" :key="item2.id"
        :index="item2.id" @click="goodDetail(item2.id, item2.sid, item2.containerCode)">
        <view class="pad-content" :class="{'sh-card-title-border':(index2 + 1) < item.businInShelfDVoList.length}">
          <view class="goods-card-content">
            <view class="goods-card-content-item">
              <text class="goods-title">商品名称</text>
              <text class="goods-value">{{item2.bgGoodName}}</text>
            </view>
            <text class="goods-no">{{item2.bgGoodNo}}</text>
          </view>
          <view class="goods-card-content">
            <view class="goods-card-content-item">
              <text class="goods-title">商品批号</text>
              <text class="goods-value">{{item2.batchNo}}</text>
            </view>
          </view>
          <view class="detail-icon">
            <u-icon size="40" name="../../static/icon/bg-right.png"></u-icon>
          </view>
          <view class="goods-card-content">
            <view class="goods-card-content-item">
              <text class="goods-title">件装量</text><text class="goods-value">{{item2.bpPackageQty}}</text>
            </view>
            <view class="goods-card-content-item">
              <text class="goods-title">单位</text><text class="goods-value">{{transUnit(item2.bpUnit)}}</text>
            </view>
          </view>
          <view class="goods-card-content">
            <view class="goods-card-content-item">
              <text class="goods-title">验收数量</text><text class="goods-value">{{item.qty}}</text>
            </view>
            <view class="goods-card-content-item">
              <text class="goods-title">待上架数量</text><text class="goods-value">{{item.ableQty}}</text>
            </view>
          </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 {
        dataForm: {
          // containerCode: null,
          goodsMnemonic: "",
          pageNum: 1,
          pageSize: 10
        },
        dataList: [],
        query: {
          current: 1,
          size: 20
        },
        loadStatus: 'loadmore',
        dicOptions: [],
        queryFlag:'',
      }
    },
    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 !== null||this.queryFlag !== '') {
          clearTimeout(this.queryFlag);  this.loadList()
        }
        if (this.dataForm.goodsMnemonic == '') {
          return
        }
        this.queryFlag = setTimeout(() => {
          this.loadList()
        }, 500)
      },

      loadList() {
        this.$u.api.onShelf.pageShelf(this.dataForm).then(res => {
          if (!res.rows || res.rows.length == 0) {
            // if (this.dataForm.containerCode) {
            // 	this.$u.toast("当前容器无任务");
            // }
            if (this.dataForm.goodsMnemonic) {
              this.$u.toast("当前商品不存在");
            }
            this.loadStatus = "nomore";
            return;
          }
          this.dataList = res.rows;
          this.loadStatus = "loadmore";
        });
      },
      //detailId：明细id， sId：汇总id
      goodDetail(detailId, sid, containerCode) {
        this.$u.route({
          url: 'pages/onShelf/shelfTask',
          type: 'navigateTo',
          params: {
            detailId: detailId,
            sid: sid,
            // containerCode: containerCode
          }
        })
      },
      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";
</style>
