<template>
    <el-container class="layout-container">
      <el-header class="layout-header"><navbar/></el-header>
      <el-container>
        <el-aside class="layout-sidebar" width="248px" v-if="!isHideSidebar"><sidebar/></el-aside>
        <el-main :class="['layout-main', {'full-width': isHideSidebar}]">
          <tags-view v-if="!isPlatform && needTagsView" />
          <app-main/>
        </el-main>
      </el-container>
    </el-container>

</template>

<script setup>
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
import { useRoute } from 'vue-router'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'

const route = useRoute()
const settingsStore = useSettingsStore()
const appStore = useAppStore()
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const sidebar = computed(() => appStore.sidebar);
const device = computed(() => appStore.device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);

// 判断是否是平台概览页面
const isPlatform = computed(() => {
  return route.path.startsWith('/platform');
});

// 判断是否隐藏侧边栏
const isHideSidebar = computed(() => {
  // 只有在平台概览页面时隐藏侧边栏，或者在app store中设置了隐藏
  return sidebar.value.hide || isPlatform.value;
});

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened,
  withoutAnimation: sidebar.value.withoutAnimation,
  mobile: device.value === 'mobile'
}))

const { width, height } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design

watchEffect(() => {
  if (device.value === 'mobile' && sidebar.value.opened) {
    appStore.closeSideBar({ withoutAnimation: false })
  }
  if (width.value - 1 < WIDTH) {
    appStore.toggleDevice('mobile')
    appStore.closeSideBar({ withoutAnimation: true })
  } else {
    appStore.toggleDevice('desktop')
  }
})

function handleClickOutside() {
  appStore.closeSideBar({ withoutAnimation: false })
}

const settingRef = ref(null);
function setLayout() {
  settingRef.value.openSetting();
}
</script>

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

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100vh;
  width: 100%;
  
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.layout-container {
  height: 100%;
  width: 100%;
 
}

.layout-header {
  
  padding: 0;


  z-index: 10;
}

.layout-content {
  height: calc(100vh - 50px);
}

.layout-sidebar {
  width:248px!important;
  display: flex!important;
  flex-direction: column!important;
  align-items: center!important;

  transition: width 0.28s;
  background-color: $base-menu-background;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding:30px 0!important;
}

.layout-main {
  background-color: #343744;
  padding: 0;
  overflow: auto;
  transition: all 0.3s;

  
  &.full-width {
    width: 100%;
  }
  
  // .tags-view-container {
  //   background: #343744;

  //   padding: 0 16px;
  // }
}

.drawer-bg {
  background: #000;
  
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.hideSidebar {
  
  .layout-sidebar {

    width: 54px !important;
  }
}

.mobile {
  .layout-sidebar {
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 999;
  }
}

.sidebarHide {
  .layout-sidebar {
    display: none;
  }
}
</style>