<template>
  <div :class="classObj" class="app-wrapper">
    <div class="fixed-header">
      <navbar />
    </div>
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <breadcrumb />
      <app-main />
    </div>
  </div>
</template>

<script>
import { AppMain, Navbar, Settings, Sidebar } from './components'
// import ResizeMixin from './mixin/ResizeHandler'
import Breadcrumb from '@/components/Breadcrumb'
import { mapState } from 'vuex'
import StompClient from '../stomp/ipu-stomp.js'
import EventBus from '../bus'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    Settings,
    Sidebar,
    Breadcrumb
  },
  // mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      showSettings: state => state.settings.showSettings,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  mounted() {
    // 镜屏调用
    this.connect()
  },
  methods: {
    connect() {
      if (this.stompClient == null || !this.stompClient.connected()) {
        this.stompClient = new StompClient('ws://10.1.252.196:7200/stomp')
        this.stompClient.connect('zhangsan', '123456', () => { this.connectCallback() }, () => { this.errorCallback() })
      } else {
        console.log('当前处于连接状态')
      }
    },
    connectCallback() {
      console.log('connectCallback')
      this.stompClient.subscribe('sendAiData', (msg) => {
        console.log(msg)
        EventBus.$emit('sendAiData', msg.body)
      })
      // this.stompClient.subscribe('personnel', (msg) => {
      //   console.log(msg)
      //   EventBus.$emit('person', msg.body)
      // })
      EventBus.$emit('connected', true)
    },
    errorCallback() {
      console.log('errorCallback')
      EventBus.$emit('connected', false)
      this.connect()
    }
  }
}
</script>

<style lang="scss">
.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  transition: width 0.28s;
}
</style>