<template>
    <div class="aside">
        <div class="title">
            <div class="img"></div>
            <div class="text">AI调色</div>
        </div>
        <div class="scrollbar">
            <el-scrollbar>
                <el-menu :default-openeds="['/SystemManage']" :default-active="route.path" class="el-menu-vertical-demo" active-text-color="#fff" background-color="#001628" text-color="#415058" router>
                    <template v-for="(item, index) in routes[0].children" :key="index">
                        <el-sub-menu :index="'/' + item.path" v-if="item.children && item.children.length > 0">
                            <template #title>
                                <el-icon v-if="item.meta.title === '底色管理'"><i-ep-HomeFilled /></el-icon>
                                <el-icon v-if="item.meta.title === '色膏管理'"><i-ep-HelpFilled /></el-icon>
                                <el-icon v-if="item.meta.title === '配方管理'"><i-ep-MessageBox /></el-icon>
                                <el-icon v-if="item.meta.title === '配方计算'"><i-ep-ScaleToOriginal /></el-icon>
                                <el-icon v-if="item.meta.title === '系统管理'"><i-ep-Menu /></el-icon>
                                <span>{{ item.meta.title }}</span>
                            </template>
                            <el-menu-item v-for="(ele, idx ) in item.children" :index="'/' + item.path + '/' + ele.path" :key="idx">{{ ele.meta.title }}</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item :index="'/' + item.path" v-else>
                            <el-icon v-if="item.meta.title === '底色管理'"><i-ep-HomeFilled /></el-icon>
                            <el-icon v-if="item.meta.title === '色膏管理'"><i-ep-HelpFilled /></el-icon>
                            <el-icon v-if="item.meta.title === '配方管理'"><i-ep-MessageBox /></el-icon>
                            <el-icon v-if="item.meta.title === '配方计算'"><i-ep-ScaleToOriginal /></el-icon>
                            <el-icon v-if="item.meta.title === '系统管理'"><i-ep-Menu /></el-icon>
                            <span>{{ item.meta.title }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { routes } from '@/router/index';

const route = useRoute();
</script>

<style lang="scss" scoped>
.aside {
    height: 98vh;
    background-color: #001628;

    .title {
        display: flex;
        align-items: center;
        height: 60px;

        .img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-left: 24px;
            margin-right: 10px;
            background-color: skyblue;
        }

        .text {
            color: rgba(24, 144, 255, 100);
        }
    }

    .scrollbar {
        height: calc(98vh - 60px);
    }

    .el-scrollbar {
        background-color: #001628;

        .el-menu-item.is-active {
            background-color: #006eff;
        }
    }
}
</style>