<template>
  <section>
    <nav-bar title="软废无袋组桶标签打印"></nav-bar>
    <section ref="content" class="content mgb70" :style="'margin-top: '+(0.96+ 0.92 + 0.76)+ 'rem'">
      <div class="filter-wraper">
        <search-box
        ref="scanChild"
        label="桶码"
        placeholder="请按扫码键输入"
        v-model="val1"
        @handleChange="handleChange"
        ></search-box>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">物料编码</div>
          <div class="fxcol mgl20">
            <input type="text" class="filter-input filter-scan-input" v-model="val2" disabled>
          </div>
        </div>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">批次</div>
          <div class="fxcol mgl20">
            <input type="text" class="filter-input filter-scan-input" v-model="val3" disabled>
          </div>
        </div>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">是否可用</div>
          <div class="fxcol mgl20 visible" >
            <dropdown-menu
            :option="option"
            :active="active"
            :open="open"
            :disabled="true">
            </dropdown-menu>
          </div>
        </div>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">日期</div>
          <div class="fxcol mgl20">
            <input type="text" class="filter-input filter-scan-input" v-model="val5" disabled>
          </div>
        </div>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">等级</div>
          <div class="fxcol mgl20 visible" >
            <dropdown-menu
            :option="option1"
            :active="active1"
            :open="open1"
            @toggleItem="toggleItem1"
            @dropdownMenu="dropdownMenu1">
            </dropdown-menu>
          </div>
        </div>
        <div class="bottom-filter-tip">
          <div class="filter-label txtjustify">总重量</div>
          <div class="fxcol mgl20">
            <input type="text" class="filter-input filter-scan-input" v-model="val4" disabled>
          </div>
          <div class="mgl20">KG</div>
        </div>
      </div>
    </section>
    <section ref="submit" class="submit-bar submit-bar1">
      <button class="btn submit-button" @click="cancle">清空</button>
      <button class="btn submit-button" :disabled="disabled1" :class="{'btn-disabled': val1 === ''}" @click="toSure">组桶</button>
      <button class="btn submit-button" :disabled="disabled2" :class="{'btn-disabled': val1 === ''}" @click="toSurePrint">组桶并打印</button>
      <button class="btn submit-button" :disabled="disabled3" :class="{'btn-disabled': val1 === ''}" @click="toPrint">打印</button>
      <div class="fxrow bottom-filter-tip_1">
        <div class="iconfont check_icon check_icon--squa" :class="{'check_icon--checked': printWeight === true}" @click="toAdd"></div>
        <div class="check_icon_txt">是否打印重量</div>
      </div>
      <i ref="arrow" class="iconfont open_icon" @click="packUp"></i>
    </section>
  </section>
</template>

<script>
import NavBar from '@components/NavBar.vue'
import SearchBox from '@components/SearchBox3.vue'
import DropdownMenu from '@components/DropdownMenu.vue'
import { bucketGetLevel, confirmGroupBucketNo, bucketPrintNo } from '@config/getData2.js'
import {submitPackUp} from '@config/mUtils.js'
import {toPrint} from '@config/print.js'
export default {
  name: 'SoftWasteBarrelPrint',
  components: {
    NavBar,
    SearchBox,
    DropdownMenu
  },
  data () {
    return {
      val1: '',
      val2: '',
      val3: '',
      val4: '',
      val5: '',
      result: {},
      dataList: [],
      dataList2: [],
      pkId: '',
      pkObj: {},
      disabled1: false,
      disabled2: false,
      disabled3: false,
      disabled5: false,
      printWeight: true,
      option: [{value: '0', label: '不可用'}, {value: '1', label: '可用'}],
      active: '',
      open: false,
      option1: [],
      active1: '',
      open1: false
    }
  },
  created () {
    this._bucketGetLevel()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.scanChild.handleFocus()
    })
  },
  methods: {
    handleChange (e) {
      let arr = e.split('##')
      this.val1 = arr[0]
      this.val2 = arr[1]
      this.val3 = arr[2]
      this.val4 = arr[3]
      this.val5 = arr[4]
      this.active = arr[5] + ''
      if (this.option1.length) {
        this.option1.map((el, i) => {
          if (el.value === arr[5]) {
            this.active1 = i + ''
          }
        })
      }
    },
    toAdd () {
      this.printWeight = !this.printWeight
    },
    /** 等级 */
    async _bucketGetLevel () {
      let res = await bucketGetLevel()
      if (res.code === '1') {
        this.option1 = [...res.result]
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 组桶 */
    toSure () {
      this.disabled1 = true
      if (this.val1 === '') {
        this.toast('桶码不能为空')
        this.disabled1 = false
        return
      }
      this._confirmGroupBucketNo()
    },
    async _confirmGroupBucketNo () {
      try {
        let accountId = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).account_id : ''
        let user = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user_name : ''
        let active = this.active !== '' ? this.option[this.active].value : ''
        let active1 = this.active1 !== '' ? this.option1[this.active1].value : ''
        let newObj = {'accountId': accountId, 'user': user, 'bucketunique': this.val1, 'material_code': this.val2, 'pcsn': this.val3, 'storage_qty': this.val4, 'date': this.val5, 'is_active': active, 'ivt_level': active1}
        let res = await confirmGroupBucketNo(newObj)
        if (res.code === '1') {
          this.toast(res.desc)
          this.cancle()
        } else {
          this.Dialog(res.desc)
          this.disabled1 = false
        }
      } catch (e) {
        this.disabled1 = false
      }
    },
    /** 组桶并打印 */
    toSurePrint () {
      this.disabled2 = true
      if (this.val1 === '') {
        this.toast('桶码不能为空')
        this.disabled2 = false
        return
      }
      this._confirmGroupBucketPrint()
    },
    async _confirmGroupBucketPrint () {
      try {
        let accountId = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).account_id : ''
        let user = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user_name : ''
        let active = this.active !== '' ? this.option[this.active].value : ''
        let active1 = this.active1 !== '' ? this.option1[this.active1].value : ''
        let newObj = {'accountId': accountId, 'user': user, 'bucketunique': this.val1, 'material_code': this.val2, 'pcsn': this.val3, 'storage_qty': this.val4, 'date': this.val5, 'is_active': active, 'ivt_level': active1}
        let res = await confirmGroupBucketNo(newObj)
        if (res.code === '1') {
          this.toast(res.desc)
          if (JSON.stringify(res.result) !== '{}') {
            this.result = res.result.result
            this.val1 = res.result.bucketunique
            this.val2 = res.result.material_code
            this.val3 = res.result.pcsn
            let data = Object.assign({}, res.result, {printWeight: this.printWeight})
            setTimeout(toPrint(data), 800)
          }
          this.cancle()
        } else {
          this.Dialog(res.desc)
          this.disabled2 = false
        }
      } catch (e) {
        this.disabled2 = false
      }
    },
    async toPrint () {
      this.disabled3 = true
      if (this.val1 === '') {
        this.disabled3 = false
        return
      }
      try {
        let res = await bucketPrintNo(this.val1)
        if (res.code === '1') {
          this.toast(res.desc)
          if (JSON.stringify(res.result) !== '{}') {
            let data = Object.assign({}, res.result, {printWeight: this.printWeight})
            setTimeout(toPrint(data), 800)
          }
          Object.assign(this.$data, this.$options.data())
        } else {
          this.Dialog(res.desc)
        }
        this.disabled3 = false
      } catch (e) {
        this.disabled3 = false
      }
    },
    /** 清空 */
    cancle () {
      this.val1 = ''
      this.val2 = ''
      this.val3 = ''
      this.val4 = ''
      this.val5 = ''
      this.result = {}
      this.active = ''
      this.active1 = ''
      this.disabled1 = false
      this.disabled2 = false
      this.disabled3 = false
      this.$refs.scanChild.handleFocus()
    },
    packUp () {
      this.up = submitPackUp(this.$refs.submit, this.$refs.arrow, this.$refs.content, 2, this.up)
    },
    toggleItem1 () {
      if (!this.open1) {
        this.open1 = true
      } else {
        this.open1 = false
      }
    },
    dropdownMenu1 (i) {
      this.active1 = i + ''
      this.open1 = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.bottom-filter-tip_1
  width 35%
  margin .2rem 5% .2rem 0
.bottom-filter-tip_2
  width 65%
.width1
  width .9rem
.width2
  width calc(100% - 1.5rem)
.width3
  width .5rem
  _font(.3rem,1,#323232,,right)
.check_icon_txt
  _font(.3rem,1,#323232,,left)
</style>
