<template>
  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :background-color="bgColor"
          :text-color="textColor"
          :unique-opened="true"
          :active-text-color="theme"
          :collapse-transition="false"
          mode="vertical"
        >
          <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
        </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import Logo from './Logo.vue'
import SidebarItem from './SidebarItem.vue'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePortalMenuStore from '@/store/modules/portalMenu'
import { RouteOption } from "vue-router";
import { ModuleKey, resolveModuleByPath } from '@/enums/ModuleEnum'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const portalMenuStore = usePortalMenuStore()

// 当前模块：优先看 store，没有则按当前路由路径反查
const currentModule = computed<ModuleKey>(() => appStore.activeModule || resolveModuleByPath(route.path));

const normalizeMenuPath = (rawPath: string, parentPath = ''): string => {
    if (!rawPath) return ''
    if (/^https?:\/\//.test(rawPath)) return rawPath
    if (!parentPath) return rawPath
    // 侧边栏组件会基于 basePath 拼接子 path，若这里保留绝对路径会被重复拼接导致 404。
    if (rawPath.startsWith(parentPath + '/')) {
        return rawPath.slice(parentPath.length + 1)
    }
    if (rawPath.startsWith('/')) {
        return rawPath.replace(/^\/+/, '')
    }
    return rawPath
}

const toRouteOption = (menus: any[], parentPath = ''): RouteOption[] => {
    return menus.map((item: any) => {
        const currentPath = normalizeMenuPath(item.path, parentPath)
        const fullPath = parentPath ? `${parentPath.replace(/\/$/, '')}/${currentPath}` : item.path
        return ({
        path: currentPath,
        meta: {
            title: item.title,
            icon: item.icon || 'menu',
            module: currentModule.value,
        },
        children: item.children?.length ? toRouteOption(item.children, fullPath) : undefined,
    })}) as RouteOption[]
}

// 菜单来源从“新门户聚合接口”读取：
// - home: 默认展示常用菜单
// - 其他模块: 展示对应模块菜单
const sidebarRouters = computed<RouteOption[]>(() => {
    if (currentModule.value === ModuleKey.HOME) {
        return toRouteOption(portalMenuStore.getCommonMenus)
    }
    return toRouteOption(portalMenuStore.getModuleMenus(currentModule.value))
});

const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
    const { meta, path } = route;
    // if set path, the sidebar will highlight the path you set
    if (meta.activeMenu) {
        return meta.activeMenu;
    }
    return path;
})

const bgColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground);
const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor);
</script>
