<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 green"></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 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="['gray', 'blue', 'green', 'orange', 'red'][Number(el.status)]" @click="setInfo(el)">
            <div class="site_item_box clear">
              <h3 class="fl">站点</h3>
              <p class="fl">{{el.device_name}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div v-if="active" class="msg_wrapper">
      <div class="msg_box">
        <div class="msg_item">
          <div class="label_item">当前设备</div>
          <div class="from_item">
            {{obj.device_name}}
          </div>
        </div>
        <div class="msg_item">
          <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 class="msg_item">
          <div class="label_item">批次</div>
          <div class="from_item">
            <input type="text" class="input_item" v-model="batch">
          </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 {handArea, handPoint, handMatrial, handDeviceStatus} from '@config/getData2'
export default {
  name: 'siteManage',
  components: {
    NavBar
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      liConHeight: 0, // 折叠面板内容初始高度
      areaArr: [],
      pointArr: [],
      regobj: {},
      active: false,
      options: [],
      value: '',
      obj: {},
      batch: '',
      disabled1: false,
      disabled2: false
    }
  },
  mounted () {
    document.body.removeAttribute('class', 'login-bg')
    this.initArea()
    this.initHandMatrial()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh (e) {
      this.timer = setInterval(() => {
        this.initPonit(e)
      }, this.interTime)
    },
    async initArea () {
      let res = await handArea('1')
      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 handPoint(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.result])
          }
        })
      } else {
        this.Dialog(res.desc)
      }
    },
    async initHandMatrial () {
      let res = await handMatrial()
      if (res.code === '1') {
        this.options = [...res.result]
      } 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)
      }
    },
    toOpen (i) {
      const liCon = this.$refs.liCon[i]
      let height = liCon.offsetHeight
      if (height === this.liConHeight) { // 展开
        liCon.style.height = 'auto'
        height = liCon.offsetHeight
        liCon.style.height = this.liConHeight + 'px'
        // eslint-disable-next-line no-unused-vars
        let f = document.body.offsetHeight // 必加
        liCon.style.height = height + 'px'
      } else { // 收缩
        liCon.style.height = this.liConHeight + 'px'
      }
    },
    setInfo (e) {
      this.active = true
      this.obj = e
      this.value = e.material_type
      this.batch = e.batch
    },
    msgCancle () {
      this.active = false
      this.obj = {}
      this.value = ''
      this.batch = ''
    },
    msgSure () {
      this.disabled2 = true
      this.handStatus(this.obj.device_code, this.value, '1', this.obj.status, this.batch)
      this.active = false
    },
    cleanUp () {
      this.disabled1 = true
      this.handStatus(this.obj.device_code, '', '2', this.obj.status, '')
      this.active = false
    },
    async handStatus (code, mtype, type, no, batch) {
      try {
        let res = await handDeviceStatus(code, mtype, type, no, batch)
        if (res.code === '1') {
          this.toast(res.desc)
          clearInterval(this.timer)
          var that = this
          setTimeout(() => {
            that.initPonit(this.regobj)
            this.refresh(this.regobj)
            this.value = ''
            this.batch = ''
            this.disabled1 = false
            this.disabled2 = false
          }, 2000)
        } else {
          this.Dialog(res.desc)
          this.value = ''
          this.batch = ''
          this.disabled1 = false
          this.disabled2 = false
        }
      } catch (err) {
        console.log(err)
        this.value = ''
        this.batch = ''
        this.disabled1 = false
        this.disabled2 = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.icons
  height 24px
  margin-bottom .12rem
.item_icon
  _fj()
  margin-right .1rem
.color_icon
  _wh(15px,15px)
  border-radius 50%
  margin-right .1rem
.font_icon
  _font(16px, 24px, #000)
.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
    width calc(100% - 18px)
    _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
</style>
