<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="content_wrap_inner content_wrap_inner_1">
        <div class="state_wrap state_wrap_1">
          <div class="state_tip">偏离状态</div>
          <div class="state_content">
            <div class="state_item_1">{{status.inLineStatus_name}}</div>
          </div>
        </div>
        <div class="state_wrap state_wrap_1">
          <div class="state_tip">更新状态</div>
          <div class="state_content">
            <div class="state_item_1">{{status.UpdateStatus_name}}</div>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">显示屏控制</div>
        <div class="state_content">
          <button class="state_item_switch" :class="{'is-checked': switch1 === '1'}" :disabled="disabled" @click="switchDown('2', switch1)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </button>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">TCS控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="disabled" @click="switchDown('3', switch2)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">SCHE控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="disabled" @click="switchDown('4', switch3)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">RC控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="disabled" @click="switchDown('5', switch4)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">Joy控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch5 === '1'}" :disabled="disabled" @click="switchDown('6', switch5)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">AGV</div>
        <div class="state_content">
          <button class="state_item_4 pointer" @click="switchDown('9', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_2"></span>
              <span class="state_item_4_txt">跳过起点</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="_queryRestPoint" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_6"></span>
              <span class="state_item_4_txt">初始化坐标</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('11', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_4"></span>
              <span class="state_item_4_txt">全屏</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('7', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_3"></span>
              <span class="state_item_4_txt">退出</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('1', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_5"></span>
              <span class="state_item_4_txt">关机</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('8', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_1"></span>
              <span class="state_item_4_txt">软启动</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('10', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_7"></span>
              <span class="state_item_4_txt">重启</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('12', '0')" :disabled="disabled">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_8"></span>
              <span class="state_item_4_txt">跳过检测</span>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div v-show="show" class="pop_wrapper">
      <div class="pop_box">
        <h2>初始化坐标</h2>
        <div class="pop_ul_wrapper">
          <ul class="pop_ul">
            <li>坐标信息</li>
            <li v-for="(e,i) in result" :key="i" @click="tocheck(e)" :class="{'checked': e === obj}"><span class="pop_ul_span">{{e.point_code}}</span><span class="pop_ul_span">{{e.point_name}}</span><span class="pop_ul_span">{{e.x}}</span><span class="pop_ul_span">{{e.y}}</span><span class="pop_ul_span">{{e.t}}</span></li>
          </ul>
        </div>
        <div class="pop_btns_box">
          <button class="button button--primary" :class="{'button--info': JSON.stringify(obj) ==='{}'}" :disabled="disabled" @click="_restCoordinate">确定</button>
          <button class="button button--primary" @click="show=false">退出</button>
        </div>
      </div>
    </div>
    <div v-show="show" class="modal"></div>
  </div>
</div>
</template>

<script>
import {ShutDown, queryRestPoint, restCoordinate, queryAgvStatus} from '@config/getData2.js'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      show: false,
      result: [],
      obj: {},
      status: {},
      switch1: '',
      switch2: '',
      switch3: '',
      switch4: '',
      switch5: '',
      disabled: false
    }
  },
  created () {
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this._queryAgvStatus()
      this.timer = setInterval(() => {
        this._queryAgvStatus()
      }, this.interTime)
    },
    switchDown (type, bool) {
      this.disabled = true
      if (type === '5' && this.switch4 === '0' && this.switch5 === '1') {
        this.toast('RC控制与Joy控制不能同时开启')
        this.disabled = false
        return
      }
      if (type === '6' && this.switch4 === '1' && this.switch5 === '0') {
        this.toast('RC控制与Joy控制不能同时开启')
        this.disabled = false
        return
      }
      clearInterval(this.timer)
      bool = bool === '0' ? '1' : '0'
      this._ShutDown(type, bool)
    },
    async _ShutDown (type, bool) {
      try {
        let res = await ShutDown(type, bool) // type:1-关机、2-显示屏控制、3-TCS控制、4-SCHE控制、5-RC控制、6-Joy控制，7-退出，8-软启动，9-跳过起点，10-重启，11-全屏，12-跳过检测 ; bool:开关或按钮的值，开关开启传1，关闭传0，按钮点击直接传1
        if (res.code === '1') {
          this.toast(res.desc)
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
        this.refresh()
      } catch (e) {
        this.disabled = false
        this.refresh()
      }
    },
    async _queryRestPoint () {
      this.disabled = true
      try {
        let res = await queryRestPoint()
        if (res.code === '1') {
          this.result = res.result
          this.show = true
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
      } catch (e) {
        this.disabled = false
      }
    },
    tocheck (e) {
      this.obj = e
    },
    async _restCoordinate () {
      this.disabled = true
      if (JSON.stringify(this.obj) === '{}') {
        this.toast('请选择坐标')
        this.disabled = false
        return
      }
      try {
        let res = await restCoordinate(this.obj.point_code, this.obj.point_name, this.obj.x, this.obj.y, this.obj.t)
        if (res.code === '1') {
          this.toast(res.desc)
          this.show = false
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
      } catch (e) {
        this.disabled = false
      }
    },
    async _queryAgvStatus () {
      let res = await queryAgvStatus()
      if (res.code === '1') {
        this.status = res.result
        this.switch1 = res.result.screenStatus
        this.switch2 = res.result.tcsStatus
        this.switch3 = res.result.scheStatus
        this.switch4 = res.result.rcStatus
        this.switch5 = res.result.joyStatus
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.content_wrap_inner
  _fj()
.state_item_4
  _fj(center,,column)
  _wh(155px,155px)
  background linear-gradient(0deg, #dfe1e7, #f1f1f6)
  border-radius 32px
  padding 16px
  margin-bottom 16px
  margin-right 16px
  overflow hidden
  &:hover, &:active
    background linear-gradient(0deg, #FA6400, #ffc3a7)
    .state_item_4_txt
      color #FA6400
    .state_item_4_btn
      position relative
      overflow hidden
      &:after
        content: ''
        display block
        height 100%
        transform translateX(-100%)
        background inherit
        _shadow(60px,#fa6400)
.state_item_4_wrap
  _wh(100%, 100%)
  background-color #fff
  border-radius 20px
  box-shadow 0 2px 2px 0 rgba(0, 0, 0, 0.1)
  _fj(center,,column)
.state_item_4_btn
  display block
  _wh(60px,60px)
  margin-bottom 13px
.state_item_4_txt
  _font(20px,45px,#464646,500,)
.state_icon_1
  _bis('../../../images/aio/agv_1.png', 100%)
.state_icon_2
  _bis('../../../images/aio/agv_2.png', 100%)
.state_icon_3
  _bis('../../../images/aio/agv_3.png', 100%)
.state_icon_4
  _bis('../../../images/aio/agv_4.png', 100%)
.state_icon_5
  _bis('../../../images/aio/agv_5.png', 100%)
.state_icon_6
  _bis('../../../images/aio/agv_6.png', 100%)
.state_icon_7
  _bis('../../../images/aio/agv_7.png', 100%)
.state_icon_8
  _bis('../../../images/aio/agv_8.png', 100%)
.pop_wrapper
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  text-align center
  z-index 10000
  &::after
    content ""
    display inline-block
    height 100%
    width 0
    vertical-align middle
.modal
  position fixed
  left 0
  top 0
  _wh(100%,100%)
  opacity .5
  background #000
  z-index 999

.pop_box
  position  relative
  margin 0 auto 50px
  width 65%
  height 70%
  margin-top 15%
  padding 20px
  background-color #fff
  border-radius 16px
  overflow hidden
  h2
    _font(20px,40px,#464646,600,center)
.pop_ul_wrapper
  width 90%
  height calc(100% - 100px)
  margin 0 auto
  overflow hidden
.pop_ul
  _wh(100%, 100%)
  overflow-y auto
  li
    _wh(100%,40px)
    padding 0 20px
    border-bottom 2px dotted #D6D6D6
    text-align left
    span
      display inline-block
      _font(16px,40px,#323232,600,)
      vertical-align top
      padding-right .15rem
    &:nth-child(1)
      position: sticky;
      top: -1px;
      _font(14px,40px,#323232,600,)
      background #DFE1E6
      border-top-left-radius 10px
      border-top-right-radius 10px
.pop_ul .checked
  background-color #FD6A35
.pop_ul li.checked span
  color #fff
.pop_btns_box
  margin-top 20px
.content_wrap_inner_1
  justify-content flex-start
.state_wrap_1
  width auto
  margin-right 50px
</style>
