<template>
  <el-scrollbar class="avue-menu">
    <div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
      {{ $t('menuTip') }}
    </div>

    <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="getScreen(isCollapse)"
      v-if="setting.styleRadio == '1'">
      <sidebar-item :menu="menu"></sidebar-item>
    </el-menu>
    <leftMenu :menulist="menu" v-if="setting.styleRadio == '2'"></leftMenu>
  </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex';
import sidebarItem from './sidebarItem.vue';
import leftMenu from './leftMenu.vue';
export default {
  name: 'sidebar',
  components: { sidebarItem, leftMenu },
  inject: ['index'],
  created() {
    this.index.openMenu();
  },
  computed: {
    ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar__view) {
  height: 100%;
}
</style>
