<template>
  <section>
    <nav-bar title="组盘"></nav-bar>
    <section class="content">
      <div class="filter-wraper">
        <search-box
        ref="myInput1"
        label="托盘码"
        v-model="val1"
        @handleChange="handleChange1"
        ></search-box>
        <search-box
        ref="myInput2"
        label="物料条码"
        :focused="true"
        v-model="val2"
        @handleChange="handleChange2"
        ></search-box>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">托盘</div>
          <div class="fxcol mgl20 visible" >
            <dropdown-menu
            :option="option"
            :active="active"
            :open="open"
            @toggleItem="toggleItem"
            @dropdownMenu="dropdownMenu">
            </dropdown-menu>
          </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, i) in dataList" :key="i">
              <td>{{e.BillID}}</td>
            </tr>
          </table>
        </div>
        <div class="slide">
          <table class="layout-t">
            <tr>
              <th>物料编码</th>
              <th>物料名称</th>
              <th>批次</th>
              <th>库存数量</th>
            </tr>
            <tr v-for="(e, i) in dataList" :key="i">
              <td>{{e.MatCode}}</td>
              <td>{{e.MatName}}</td>
              <td>{{e.BatchNumber}}</td>
              <td>{{e.MatNum}}</td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <section class="submit-bar">
      <button class="btn submit-button" :class="{'btn-disabled' : !val1 || !val2 || !active}" :disabled="disabled" @click="_rfTrayPackage">组盘</button>
      <button class="btn submit-button" @click="toCancle">取消</button>
    </section>
  </section>
</template>

<script>
import NavBar from '@components/NavBar.vue'
import SearchBox from '@components/SearchBox.vue'
import DropdownMenu from '@components/DropdownMenu.vue'
import {rfReadTrayStatePackage, rfReadTrayStoragePackage, rfReadMatBarCodeStatePackage, rfTrayPackage} from '@config/getData2'
export default {
  name: 'GroupDisk',
  components: {
    NavBar,
    SearchBox,
    DropdownMenu
  },
  data () {
    return {
      val1: '',
      val2: '',
      option: [{value: '34', label: '高尺寸托盘'}, {value: '33', label: '低尺寸托盘'}],
      active: '',
      open: false,
      dataList: [],
      disabled: false
    }
  },
  mounted () {
    this.$refs.myInput1.handleScan()
  },
  methods: {
    /** 读取托盘码 */
    async _rfReadTrayStatePackage (val) {
      try {
        let res = await rfReadTrayStatePackage(val)
        if (res.ErrNO === '1') {
          // this.toast(res.ErrMsg)
          this.$refs.myInput2.handleScan()
          this._rfReadTrayStoragePackage()
        } else {
          this.toast(res.ErrMsg)
          this.val1 = ''
        }
      } catch (e) {
        this.val1 = ''
      }
    },
    /** 托盘库存信息 */
    async _rfReadTrayStoragePackage () {
      let res = await rfReadTrayStoragePackage(this.val1)
      if (res.ErrNO === '1') {
        this.dataList = [...res.StorageList]
      } else {
        this.toast(res.ErrMsg)
      }
    },
    /** 读取物料条码 */
    async _rfReadMatBarCodeStatePackage (val) {
      try {
        let res = await rfReadMatBarCodeStatePackage(this.val1, val)
        if (res.ErrNO === '1') {
          this.toast(res.ErrMsg)
        } else {
          this.toast(res.ErrMsg)
          this.val2 = ''
        }
      } catch (e) {
        this.val2 = ''
      }
    },
    handleChange1 (e, type) {
      if (type) {
        this._rfReadTrayStatePackage(e)
      }
    },
    handleChange2 (e, type) {
      if (type) {
        this._rfReadMatBarCodeStatePackage(e)
      }
    },
    /** 组盘 */
    async _rfTrayPackage () {
      this.disabled = true
      if (!this.val1 || !this.val2 || !this.active) {
        this.disabled = false
        return
      }
      try {
        let uid = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).UserPID : ''
        let res = await rfTrayPackage(this.val1, this.val2, this.option[this.active].value, uid)
        if (res.ErrNO === '1') {
          this.toast(res.ErrMsg)
        } else {
          this.Dialog(res.ErrMsg)
        }
        this.toCancle()
      } catch (e) {
        this.disabled = false
      }
    },
    /** 取消 */
    toCancle () {
      this.val1 = ''
      this.val2 = ''
      this.dataList = []
      this.active = ''
      this.disabled = false
      this.$refs.myInput1.handleScan()
    },
    toggleItem () {
      if (!this.open) {
        this.open = true
      } else {
        this.open = false
      }
    },
    dropdownMenu (i) {
      this.active = i + ''
      this.open = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.grid-wraper
  height calc(100% - 3.15rem)
</style>
