<template>
  <section class="app-main">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <router-view v-slot="{Component}" :key="key">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews" :exclude="manageViews ">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
</template>

<script>
import Hamburger from '@/components/Hamburger'
import { mapGetters } from 'vuex'

export default {
  name: 'AppMain',
  components: {
    Hamburger
  },
  data() {
    return {
      manageViews: ['KnowledgeEdit']
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.fullPath
    },
    ...mapGetters([
      'sidebar'
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    }
  }
}
</script>

<style lang="less" scoped>
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 800px);
  width: 100%;
  padding: 16px;
  background-color: #EEF0F4;
  overflow-x: hidden;
  position: relative;
  .hamburger-container {
    cursor: pointer;
    width: 16px;
    height: 40px;
    position: absolute;
    opacity: 0.3;
    left: 0px;
    top: 50%;
    z-index: 100;
    transition: all 0.5s;
    box-shadow: 3px 0px 12px rgba(91,105,135,.5);
    &:hover{
      opacity: 1;
    }
  }
}
.fixed-header+.app-main {
  padding-top: 50px;
}
.sidebar-container:hover~.main-container{
  .hamburger-container{
    opacity: 1;
  }
}
.hasTagsView {
  .app-main {
    /* 134 = top + navbar + tags-view = 100 + 50 + 34 */
    min-height: calc(100vh - 178px);
    height: 100%;
  }

  .fixed-header+.app-main {
    padding-top: 138px;
  }
}
</style>

<style lang="less">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
