<template>
    <section>
      <nav-bar title="点位管理"></nav-bar>
      <section class="content mgt15">
        <div class="clear icons">
          <div class="fl item_icon">
            <div class="color_icon gray"></div>
            <div class="font_icon">空位</div>
          </div>
          <!-- <div class="fl item_icon">
            <div class="color_icon blue"></div>
            <div class="font_icon">有空桶</div>
          </div> -->
          <div class="fl item_icon">
            <div class="color_icon orange"></div>
            <div class="font_icon">待检品</div>
          </div>
          <div class="fl item_icon">
            <div class="color_icon green"></div>
            <div class="font_icon">合格品</div>
          </div>
          <div class="fl item_icon">
            <div class="color_icon red"></div>
            <div class="font_icon">不良品</div>
          </div>
        </div>
        <div class="locate_block" v-for="e in areaArr" :key="e.region_id">
          <div class="locate_name" @click="getPonit (e)">
            <h2>{{e.region_name}}</h2>
            <div class="iconfont open_icon" :class="{'is_reverse': e.checked === true}"></div>
          </div>
          <div v-show="e.checked === true" class="site_block clear" ref="liCon">
            <div class="site_item fl" v-for="(el, i) in e.pointArr" :key="i" :class="el.product_code !== '' ? ['orange', 'green', 'red'][Number(el.quality_scode)] : 'gray'" @click="setInfo(el)">
              <div class="site_item_box clear">
                <h3 class="fl">站点</h3>
                <p class="fl">{{el.point_name}}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div v-if="active" class="msg_wrapper">
        <div class="msg_box">
        <div class="msg_item_wrap">
            <div class="msg_item">
                <div class="label_item">当前点位</div>
                <div class="from_item">
                {{obj.point_name}}
                </div>
            </div>
            <div class="msg_item">
                <div class="label_item">产品名称</div>
                <div class="from_item">
                {{obj.product_code}}
                </div>
            </div>
        </div>
        <div class="msg_item_wrap">
            <div class="msg_item">
                <div class="label_item">产品规格</div>
                <div class="from_item">
                {{obj.batch_code}}
                </div>
            </div>
            <div class="msg_item">
                <div class="label_item">批号</div>
                <div class="from_item">
                {{obj.product_specifications}}
                </div>
            </div>
        </div>
        <div class="msg_item_wrap">
            <div class="msg_item">
                <div class="label_item">重量</div>
                <div class="from_item">
                {{obj.weight}}
                </div>
            </div>
            <div class="msg_item">
                <div class="label_item">时间</div>
                <div class="from_item">
                {{obj.time}}
                </div>
            </div>
        </div>
        <div class="msg_item_wrap">
            <div class="msg_item allwidth">
                <div class="label_item">质量状态</div>
                <div class="from_item">
                    <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                    </el-select>
                </div>
            </div>
        </div>
          <div class="msg_btns">
            <button class="msg_btn" :disabled="disabled1" @click="cleanUp">清空</button>
            <button class="msg_btn" :disabled="disabled2" @click="msgSure">确认</button>
            <button class="msg_btn" @click="msgCancle">取消</button>
          </div>
        </div>
      </div>
      <div v-if="active" class="mask"></div>
    </section>
  </template>

<script>
import NavBar from '@components/NavBar.vue'
import {queryRegion, queryPoint, emptyAndQtyConfirm} from '@config/getData2'
export default {
  name: 'PointManage',
  components: {
    NavBar
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      liConHeight: 0, // 折叠面板内容初始高度
      areaArr: [],
      pointArr: [],
      regobj: {},
      active: false,
      options: [{value: '00', label: '待检品'}, {value: '01', label: '合格品'}, {value: '02', label: '不良品'}],
      value: '',
      obj: {},
      disabled1: false,
      disabled2: false
    }
  },
  mounted () {
    document.body.removeAttribute('class', 'login-bg')
    this.initArea()
  },
  //   beforeDestroy () {
  //     clearInterval(this.timer)
  //   },
  methods: {
    // refresh (e) {
    //   this.timer = setInterval(() => {
    //     this.initPonit(e)
    //   }, this.interTime)
    // },
    async initArea () {
      let res = await queryRegion()
      if (res.code === '1') {
        this.areaArr = [...res.result]
        this.areaArr.map(el => {
          this.$set(el, 'checked', false)
          this.$set(el, 'pointArr', [])
        })
        if (this.areaArr.length > 0) {
          this.getPonit(this.areaArr[0])
        }
      } else {
        this.Dialog(res.desc)
      }
    },
    async initPonit (e) {
      let res = await queryPoint(e.region_id)
      if (res.code === '1') {
        this.regobj = e
        this.areaArr.map(el => {
          if (el.region_id === e.region_id) {
            this.$set(el, 'pointArr', [...res.pointArr])
          }
        })
      } else {
        this.Dialog(res.desc)
      }
    },
    getPonit (e) {
    //   clearInterval(this.timer)
      this.areaArr.map(el => {
        if (el.region_id !== e.region_id) {
          el.checked = false
        }
        if (el.region_id === e.region_id) {
          e.checked = !e.checked
        }
      })
      if (e.checked) {
        this.initPonit(e)
        // this.refresh(e)
      }
    },
    setInfo (e) {
      this.active = true
      this.obj = e
      this.value = e.quality_scode
    },
    msgCancle () {
      this.active = false
      this.obj = {}
      this.value = ''
    },
    msgSure () {
      this.disabled2 = true
      this._emptyAndQtyConfirm(this.obj.point_id, '1', this.value)
      this.active = false
    },
    cleanUp () {
      this.disabled1 = true
      this._emptyAndQtyConfirm(this.obj.point_id, '2', this.value)
      this.active = false
    },
    async _emptyAndQtyConfirm (id, type, code) {
      try {
        let res = await emptyAndQtyConfirm(id, type, code)
        if (res.code === '1') {
          this.toast(res.desc)
          this.initPonit(this.regobj)
          this.value = ''
          this.disabled1 = false
          this.disabled2 = false
          //   clearInterval(this.timer)
          //   var that = this
          //   setTimeout(() => {
          //     that.initPonit(this.regobj)
          //     this.refresh(this.regobj)
          //     this.value = ''
          //     this.disabled1 = false
          //     this.disabled2 = false
          //   }, 2000)
        } else {
          this.Dialog(res.desc)
          this.value = ''
          this.disabled1 = false
          this.disabled2 = false
        }
      } catch (err) {
        console.log(err)
        this.value = ''
        this.disabled1 = false
        this.disabled2 = false
      }
    }
  }
}
</script>

  <style lang="stylus" scoped>
  @import '~@style/mixin'
  .locate_block
    width 100%
    background-color #fff
    border-radius 5px
    padding .1rem
    margin-bottom .12rem
  .locate_name
    position relative
    _wh(100%,24px)
    h2
      _font(16px,24px,#000,500)
  .site_block
    _wh(100%,auto)
    overflow hidden
    transition height .3s
  .site_item
    _wh(32%,50px)
    padding 0 .1rem
    margin-top .12rem
    background-color #e5e5e5
    border-radius 5px
    margin-right 2%
    overflow hidden
    &:nth-child(3n)
      margin-right 0
  .site_item_box
    _wh(100%, 40px)
    margin 5px 0
    overflow hidden
    h3
      display block
      width 18px
      _font(14px,20px,#000,500)
    p
      display block
      _fj(center)
      width calc(100% - 18px)
      height 40px
      _font(14px,20px,#999)
      background-color #fff
      border-radius 3px
      padding 0 .05rem
  .open_icon
    position absolute
    right 0
    top 0
    _wh(24px,24px)
    _font(20px,24px,$red,,right)
    transition all .3s
    transform rotateZ(180deg)
  .is_reverse
    transform rotateZ(0)
  .gray
    background-color #e5e5e5
  .blue
    background-color $blue
.green
    background-color $green
  .orange
    background-color orange
  .red
    background-color red
.msg_item
    _fj()
    height 35px
    line-height 35px
    margin-bottom 15px
.label_item
    width 70px
.from_item
    width calc(100% - 70px)
.allwidth
    width 100%
  </style>
