<template>
  <el-container style="height: 100vh">
    <Notice/>
    <div class="mask" v-show="!isCollapse && !contentFullScreen" @click="hideMenu"></div>
    <el-aside :width="isCollapse ? '50px' : '260px'"
              class="layout_aside"
              :class="isCollapse ? 'hide-aside' : 'show-side'"
              v-show="!contentFullScreen">
      <menu-v2/>
    </el-aside>
    <el-container style="height: 100vh">
      <el-header v-show="!contentFullScreen" style="height: 50px; display: block">
        <header-v2/>
      </el-header>
      <el-main class="scrollbar" ref="mainRef">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive>
              <component :is="Component"/>
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {computed, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {initWebSocket} from '@/utils/websocket'
import MenuV2 from "@/layout/MenuV2/MenuV2";
import HeaderV2 from "@/layout/HeaderV2/HeaderV2";
import {setVisibleSize} from "@/utils/window-size";
import Notice from "@/layout/HeaderV2/Notice.vue";


const store = useStore()
const isCollapse = computed(() => store.state.app.isCollapse)
const contentFullScreen = computed(() => store.state.app.contentFullScreen)


const hideMenu = () => {
  store.commit('app/isCollapseChange', true)
}

const router = useRouter()
const initSocket = () => {
  const sid = store.getters['user/sid']
  if (sid && sid !== 'undefined') {
    initWebSocket(sid)
  } else {
    router.push('/login')
  }
}

const mainRef = ref(null)
watch(() => store.state.app.windowSize, async () => {
  await nextTick()
  setVisibleSize({
    height: mainRef.value.$el.clientHeight,
    width: mainRef.value.$el.clientWidth
  })
}, {deep: true, immediate: true})

onMounted(() => {
  if (store.getters['user/token']) {
    initSocket()
  }
})

</script>

<style lang="scss" scoped>


.layout_aside {
  margin: 7px 4px 6px 6px;
  //height: calc(100vh - 32px);
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);;
  border-radius: 4px;
  overflow: hidden;
  transition: width .3s ease;
  background-color: white;
}

.el-header {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
}

.el-aside {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: 0.3s;

  &::-webkit-scrollbar {
    width: 0 !important;
  }
}

.el-main {
  background-color: var(--system-container-background);
  height: 100%;
  padding: 0;
}

.scrollbar {
  margin: 5px 5px 6px 5px;
  //margin: 8px;
  //box-shadow: var(--el-box-shadow-light);
  //border-radius: 5px;

  &::-webkit-scrollbar {
    display: none;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(144, 147, 153, 0.3);
  }

  &:hover {
    &::-webkit-scrollbar {
      display: block;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(144, 147, 153, 0.3);

      &:hover {
        background: rgba(144, 147, 153, 0.5);
      }
    }
  }
}

.el-main-box {
  width: 100%;
  min-width: 1200px;
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
  .el-aside {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;

    &.hide-aside {
      left: -250px;
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>
