<template>
  <div :class="classObj" class="app-wrapper">
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <div :class="{ 'fixed-header': fixedHeader }" v-show="needHeader">
      <navbar />
    </div>
    <div class="main-container">
      <sidebar class="sidebar-container" v-show="needSidebar" />
      <tags-view :class="{ 'fixed-tagsView': fixedHeader }" v-show="needTagsView" />
      <div class="main-box" :class="{ noTagsView: !needTagsView }">
        <breadcrumb
          v-show="needBreadcrumb && $route.path !== '/main'"
          class="breadcrumb-container"
        />
        <app-main />
      </div>
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView,
    Breadcrumb,
  },
  mixins: [ResizeMixin],
  data() {
    return {}
  },
  computed: {
    ...mapState({
      sidebar: (state) => state.app.sidebar,
      device: (state) => state.app.device,
      showSettings: (state) => state.settings.showSettings,
      needTagsView: (state) => state.settings.tagsView,
      fixedHeader: (state) => state.settings.fixedHeader,
      needHeader: (state) => state.settings.needHeader,
      needSidebar: (state) => state.settings.needSidebar,
      needBreadcrumb: (state) => state.settings.needBreadcrumb,
    }),
    classObj() {
      return {
        withoutTop: !this.needHeader && !this.needTagsView && !this.needBreadcrumb, //头部整体隐藏
        withoutSidebar: !this.needSidebar, // 侧边栏整体隐藏
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile',
      }
    },
  },
  mounted() {
    //console.log(this.$route)
  },
  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: 100%;
  // width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}
.fixed-tagsView {
  position: fixed;
  z-index: 9;
}
.breadcrumb-container {
  position: relative;
  top: 0;
  left: 20px;
}
.mobile .fixed-header {
  width: 100%;
}
.main-box {
  margin-top: 34px;
  &.noTagsView {
    margin-top: 0;
  }
}
</style>
<style lang="scss">
// 隐藏顶部和侧边栏
.app-wrapper {
  &.withoutTop {
    .main-container {
      padding-top: 0 !important;
      .app-main {
        min-height: 100vh !important;
      }
      .main-box {
        margin-top: 0;
      }
    }
  }
  &.withoutSidebar {
    .main-container {
      margin-left: 0 !important;
    }
  }
}
</style>
