<!--
 * @Author: Kane
 * @Date: 2023-03-23 15:40:08
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/layout/components/Aside.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <el-scrollbar class="sidebar-wrapper">
        <el-menu
            class="side-bar"
            router
            :default-active="currentPath"
            background-color="#2f4156"
            text-color="#fff"
            active-text-color="#ffd04b"
        >
            <template v-for="route in routes">
                <template v-if="!route.hidden">
                    <template v-if="hasOnlyChild(route.children)">
                        <!-- 当只有一个子路由时，将这个子路由作为顶级菜单项 -->
                        <el-menu-item
                            :key="route.children[0].path"
                            :index="route.children[0].path"
                            class="sidebar-submenu"
                        >
                            <component
                                :is="route.children[0] && route.children[0].meta.icon"
                                class="icons"
                            />
                            <template #title>
                                {{ route.children[0].meta && route.children[0].meta.title }}
                            </template>
                        </el-menu-item>
                    </template>
                    <template v-else>
                        <!-- 不止一个子路由，可能是咩有子s路由，或者有多个子路由 -->
                        <!-- 如果没有子路由，就不渲染 -->
                        <el-sub-menu
                            v-if="route.children && route.children.length"
                            :key="route.path"
                            :index="route.path"
                            class="sidebar-submenu"
                        >
                            <template #title>
                                <component
                                    :is="route.meta && route.meta.icon"
                                    class="icons"
                                />
                                <span>{{ route.meta && route.meta.title }}</span>
                            </template>
                            <template v-for="child in route.children">
                                <el-menu-item
                                    v-if="!child.hidden"
                                    :key="child.path"
                                    :index="child.path"
                                    class="sidebar-item"
                                >
                                    <component
                                        :is="child.meta && child.meta.icon"
                                        class="icons"
                                    />
                                    <template #title>
                                        {{ child.meta && child.meta.title }}
                                    </template>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                </template>
            </template>
        </el-menu>
    </el-scrollbar>
</template>
<script lang="js">
// @ts-expect-error 之后再补充类型文件
import { hasOnlyChild } from "@/router/index.js";
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";

export default {
    name: "LayoutAside",
    setup()
    {
        const userRout = useRoute();
        const router = useRouter();
        const routes = router.getRoutes();// as SideBarRouteRecordNormalized[];

        const currentPath = computed(() =>
        {
            return userRout.path;
        });

        return { userRout, routes, currentPath, hasOnlyChild, };
    },
};
</script>

<style lang="scss" scoped>
.sidebar-wrapper {
    @include no-select;

    height: 100%;
    width: 100%;
}

:deep(.el-menu) {
    border-right: none;
    /* border-left: 5px solid #1d74b2; */
    overflow: auto;

    .el-menu-item {
        font-weight: normal;
    }

    .el-sub-menu {
        font-weight: normal;
    }

    .el-menu-item.is-active {
        // background-color: #ffffff1f !important;
        font-weight: 1000;
        font-size: 15px;
        color: #ffd04b;
    }
}

.sidebar-submenu {
    background-color: #2f4156 !important;
}

.sidebar-item {
    background-color: #223142 !important;
}

/* .is-opened {
    border-left: 5px solid #1d74b2;
} */

.icons {
    width: 1em;
    height: 1em;
    margin-right: 8px;
}
</style>
