<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <!-- topNav 模式：全宽顶部栏 + 左侧子菜单 -->
    <template v-if="topNav">
      <div class="topnav-layout">
        <navbar class="full-navbar" />
        <div class="topnav-body">
          <sidebar v-if="hasSidebarRoutes" class="sidebar-container" />
          <div :class="{hasTagsView:needTagsView}" class="main-container">
            <tags-view v-if="needTagsView" />
            <app-main />
          </div>
        </div>
      </div>
    </template>
    <!-- 经典模式：左侧全高侧栏 -->
    <template v-else>
      <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
      <sidebar class="sidebar-container"/>
      <div :class="{hasTagsView:needTagsView}" class="main-container">
        <div :class="{'fixed-header':fixedHeader}">
          <navbar />
          <tags-view v-if="needTagsView" />
        </div>
        <app-main />
        <right-panel>
          <settings />
        </right-panel>
      </div>
    </template>
  </div>
</template>

<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    topNav() {
      return this.$store.state.settings.topNav
    },
    hasSidebarRoutes() {
      const routes = this.$store.getters.sidebarRouters
      return routes && routes.length > 0
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables;
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>

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

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

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

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
}

.mobile .fixed-header {
  width: 100%;
}

/* topNav 全宽布局 */
.topnav-layout {
  display: flex;
  flex-direction: column;
  height: 100%;

  .full-navbar {
    flex-shrink: 0;
    z-index: 1002;
  }

  .topnav-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #f5f6fa;

    .sidebar-container {
      flex-shrink: 0;
      position: relative !important;
      top: auto !important;
      height: 100% !important;
      box-shadow: none !important;
      border-right: 1px solid #f0f0f0;
    }

    .main-container {
      flex: 1;
      overflow: auto;
      margin-left: 0 !important;
      min-height: 0;
    }
  }
}
</style>
