<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg"
        :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText"
        :collapse-transition="false" mode="vertical">
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />

      </el-menu>
    </el-scrollbar>
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import Logo from './Logo'
  import SidebarItem from './SidebarItem'
  import variables from '@/styles/variables.scss'
  import Hamburger from '@/components/Hamburger'

  export default {
    components: {
      SidebarItem,
      Logo,
      Hamburger
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'permission_routes',
      ]),
      routes() {
        //return this.routers;
        //return this.$router.options.routes
      },
      activeMenu() {
        const route = this.$route
        const {
          meta,
          path
        } = route
        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        return path
      },
      showLogo() {
        return this.$store.state.settings.sidebarLogo
      },
      variables() {
        return variables
      },
      isCollapse() {
        return !this.sidebar.opened
      }
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('app/toggleSideBar')
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .hamburger-container {
    //line-height: 46px;
    height: 100%;
    //float: left;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color: transparent;
    padding-top: 20px !important;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }
</style>
