<template>
  <section>
    <nav-bar :inner="true" title="查找关联单据"></nav-bar>
    <section class="content mgt196 mgb70" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
      <div class="filter-wraper">
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">批次</div>
          <div class="fxcol mgl20">
            <input type="text" class="filter-input filter-scan-input" placeholder="批次号" v-model="val1">
          </div>
        </div>
      </div>
      <div class="grid-wraper">
        <div class="left_fixed">
          <table class="layout-t left_layout_t">
            <tr>
            <th>物料编码</th>
            </tr>
            <tr v-for="e in dataList" :key="e.source_billdtl_id" @click="toCheck(e)" :class="{'checked': e.source_billdtl_id === pkId}">
              <td>{{e.material_code}}</td>
            </tr>
          </table>
        </div>
        <div class="slide">
          <table class="layout-t">
            <tr>
              <th>物料名称</th>
              <th>批次</th>
              <th>重量kg</th>
              <th>待组重量kg</th>
              <th>单据号</th>
              <th>单据日期</th>
            </tr>
            <tr v-for="e in dataList" :key="e.source_billdtl_id" @click="toCheck(e)" :class="{'checked': e.source_billdtl_id === pkId}">
              <td>{{e.material_name}}</td>
              <td>{{e.pcsn}}</td>
              <td>{{e.receive_qty | numeric(3)}}</td>
              <td>{{e.need_qty | numeric(3)}}</td>
              <td>{{e.source_bill_code}}</td>
              <td>{{e.receive_date}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="loading-tips">{{desc}}</div>
    </section>
    <section class="submit-bar">
      <button class="btn submit-button" @click="toSearch">查询</button>
      <button class="btn submit-button" :class="{'btn-disabled': pkId === ''}" @click="toSure">确认</button>
    </section>
  </section>
</template>

<script>
import NavBar from '@components/NavBar.vue'
import {getBillDtl} from '@config/getData2.js'
export default {
  name: 'SearchRelatedBill',
  components: {
    NavBar
  },
  data () {
    return {
      val1: '',
      dataList: [],
      pkId: '',
      pkObj: {},
      page: 1,
      size: '10',
      busy: false,
      desc: ''
    }
  },
  created () {
    // this._getBillDtl()
  },
  methods: {
    toSearch () {
      this.dataList = []
      this.pkId = ''
      this.pkObj = {}
      this.page = 1
      this.size = '10'
      this.busy = false
      this.desc = ''
      this._getBillDtl()
    },
    toCheck (e) {
      this.pkId = this.pkId === e.source_billdtl_id ? '' : e.source_billdtl_id
      this.pkObj = this.pkId === e.source_billdtl_id ? e : {}
    },
    toSure () {
      if (this.pkId !== '') {
        this.$store.dispatch('materObj', this.pkObj)
        this.$router.back()
      } else {
        this.toast('请选择一行')
      }
    },
    async loadMore () {
      this.busy = true
      this.page++
      this.desc = '加载数据中...'
      let res = await getBillDtl(this.page + '', this.size, this.val1)
      if (res.code === '1') {
        let newArr = []
        res.rows.map(el => { newArr.push(Object.assign({}, el, {checked: 0})) })
        this.dataList = [...this.dataList, ...newArr]
        if (res.rows.length < 10) {
          this.busy = true
          this.desc = '已加载全部数据'
        } else {
          this.busy = false
        }
      } else {
        this.Dialog(res.desc)
        this.desc = res.desc
      }
    },
    async _getBillDtl () {
      let res = await getBillDtl(this.page + '', this.size, this.val1)
      if (res.code === '1') {
        let newArr = []
        res.rows.map(el => { newArr.push(Object.assign({}, el, {checked: 0})) })
        this.dataList = [...newArr]
        if (res.rows.length < 10) {
          this.busy = true
          this.desc = '已加载全部数据'
        }
      } else {
        this.Dialog(res.desc)
        this.desc = res.desc
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
>>>.content
  height calc(100% - 2.49rem)
  overflow-y auto
</style>
