<template>
  <section>
    <nav-bar title="软废组桶标签打印"></nav-bar>
    <section ref="content" class="content mgb70" :style="'margin-top: '+(0.96+2 * 0.92)+ 'rem'">
      <div class="filter-wraper">
        <search-box
        label="桶码"
        v-model="val1"
        @handleChange="handleChange1"
        ></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 class="mgl20">
            <button class="btn" :disabled="disabled4" :class="{'btn-disabled': this.val1 !== ''}" @click="searchList">查询</button>
          </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">
          </div>
        </div>
        <search-box
        label="袋码"
        v-model="val4"
        :focused='true'
        @handleChange="handleChange4"
        ></search-box>
      </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.bag_id" @click="toCheck(e)" :class="{'checked': e.bag_id === pkId}">
              <td>{{e.bucketunique}}</td>
            </tr>
          </table>
        </div>
        <div class="slide">
          <table class="layout-t">
            <tr>
              <th>袋码</th>
              <th>物料编码</th>
              <th>批次</th>
              <th>重量kg</th>
              <th>是否新加</th>
            </tr>
            <tr v-for="e in dataList" :key="e.bag_id" @click="toCheck(e)" :class="{'checked': e.bag_id === pkId}">
              <td>{{e.bag_id}}</td>
              <td>{{e.material_code}}</td>
              <td>{{e.pcsn}}</td>
              <td>{{e.storage_qty | numeric(3)}}</td>
              <td>{{e.is_new_name}}</td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <!-- <section class="calc_value_wraper">
      <div class="bottom-filter-tip">
        <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>
        <div class="fxrow bottom-filter-tip_2">
          <div class="filter-label width1">总重量</div>
          <div class="fxcol mgl20 width2">
            <input type="text" class="filter-input filter-scan-input" v-model="val5">
          </div>
          <div class="width3">KG</div>
        </div>
      </div>
    </section> -->
    <section class="calc_value_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" disabled v-model="val5">
        </div>
        <div class="mgl20">KG</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="disabled3" :class="{'btn-disabled': pkId === ''}" @click="deleteList">删除行</button>
      <button class="btn submit-button" :disabled="disabled5" :class="{'btn-disabled': dataList.length === 0 || val2 === '' || val2 === undefined}" @click="toSure">组桶</button>
      <button class="btn submit-button" :disabled="disabled1" :class="{'btn-disabled': dataList.length === 0 || val2 === '' || val2 === undefined}" @click="toSurePrint">组桶并打印</button>
      <button class="btn submit-button" :disabled="disabled2" :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/SearchBox.vue'
import { queryInfoBybucket, queryInfoByBag, confirmGroupBucket, bucketPrint, bucketDelete, getpcsn } from '@config/getData2.js'
import {accAdd, submitPackUp} from '@config/mUtils.js'
import {toPrint} from '@config/print.js'
export default {
  name: 'SoftWasteBarrelPrint',
  components: {
    NavBar,
    SearchBox
  },
  data () {
    return {
      val1: '',
      val2: '',
      val3: '',
      val4: '',
      result: {},
      dataList: [],
      dataList2: [],
      pkId: '',
      pkObj: {},
      disabled1: false,
      disabled2: false,
      disabled3: false,
      disabled4: false,
      disabled5: false,
      printWeight: true
    }
  },
  computed: {
    val5 () {
      let cur = '0.000'
      if (this.dataList.length) {
        this.dataList.map(el => {
          cur = accAdd(cur, el.storage_qty)
        })
        cur = Number(cur).toFixed(3) + ''
      }
      return cur
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.path === '/home' || to.path === '/login') {
      this.$store.dispatch('setKeepAlive', [])
    }
    next()
  },
  activated () {
    if (this.val2 !== '' && this.$store.getters.materObj !== '' && this.val2 !== this.$store.getters.materObj.material_code) {
      this.dataList = []
      this.val4 = ''
    }
    if (this.$store.getters.materObj !== '') {
      this.val2 = this.$store.getters.materObj.material_code
      this.val4 = ''
    }
  },
  created () {
    // let cd = new Date()
    // let year = cd.getFullYear()
    // let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
    // let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
    // this.val3 = year + month + date
    this._getpcsn()
  },
  methods: {
    handleChange1 (e, type) {
      if (type) {
        this._queryInfoBybucket(e)
      }
    },
    handleChange4 (e, type) {
      if (this.val2 === '') {
        this.toast('物料编码不能为空')
        return
      }
      if (type) {
        this._queryInfoByBag(e)
      }
    },
    toCheck (e) {
      this.pkId = this.pkId === e.bag_id ? '' : e.bag_id
      this.pkObj = this.pkId === e.bag_id ? e : {}
    },
    toAdd () {
      this.printWeight = !this.printWeight
    },
    /** 物料查询 */
    async searchList () {
      this.$router.push({
        path: '/MaterInfoSearchRadio'
      })
    },
    /** 批次查询 */
    async _getpcsn () {
      let res = await getpcsn()
      if (res.code === '1') {
        this.val3 = res.result
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 桶码查询信息 */
    async _queryInfoBybucket (e) {
      let res = await queryInfoBybucket(e)
      if (res.code === '1') {
        this.$store.dispatch('materObj', '')
        this.result = res.result.result
        this.val1 = res.result.result.bucketunique
        this.disabled4 = true
        this.val2 = res.result.result.material_code
        this.val3 = res.result.result.pcsn
        this.dataList = []
        this.val4 = ''
        this.dataList = res.result.results
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 袋码查询信息 */
    async _queryInfoByBag (e) {
      let res = await queryInfoByBag(e)
      if (res.code === '1') {
        let pai = this.getPai(this.val2)
        if (pai === res.result.material_code) {
          if (this.dataList.length) {
            let arr1 = this.dataList.filter(el => {
              return el.bag_id === res.result.bag_id
            })
            if (arr1.length === 0) {
              this.dataList.push(res.result)
            } else {
              this.toast('袋码已存在')
              this.val4 = ''
            }
          } else {
            if (JSON.stringify(res.result) !== '{}') {
              this.dataList.push(res.result)
            }
          }
        } else {
          this.toast('袋物料PG粉与所选软废PG粉物料不一致')
          this.val4 = ''
        }
        // if (this.dataList.length) {
        //   let arr1 = this.dataList.filter(el => {
        //     return el.material_code.split('-')[0] === res.result.material_code.split('-')[0]
        //   })
        //   let arr2 = this.dataList.filter(el => {
        //     return el.bag_id === res.result.bag_id
        //   })
        //   if (arr1.length === this.dataList.length) {
        //     if (arr2.length === 0) {
        //       this.dataList.push(res.result)
        //     } else {
        //       this.toast('袋码已存在')
        //     }
        //   } else {
        //     this.toast('返回信息牌号与列表中的所有牌号不一致')
        //   }
        // } else {
        //   if (JSON.stringify(res.result) !== '{}') {
        //     this.dataList.push(res.result)
        //   }
        // }
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 获取牌号 */
    getPai (a) {
      let arr1 = a.split('-')
      arr1.pop()
      let arr3 = arr1.join('-')
      return arr3
    },
    /** 删除行 */
    deleteList () {
      this.disabled3 = true
      if (this.pkId === '') {
        this.toast('袋码不能为空')
        this.disabled3 = false
        return
      }
      if (this.pkId !== '' && (this.pkObj.bucketunique !== this.result.bucketunique)) {
        this.dataList.map((el, i) => {
          if (el.bag_id === this.pkId) {
            this.dataList.splice(i, 1)
          }
        })
        this.pkId = ''
        this.pkObj = {}
        this.disabled3 = false
        return
      }
      this._bucketDelete()
    },
    async _bucketDelete () {
      try {
        let res = await bucketDelete(this.pkObj.bucketunique, this.pkId)
        if (res.code === '1') {
          this.toast(res.desc)
          this.dataList.map((el, i) => {
            if (el.bag_id === this.pkId) {
              this.dataList.splice(i, 1)
            }
          })
          this.pkId = ''
          this.pkObj = {}
        } else {
          this.Dialog(res.desc)
        }
        this.disabled3 = false
      } catch (e) {
        this.disabled3 = false
      }
    },
    /** 组桶 */
    toSure () {
      this.disabled5 = true
      if (this.dataList.length === 0) {
        this.disabled5 = false
        return
      }
      if (this.val2 === '' || this.val2 === undefined) {
        this.toast('物料编码不能为空')
        this.disabled5 = false
        return
      }
      this._confirmGroupBucket()
    },
    async _confirmGroupBucket () {
      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 newObj = Object.assign({}, this.result, this.$store.getters.materObj, {pcsn: this.val3, storage_qty: this.val5, accountId: accountId, user: user})
        let res = await confirmGroupBucket(newObj, this.dataList)
        if (res.code === '1') {
          this.toast(res.desc)
          this.val1 = ''
          this.val4 = ''
          this.result = {}
          this.dataList = []
          this.dataList2 = []
          this.pkId = ''
          this.pkObj = {}
          this.disabled5 = false
        } else {
          this.Dialog(res.desc)
          this.disabled5 = false
        }
      } catch (e) {
        this.disabled5 = false
      }
    },
    /** 组桶并打印 */
    toSurePrint () {
      this.disabled1 = true
      if (this.dataList.length === 0) {
        this.disabled1 = false
        return
      }
      if (this.val2 === '' || this.val2 === undefined) {
        this.toast('物料编码不能为空')
        this.disabled1 = false
        return
      }
      // if (this.$store.getters.materObj !== '' && Number(this.val5) > Number(this.$store.getters.materObj.standard_weight)) {
      //   this.toast('总重量不能超过该软废产品标准桶重量')
      //   this.disabled1 = 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 newObj = Object.assign({}, this.result, this.$store.getters.materObj, {pcsn: this.val3, storage_qty: this.val5, accountId: accountId, user: user})
        let res = await confirmGroupBucket(newObj, this.dataList)
        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.val1 = ''
          this.val4 = ''
          this.result = {}
          this.dataList = []
          this.dataList2 = []
          this.pkId = ''
          this.pkObj = {}
          this.disabled1 = false
        } else {
          this.Dialog(res.desc)
          this.disabled1 = false
        }
      } catch (e) {
        this.disabled1 = false
      }
    },
    async toPrint () {
      this.disabled2 = true
      if (this.val1 === '') {
        this.disabled2 = false
        return
      }
      try {
        let res = await bucketPrint(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.disabled2 = false
      } catch (e) {
        this.disabled2 = false
      }
    },
    /** 清空 */
    cancle () {
      // Object.assign(this.$data, this.$options.data())
      this.val1 = ''
      this.val2 = ''
      this.val4 = ''
      this.result = {}
      this.dataList = []
      this.dataList2 = []
      this.pkId = ''
      this.pkObj = {}
      this.disabled1 = false
      this.disabled2 = false
      this.disabled3 = false
      this.disabled4 = false
      this.disabled5 = false
      this.$store.dispatch('materObj', '')
      this._getpcsn()
    },
    packUp () {
      this.up = submitPackUp(this.$refs.submit, this.$refs.arrow, this.$refs.content, 2, this.up)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.bottom-filter-tip_1
  width 35%
  margin-right 5%
.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>
