<template>
    <div class="side-panel">
        <!-- 顶部Logo区域 -->
        <div class="logo-area">
            <div class="logo-container">
                <el-image :src="logo" alt="logo" class="logo-image" fit="cover"></el-image>
            </div>
            <div class="app-title" v-show="!isCollapsed">
                <el-tooltip
                    v-if="title.length > 8"
                    :content="title"
                    placement="right"
                >
                    <span class="title-text" :class="{'long-text': title.length > 6}">
                        {{ title.length > 8 ? title.slice(0, 8) + '...' : title }}
                    </span>
                </el-tooltip>
                <span v-else class="title-text" :class="{'long-text': title.length > 6}">
                    {{ title }}
                </span>
            </div>
        </div>

        <!-- 中间菜单区域 -->
        <div class="menu-area">
            <el-menu
                :collapse="isCollapsed"
                :collapse-transition="false"
                :default-active="activeMenu"
                class="menu-list"
                background-color="#304156"
                text-color="#bfcbd9"
                active-text-color="#409EFF"
                router
            >
                <el-menu-item index="/home">
                    <i class="fa fa-desktop"></i>
                    <template #title>
                        <span class="ml-2">我的工作台</span>
                    </template>
                </el-menu-item>
                <template v-for="item in menuItems" :key="item.id">
                    <!-- 无子菜单的菜单项 -->
                    <el-menu-item v-if="!item.children" :index="item.id">
                        <i :class="item.icon"></i>
                        <template #title>
                            <span class="ml-2">{{ item.name }}</span>
                        </template>
                    </el-menu-item>

                    <!-- 有子菜单的菜单项 -->
                    <el-sub-menu v-else :index="item.id">
                        <template #title>
                            <i :class="item.icon"></i>
                            <span class="ml-2">{{ item.name }}</span>
                        </template>
                        <el-menu-item
                            v-for="child in item.children"
                            :key="child.path"
                            :index="child.path"
                        >
                            <i :class="child.icon"></i>
                            <template #title>
                                <span class="ml-2">{{ child.name }}</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                </template>
            </el-menu>
        </div>

        <!-- 底部固定菜单 -->
        <div class="bottom-menu">
            <el-menu
                :collapse="isCollapsed"
                :collapse-transition="false"
                class="bottom-menu-list"
                background-color="#304156"
                text-color="#bfcbd9"
                active-text-color="#409EFF"
                router
            >
                <el-menu-item index="/settings">
                    <i class="fa fa-cog"></i>
                    <template #title>
                        <span class="ml-2">系统设置</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/profile">
                    <i class="fa fa-user"></i>
                    <template #title>
                        <span class="ml-2">用户中心</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/switch-role">
                    <i class="fa fa-exchange"></i>
                    <template #title>
                        <span class="ml-2">切换角色</span>
                    </template>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
    import { ElImage } from 'element-plus'
    import { ref, computed } from 'vue'
    import { useRoute } from 'vue-router'
    import * as envUtils from '@/utils/env'

    const props = defineProps({
        isCollapsed: {
            type: Boolean,
            default: false
        },
        menuItems: {
            type: Array,
            default: () => []
        },
        logo: {
            type: String,
            default: envUtils.getRuntimeConfig('VITE_APP_LOGO_PATH', envUtils.getLogoPath())
        },
        title: {
            type: String,
            default: envUtils.getRuntimeConfig('VITE_APP_TITLE', envUtils.getAppTitle())
        }
    })

    const route = useRoute()
    const activeMenu = computed(() => route.path)
</script>

<style lang="scss" scoped>
.side-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: solid 1px #e6e6e6;
    background-color: #304156;

    .logo-area {
        height: 60px;
        padding: 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #1f2d3d;

        .logo-container {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            // border-radius: 20px;
            // background-color: #fff;

            .logo-image {
                width: 100%;
                height: 100%;
                border-radius: 20px;
                border: 1px solid #fff;
            }
        }

        .app-title {
            margin-left: 10px;
            overflow: hidden;

            .title-text {
                color: #fff;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 20px;

                &.long-text {
                    font-size: 16px;
                }
            }
        }
    }

    .menu-area {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;

        .menu-list {
            height: 100%;
            border: none;
        }
    }

    .bottom-menu {
        border-top: 1px solid #1f2d3d;
        overflow: hidden;

        .bottom-menu-list {
            border: none;
        }
    }

    :deep(.el-menu) {
        .el-menu-item, .el-sub-menu__title {
            &:hover {
                background-color: #263445;
            }
        }

        .el-menu-item.is-active {
            background-color: #254c70;
        }
    }

    :deep(.el-menu--collapse) {
        width: 60px;
    }
}
</style>