<!--
 * @Author: zwq
 * @Date: 2021-11-15 08:20:28
 * @LastEditors: zwq
 * @LastEditTime: 2022-03-18 14:48:46
 * @Description:
-->
<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
      </div>
    </template>
  </div>
</template>

<script>
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  import MainContent from './main-content'
  export default {
    provide () {
      return {
        // 刷新
        refresh () {
          this.$store.commit('common/updateContentIsNeedRefresh', true)
          this.$nextTick(() => {
            this.$store.commit('common/updateContentIsNeedRefresh', false)
          })
        }
      }
    },
    data () {
      return {
        loading: false,
        websock: '',
        url: ''
      }
    },
    components: {
      MainNavbar,
      MainSidebar,
      MainContent
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight },
        set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      userId: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
      },
      userName: {
        get () { return this.$store.state.user.name },
        set (val) { this.$store.commit('user/updateName', val) }
      }
    },
    created () {
      const baseurl = window.SITE_CONFIG.baseUrl
      this.url = baseurl.slice(5)
      this.getUserInfo()
      this.initWebSocket()
    },
    mounted () {
      this.resetDocumentClientHeight()
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.documentClientHeight = document.documentElement['clientHeight']
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight']
        }
      },
      // 获取当前管理员信息
      getUserInfo () {
        // this.$http({
        //   url: this.$http.adornUrl('/sys/user/info'),
        //   method: 'get',
        //   params: this.$http.adornParams()
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.loading = false
        //     this.userId = data.user.userId
        //     this.userName = data.user.username
        //   }
        // })
      },
      initWebSocket () { // 初始化weosocket
        const path = `ws:${this.url}/qj/websocket/${'id'}`
        this.websock = new WebSocket(path)
        this.websock.onmessage = this.websocketonmessage
        this.websock.onopen = this.websocketonopen
        this.websock.onerror = this.websocketonerror
        this.websock.onclose = this.websocketclose
      },
      websocketonopen () { // 连接建立之后执行send方法发送数据
        this.websocketsend(JSON.stringify())
      },
      websocketonerror () { // 连接建立失败重连
        this.initWebSocket()
      },
      websocketonmessage (e) { // 数据接收
        this.$notify.info({
          title: '提示',
          message: e.data,
          duration: 15000
        })
      },
      websocketsend () { // 数据发送
        this.websock.send()
      },
      websocketclose (e) {  // 关闭
        console.log('断开连接', e)
      }
    }
  }
</script>
