<template class="app">
  <TitleBar class="titleBar" />
  <div class="right">
    <el-col>
      <el-row>
        <el-col>
          <ModeControl ref="modeControl" :current="current" @clicks="handleClick"></ModeControl>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <FocusArea />
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <WarningArea></WarningArea>
        </el-col>
      </el-row>
    </el-col>
  </div>
  <StatusBar class="statusBar" />
  <router-view />
</template>
<script>
  import TitleBar from 'views/TitleBar.vue'
  import StatusBar from 'views/StatusBar.vue'
  import MessageBridge from 'utils/MessageBridge'
  import ModeControl from "components/modeControl/modeControl.vue";
  import FocusArea from "components/focus/focusArea.vue";
  import WarningArea from "components/warning/warningArea.vue";
  export default {
    components: {
      TitleBar,
      StatusBar,
      ModeControl,
      FocusArea,
      WarningArea
    },
    created: function () {
      this.initData()
      this.subscribe()
    },
    methods: {
      initData: function () {
        let mb = MessageBridge.getInstance();
        let windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
        let popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
        let title = [{ key: "/topic/title-info", action: this.titleInfos }];
        // var heartbeat = [{ key: "/topic/heartbeat-data", action: this.heartbeat }];
        // mb.register(heartbeat);
        mb.register(title);
        mb.register(windturbine);
        mb.register(popup);
      },
      windturbineMessage(msg) {
        let json = JSON.parse(msg);
        this.$store.commit('windturbinelist', json)
      },
      faultMessage(msg) {
        let json = JSON.parse(msg);
        this.$store.commit('warning', json)
      },
      // heartbeat(msg){
      //   console.log(msg);
      // },
      subscribe() {
        setTimeout(() => {
          this.subscribe()
        }, 20000);
        if (!this.$store.state.observers) {
          let mb = MessageBridge.getInstance();
          let windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
          let popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
          let title = [{ key: "/topic/title-info", action: this.titleInfos }];
          let suggestion = [{ key: "/topic/suggestion", action: this.suggestion }];
          mb.register(suggestion);
          mb.register(title);
          mb.register(windturbine);
          mb.register(popup);
          this.$store.commit('observers', true)
        }
      }
    },
  }
</script>
<style>
  @import "../src/assets/styles/main.css";
  body {
    /* 设置内容不可选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* .app{
    background-color: #000000;
  } */
  .right {
    width: 32%;
    position: absolute;
    right: 20px;
    z-index: 99;
  }

  .statusBar {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .titleBar {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
  }
</style>