<template>
  <div class="aside-wrapper">
    <!-- :class="{'has-logo':showLogo}" -->
    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
    <el-scrollbar class="scrollbar-wrapper">
      <el-menu
        class="menu-wrapper"
        :default-active="activeMenu"
        :default-openeds="openedMenu"
        :collapse="SidebarStore.isCollapse"
        :unique-opened="true"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { useSidebarStore } from '@/stores/sidebar'
// import Logo from './Logo.vue'
import SidebarItem from './SidebarItem.vue'
import variables from '@/styles/variables.scss'

export default defineComponent({
  components: { SidebarItem },
  computed: {
    routes() {
      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
    },
    openedMenu(){
      return []
    },
    variables() {
      // console.log('variables :>> ', variables);
      return variables
    },
  },
  setup() {
    const SidebarStore = useSidebarStore()
    return {
      SidebarStore
    }
  }
})
</script>

<style lang="scss" scoped>
.aside-wrapper {
  height: 100%;
  width: 100%;
  .scrollbar-wrapper {
    height: 100%;
    width: 100%;
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }

    .menu-wrapper:not(.el-menu--collapse) {
      height: auto;
      width: 100%;

      &.el-menu {
        border-right: none;
      }
    }
  }
}
</style>

<style lang="scss">
.scrollbar-wrapper {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
