<template>
    <div class="order-wraper">
        <div class="search-confirm-wrap">
          <div class="search-wrap">
              <div class="search-item_3">
                  <button class="button button--primary" @click="_bypda">查询</button>
                  <button class="button button--primary" :class="{'button--defalut': pkId === ''}" @click="toSure">确认上料</button>
              </div>
          </div>
        </div>
        <div class="grid_wraper" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
          <table class="filter-table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>货位</th>
                    <th>载具号</th>
                    <th>物料规格</th>
                    <th>重量(g)</th>
                    <th>物料编号</th>
                    <th>入库时间</th>
                    <th>是否已挑料</th>
                    <th>入库类型</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(e, i) in dataList" :key="i" :class="{'selected_icon': pkId === e.struct_code}" @click="toRadio(e)">
                    <td>{{ i + 1 }}</td>
                    <td>{{e.struct_code}}</td>
                    <td>{{e.storagevehicle_code}}</td>
                    <td>{{e.material_spec}}</td>
                    <td>{{e.canuse_qty | numeric(3)}}</td>
                    <td>{{ e.material_code }}</td>
                    <td>{{ e.instorage_time }}</td>
                    <td>{{ e.is_pick === true ? '是' : '否' }}</td>
                    <td>{{ e.instorage_type }}</td>
                </tr>
            </tbody>
          </table>
          <div class="loading-tips">{{desc}}</div>
        </div>
    </div>
</template>

<script>
import { bypda } from '@config/getData2.js'
export default {
  data () {
    return {
      dataList: [],
      pkId: '',
      pkObj: {},
      page: 1,
      size: '99',
      busy: false,
      desc: ''
    }
  },
  created () {
    this._bypda()
  },
  methods: {
    // grid
    async _bypda () {
      this.page = 1
      this.busy = false
      this.desc = ''
      let res = await bypda(this.page + '', this.size)
      this.dataList = []
      this.dataList = [...res.content]
      if (res.content.length < 99) {
        this.busy = true
        this.desc = '已加载全部数据'
      }
    },
    async loadMore () {
      this.busy = true
      this.page++
      let res = await bypda(this.page + '', this.size)
      this.dataList = [...this.dataList, ...res.content]
      if (res.content.length < 99) {
        this.busy = true
        this.desc = '已加载全部数据'
      } else {
        this.busy = false
      }
    },
    toRadio (e) {
      this.pkId = this.pkId === e.struct_code ? '' : e.struct_code
      this.pkObj = this.pkId === e.struct_code ? e : {}
    },
    toSure () {
      if (!this.pkId) {
        return
      }
      this.$router.push({
        path: '/letteringmachineselect',
        query: {
          code: this.pkObj.struct_code,
          weight: this.pkObj.canuse_qty
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
