<template>
  <el-menu
    class="main-layout-left-menu"
    unique-opened
    :default-active="defaultActive"
    :default-openeds="defaultOpeneds"
    :collapse="mainLayoutStore.collapse"
  >
    <menu-item
      v-for="menu in mainLayoutStore.renderMenus"
      :key="menu.index"
      :current-index="defaultActive"
      :menu="menu"
    ></menu-item>
  </el-menu>
</template>

<script setup lang="ts" name="MainLayoutLeftMenu">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMenu } from 'element-plus'
import useMainLayoutStore from '@/store/layout'
import MenuItem from '@/layout/main/MenuItem.vue'

const route = useRoute()
const mainLayoutStore = useMainLayoutStore()

const defaultActive = computed(() => {
  if (route.meta?.menu) {
    return route.meta.menuId
  }
  const ids = route.meta.menuId?.split('-')
  return ids?.slice(0, -1)?.join('-') || ''
})

const defaultOpeneds = computed(() => {
  const rootSub = defaultActive.value.split('-')[0]
  return [rootSub]
})
</script>

<style scoped lang="scss">
.main-layout-left-menu {
  padding: $BaseGapSpace 0;
  border-right: none;
}
</style>
