<template>
  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
    <div class="aui-sidebar__inner">
      <el-menu
        :default-active="$store.state.sidebarMenuActiveName"
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :collapseTransition="false"
        class="aui-sidebar__menu">
        <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
export default {
  data () {
    return {
      pid: '',
      parentPid: '',
      socket: '',
      stompClient: ''
    }
  },
  components: {
    SubMenu
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    const routeList = this.$store.state.sidebarMenuList
    const selectList = [{
      selectId: '1169180106757378049',
      num: 3
    }, {
      selectId: '1169486622820143105',
      num: 4
    }]
    selectList.forEach(selectRoute => {
      this.filterRoute(routeList, selectRoute)
    })
    console.log(routeList)
    // this.initWebSocket()
  },
  methods: {
    filterRoute (routeList, selectRoute) {
      routeList.forEach((item, index) => {
        if (item.children && item.children.length >= 1) {
          this.filterRoute(item.children, selectRoute)
        } else {
          if (item.id === selectRoute.selectId) {
            console.log(item.pid)
            item.num = selectRoute.num
            this.pid = item.pid
          }
        }
      })
      routeList.forEach(item => {
        if (item.children && item.children.length >= 1) {
          if (item.id === this.pid) {
            item.redPoint = true
            if (parseInt(item.pid) !== 0) {
              this.parentPid = item.pid
            }
          }
        }
      })
      routeList.forEach(item => {
        if (item.id === this.parentPid) {
          item.redPoint = true
        }
      })
    },
    initWebSocket () {
      this.connection()
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          this.stompClient.send('alive')
        } catch (err) {
          console.log('断线了: ' + err)
          this.connection()
        }
      }, 5000)
    },
    connection () {
      // 建立连接对象
      this.socket = new SockJS('http://127.0.0.1:8081/websocket')// 连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息，注意这里用的是http而不是原生WebSocket的ws

      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(this.socket)

      // 定义客户端的认证信息,按需求配置
      // const token = getToken()
      let headers = {
        'Authorization': ''
      }
      // 向服务器发起websocket连接
      this.stompClient.connect(headers, this.onConnected, this.onFailed)
    },
    onConnected: function (frame) {
      console.log('Connected: ' + frame)
      let topic = '/ws/topic/charger.messageTopic'
      this.stompClient.subscribe(topic, this.onSubscribe)
    },
    onSubscribe (value) {
      console.log('subscribe', value)
    },
    onFailed (frame) {
      console.log('Failed: ' + frame)
    },
    disconnect () {
      if (this.stompClient != null) {
        this.stompClient.disconnect()
        console.log('Disconnected')
      }
    }
  }
}
</script>
