<template>
  <div>
    <div class="logo-container" :class="[isCollapse && 'collapse']">
      <img v-if="isCollapse" src="../../../../assets/img/zoomLogo.jpg" alt="" width="30px" height="30px" />
      <template v-else>
        <img :src="siteInfo.logo" alt="" height="60px" />
      </template>
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse">
        <sidebar-item v-for="route in permissionRouters" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import SidebarItem from './SidebarItem.vue';

export default defineComponent({
  components: { SidebarItem },
  setup() {
    const store = useStore();
    const permissionRouters = computed(() => store.getters.permission_routers);
    const sidebar = computed(() => store.getters.sidebar);
    const siteInfo = computed(() => store.getters.siteInfo);
    const isCollapse = computed(() => !sidebar.value.opened);

    return {
      permissionRouters,
      sidebar,
      siteInfo,
      isCollapse,
    };
  },
});
</script>