<!--
 * @Author: Kane
 * @Date: 2023-01-04 11:30:33
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-09 15:24:55
 * @FilePath: \admin_system\src\layout\components\Aside.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <el-menu id="side-bar" router :default-active="currentPath" background-color="#223142" text-color="#fff"
        active-text-color="#ffd04b" :collapse="asideCollapse">
        <template v-for="route in this.routers" :key="route.path">
            <template v-if="!route.hidden">
                <template v-if="hasOnlyChild(route.children)">
                    <!-- 当只有一个子路由时，直接渲染子路由 -->
                    <el-menu-item :index="route.children[0].path">
                        <component :is="route.children[0].meta.icon" class="icons">
                        </component>
                        <!-- <el-icon v-html="route.children[0].meta && route.children[0].meta.icon"></el-icon> -->
                        <template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
                    </el-menu-item>
                </template>
                <template v-else>
                    <!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
                    <el-sub-menu v-if="route.children && route.children.length" :index="route.path">
                        <template #title>
                            <component :is="route.children[0].meta.icon" class="icons"></component>
                            <span>{{ route.meta && route.meta.title }}</span>
                        </template>
                        <template v-for="child in route.children" :key="child.path">
                            <el-menu-item v-if="!child.hidden" :index="child.path">
                                <component :is="route.children[0].meta.icon" class="icons"></component>
                                <template #title>{{ child.meta && child.meta.title }}</template>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
            </template>
        </template>
    </el-menu>
</template>

<script>
import { useRouter, useRoute } from "vue-router";

export default {
    name: "LayoutAside",
    data()
    {
        return {
            routers: null,
        };
    },
    methods: {
        //用于判断一个路由是否只有一项子路由
        hasOnlyChild: function (children)
        {
            //防御验证
            if (!children)
            {
                return false;
            }

            //剔除掉hidden的路由
            const routes = children.filter((item) =>
            {
                return item.hidden ? false : true;
            });

            if (routes.length === 1)
            {
                return true;
            }

            return false;
        },

    },
    computed: {
        //获取当前的路由
        currentPath()
        {
            return useRoute().path;
        },
        //获取导航栏是否折叠的标志
        asideCollapse()
        {
            return this.$store.state.app.asideBarCollapse;
        }
    },
    created()
    {
        this.routers = useRouter().options.routes;

        console.log(this.routers);
    }
};
</script>

<style scoped>
.el-menu {
    border-right: none;
    /* border-left: 5px solid #1d74b2; */
    overflow: auto;

    -webkit-touch-callout: none;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

.is-active {
    background-color: #ffffff4f !important;
}



.is-opened {
    border-left: 5px solid #1d74b2;
    /* background-color: #344a5f !important; */
}

.icons {
    width: 1em;
    height: 1em;
    margin-right: 8px;
}

/* .el-menu-item {
    padding: 5px;
    border: 1px solid red;
} */
</style>