<template>
  <div class="main-box">
    <div class="box-first">
      <div class="machine"><img src="@/assets/machine.png"></div>
      <div class="machine-right">
        <sub-title name="机器人信息" statement="ROBOT INFORMATION" />
        <div class="machine-bottom">
          <ul>
            <li>
              <span>机器人状态</span>
              <div class="status">
                <div class="status-list">
                  <img
                    :src="robotInfoVo.robotState === 2 ? require('./assets/status1-active.png') : require('./assets/status1.png')"
                    width="58"
                  >
                  <div class="staus-info">
                    <div class="infoimg"><img
                      v-if="robotInfoVo.robotState === 2"
                      src="./assets/success.png"
                    ></div>
                    <div class="infotext" :class="{ active: robotInfoVo.robotState === 2 }">运行</div>
                  </div>
                </div>
                <div class="status-list">
                  <img
                    :src="robotInfoVo.robotState === 1 ? require('./assets/status2-active.png') : require('./assets/status2.png')"
                    width="58"
                  >
                  <div class="staus-info">
                    <div class="infoimg"><img
                      v-if="robotInfoVo.robotState === 1"
                      src="./assets/warn.png"
                    ></div>
                    <div class="infotext" :class="{ active: robotInfoVo.robotState === 1 }">待机</div>
                  </div>
                </div>
                <div class="status-list">
                  <img
                    :src="robotInfoVo.robotState === 4 ? require('./assets/status3-active.png') : require('./assets/status3.png')"
                    width="58"
                  >
                  <div class="staus-info">
                    <div class="infoimg"><img
                      v-if="robotInfoVo.robotState === 4"
                      src="./assets/danger.png"
                    ></div>
                    <div class="infotext" :class="{ active: robotInfoVo.robotState === 4 }">故障</div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <span>信号状态</span>
              <div class="signal-status">
                <div class="signal-status-list">
                  <div class="signal-icon">
                    <img src="./assets/info1.png" width="58"><img
                      :src="robotInfoVo.plcState ? require('./assets/signal1.png') : require('./assets/signal2.png')"
                    >
                  </div>
                  <div class="signal-text">PLC通信</div>
                </div>
                <div class="signal-status-list">
                  <div class="signal-icon">
                    <img src="./assets/info2.png" width="58"><img
                      :src="robotInfoVo.liftingServo ? require('./assets/signal1.png') : require('./assets/signal2.png')"
                    >
                  </div>
                  <div class="signal-text">举升伺服</div>
                </div>
                <div class="signal-status-list">
                  <div class="signal-icon">
                    <img src="./assets/info3.png" width="58"><img
                      :src="robotInfoVo.rotaryServo ? require('./assets/signal1.png') : require('./assets/signal2.png')"
                    >
                  </div>
                  <div class="signal-text">旋转伺服</div>
                </div>
                <div class="signal-status-list">
                  <div class="signal-icon">
                    <img src="./assets/info4.png" width="58"><img
                      :src="robotInfoVo.palletServo ? require('./assets/signal1.png') : require('./assets/signal2.png')"
                    >
                  </div>
                  <div class="signal-text">货叉伺服</div>
                </div>
                <div class="signal-status-list">
                  <div class="signal-icon">
                    <img src="./assets/info5.png" width="58"><img
                      :src="robotInfoVo.walkServo ? require('./assets/signal1.png') : require('./assets/signal2.png')"
                    >
                  </div>
                  <div class="signal-text">行走伺服</div>
                </div>
              </div>

            </li>
            <li>
              <span>轴转速度</span>
              <div class="speed">
                <p>X轴速度：<font>{{ robotInfoVo.xAxis | numFilter }}</font> <em>m/s</em></p>
                <p>Y轴速度：<font>{{ robotInfoVo.yAxis | numFilter }}</font> <em>m/s</em></p>
                <p>Z轴速度：<font>{{ robotInfoVo.zAxis | numFilter }}</font> <em>m/s</em></p>
              </div>
            </li>
            <li>
              <span>时间</span>
              <div class="times">
                换电时间：<font>{{ robotInfoVo.swapTime }}</font>
              </div>
              <div class="times">
                剩余时间：<font>{{ robotInfoVo.residueTime }}</font>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box-second">
      <sub-title name="储充信息" statement="STORAGE AND CHARGING INFORMATION" num="8" step="1" />
      <div class="storage-bottom" :style="{ height: screenHeight }">
        <el-carousel indicator-position="none" arrow="never" :height="height" :autoplay="false" ref="chargerPages">
          <el-carousel-item :key="1" :name="pageName[0]">
            <div class="storagebox">
              <StorageInfo
                v-for="(item,index) in storeInfoListFirst"
                :key="index"
                :store-code="item.storeCode"
                :com-state="item.comState"
                :sn="item.sn"
                :soc="item.soc"
                :chg-estimated-time="item.chargerInfoVo.chgEstimatedTime"
                :current="item.current"
                :voltage="item.voltage"
                :min-temperature="item.minTemperature"
                :max-temperature="item.maxTemperature"
                :max-cell-voltage="item.maxCellVoltage"
                :min-cell-voltage="item.minCellVoltage"
                :soh="item.soh"
                :store-state="item.storeState"
                :charger-info-vo="item.chargerInfoVo"
              />
            </div>
          </el-carousel-item>
          <el-carousel-item :key="2" :name="pageName[1]">
            <div class="storagebox">
              <StorageInfo
                v-for="(item,index) in storeInfoListSecond"
                :key="index"
                :store-code="item.storeCode"
                :com-state="item.comState"
                :sn="item.sn"
                :soc="item.soc"
                :chg-estimated-time="item.chargerInfoVo.chgEstimatedTime"
                :current="item.current"
                :voltage="item.voltage"
                :min-temperature="item.minTemperature"
                :max-temperature="item.maxTemperature"
                :max-cell-voltage="item.maxCellVoltage"
                :min-cell-voltage="item.minCellVoltage"
                :soh="item.soh"
                :store-state="item.storeState"
                :charger-info-vo="item.chargerInfoVo"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="storage-page">
          <a @click="clickPrev()">&lt;</a>
          <a @click="clickPage(pageName[0])" :class="{'active':!Isactive}">1</a>
          <span>/</span>
          <a @click="clickPage(pageName[1])" :class="{'active':Isactive}">2</a>
          <a @click="clickNext()">&gt;</a>
      </div>
    </div>
  </div>
</template>

<script>
import './index.scss'
import wsUrl from '../../../vue.config.js'
import SubTitle from './components/SubTitle.vue'
import StorageInfo from './components/StorageInfo.vue'
import { getToken } from '@/utils/auth'
export default {
  name: 'EquipmentMonitoring',
  components: {
    SubTitle,
    StorageInfo
  },
  data() {
    return {
      ws: null,
      height: '100%',
      screenHeight: null,
      robotInfoVo: {},
      storeInfoListFirst: [], // 第一屏储充信息
      storeInfoListSecond: [], // 第二屏储充信
      pageName:['pfirst','psecond'],
      Isactive: false,
    }
  },
  mounted() {
    this.onLoadHeight()
    this.changeWindow()
    if (getToken()) {
      if (this.ws) {
        this.ws.close()
      }
      this.websocketConnect()
      // 清除定时器
      this.clearTimerList()
      // 检测断开重连
      this.detectWebsocketConnection()
    }
  },
  destroyed() {
    this.websocketOnClose()
    this.clearTimerList()
  },
  methods: {
    //走马灯分页
    clickPage(pageId){
        this.$refs.chargerPages.setActiveItem(pageId)
        this.Isactive=!this.Isactive
    },
    clickPrev(){
        this.$refs.chargerPages.prev()
        this.Isactive=!this.Isactive
    },
    clickNext(){
        this.$refs.chargerPages.next()
        this.Isactive=!this.Isactive
    },
    // 清除定时器列表
    clearTimerList() {
      if (this.wsTimer) {
        clearInterval(this.wsTimer)
      }
    },
    /* 设置初始视窗高度*/
    onLoadHeight() {
      this.$nextTick(() => {
        if (document.body.clientHeight >= 1080) {
          this.screenHeight = '63vh'
        } else {
          this.screenHeight = '70vh'
        }
      })
    },
    /* 设置窗口变化高度*/
    changeWindow() {
      window.onresize = () => {
        return (() => {
          if (document.body.clientHeight >= 1080) {
            this.screenHeight = '63vh'
          } else {
            this.screenHeight = '70vh'
          }
        })()
      }
    },
    websocketOnOpen() {
      console.log('socket连接成功')
    },
    websocketOnMessage(m) {
      const d = JSON.parse(m.data)
      // console.log(d)
      if (d.robotInfoVo) {
        this.robotInfoVo = d.robotInfoVo
      }
      if (d.storeInfoList) {
        this.storeInfoListFirst = d.storeInfoList
        this.storeInfoListSecond = d.storeInfoList.splice(5)
      }
    },
    websocketOnError(e) {
      console.log('socket错误', e)
    },
    websocketOnClose(e) {
      console.log('socket断开', e)
    },
    detectWebsocketConnection() {
      this.wsTimer = setInterval(() => {
        if (this.ws.readyState != 1) {
          this.ws.close()
          this.websocketConnect()
        }
      }, 3000)
    },
    websocketConnect() {
      const wstoken = getToken()
      this.ws = new WebSocket(wsUrl.devServer.proxy['/ws'].target+'/'+wstoken)
      this.ws.onopen = this.websocketOnOpen
      this.ws.onerror = this.websocketOnError
      this.ws.onmessage = this.websocketOnMessage
      this.ws.onclose = this.websocketOnClose
    }
  }
}
</script>
<style lang="scss">
.el-carousel {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    ul {
        display: none;
    }
}
</style>
