<template>
  <div :class="menuMode === 'horizontal'?'noSide':classObj" class="app-wrapper">
    <navbar />
    <!--菜单上下结构时，显示二级菜单及子集-->
    <div v-if="menuMode === 'horizontal'" class="hori-child-menu">
      <SecondMenu/>
    </div>
    <div class="main-container">
      <!--菜单左右结构时显示-->
      <div class="sidebar-container" v-if="menuMode === 'vertical'">
        <img class="mainBack" src="@/assets/images/mainBack.png" alt="">
        <Sidebar />
      </div>
      <div class="main-right">
        <!-- 是否缩放菜单-->
        <hamburger
          v-if="menuMode === 'vertical'"
          id="hamburger-container"
          :is-active="sidebar.opened"
          class="hamburger-container"
          @toggleClick="toggleSideBar"
        />
        <TagsView />
        <app-main />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onBeforeMount, ref } from 'vue';
import { Navbar, TagsView, AppMain } from './components/index';
import Hamburger from '@/components/Hamburger/index.vue';
import Sidebar from './components/Sidebar/index.vue';
import SecondMenu from './components/Navbar/SecondMenu.vue';

import useStore from '@/store';
import router from "@/router";

const { app } = useStore();
const sidebar = computed(() => app.sidebar);
const menuMode = computed(() => app.menuMode);

const modeObj = computed(() => ({
  showSide: menuMode.value === 'vertical',
  hideSide: menuMode.value === 'horizontal'
}));

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened
}));

onBeforeMount(() => {
  // await app.getAllMenu();
});
// onMounted(async() => {
//   // await app.getAllButton()
// })


function toggleSideBar() {
  app.toggleSidebar();
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/variables.module.scss';

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  .main-container {
    width: 100%;
    height: calc(100% - 40px);
    position: absolute;
    top: 40px;
    left: 0;
    .sidebar-container{
      .mainBack{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
  .hori-child-menu{
    width:100%;
    height: 24px;
    background: #0052A3;
    position: absolute;
    left: 0;
    top: 40px;
    transition: width 0.28s;
    z-index: 1000;
  }
}
.main-right{
  width: calc(100% - $sideBarWidth);
  height: 100%;
  position: absolute;
  left: $sideBarWidth;
  top: 0;
  transition: left 0.28s;
}
.hideSidebar .main-right {
  width: calc(100% - 40px);
  left: 40px;
}
.noSide.app-wrapper .main-right{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 24px;
  transition: top 0.28s;
}
.noSide.app-wrapper .main-container{
  height: calc(100% - 64px);
}
</style>
