<template>
    <section id="webAdminLayoutLeftMenu" class="w-full bg-white left-menu">
        <h1 class="bg-[#21376b] text-white text-center mt-5" style="font-size: 24px; font-weight: bold; display: flex; justify-content: center">
            <!-- <img class="login-img" src="@/assets/images/hglogo.png" alt="logo" /> -->
            <div>牛只运输跟踪系统</div>
        </h1>
        <div class="menu-list">
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                    :collapse="isCollapse"
                    :default-active="currentMenu"
                    :router="true"
                    :unique-opened="true"
                    background-color="#21376b"
                    class="border-none left-menu-list"
                    text-color="#fff"
                >
                    <template v-for="route in sidebarRouters">
                        <template v-if="route.children && route.children.length > 0">
                            <el-sub-menu :index="route.path">
                                <template #title>
                                    <svg-icon :icon-class="route.meta.icon" />
                                    <span class="pl-3">{{ route.meta.title }}</span>
                                </template>
                                <template v-for="cItem in route.children">
                                    <template v-if="cItem.children && cItem.children.length > 0">
                                        <el-sub-menu :index="joinPath(route.path, cItem.path)">
                                            <template #title>
                                                <!-- <svg-icon :icon-class="cItem.meta.icon" /> -->
                                                <span class="pl-3">{{ cItem.meta.title }}</span>
                                            </template>
                                            <template v-for="subItem in cItem.children">
                                                <el-menu-item :index="joinPath(joinPath(route.path, cItem.path), subItem.path)">
                                                    <svg-icon :icon-class="subItem.meta.icon" />
                                                    <span class="pl-3">{{ subItem.meta.title }}</span>
                                                </el-menu-item>
                                            </template>
                                        </el-sub-menu>
                                    </template>
                                    <template v-else>
                                        <el-menu-item :index="joinPath(route.path, cItem.path)">
                                            <svg-icon :icon-class="cItem.meta.icon" />
                                            <span class="pl-3">{{ cItem.meta.title }}</span>
                                        </el-menu-item>
                                    </template>
                                </template>
                            </el-sub-menu>
                        </template>
                        <template v-else>
                            <el-menu-item :index="route.path">
                                <svg-icon :icon-class="route.meta.icon" />
                                <span class="pl-3">{{ route.meta.title }}</span>
                            </el-menu-item>
                        </template>
                    </template>
                </el-menu>
            </el-scrollbar>
        </div>
    </section>
</template>
<script setup>
import { computed, ref, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import usePermissionStore from '@/store/permission.js';
import { getConfig } from '~/api/sys.js';

const permissionStore = usePermissionStore();
const data = reactive({
    name: '',
    logoUrl: '',
});
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const route = useRoute();

// 安全拼接路径，避免双斜杠
const joinPath = (parentPath, childPath) => {
    if (!parentPath || !childPath) return parentPath || childPath || '/';
    
    // 移除父路径末尾的斜杠
    parentPath = parentPath.replace(/\/+$/, '');
    // 移除子路径开头的斜杠
    childPath = childPath.replace(/^\/+/, '');
    
    // 拼接并规范化
    const joined = `${parentPath}/${childPath}`;
    // 移除重复的斜杠
    return joined.replace(/\/+/g, '/');
};

const currentMenu = ref('/');
const isCollapse = ref(false);
const userStore = JSON.parse(localStorage.getItem('userStore'));
watch(
    () => route,
    (nVal) => {
        currentMenu.value = nVal.path;
    },
    {
        immediate: true,
        deep: true,
    },
);
const getDataList = () => {
    getConfig().then((ret) => {
        if (ret.data) {
            data.name = ret.data.name;
            if (ret.data.logoUrl) {
                data.logoUrl = ret.data.logoUrl;
            }
        }
    });
};
const activeMenu = computed(() => {
    const { meta, path } = route;
    if (meta.activeMenu) {
        return meta.activeMenu;
    }
    return path;
});
onMounted(() => {
    // getDataList();
});
</script>
<style scoped>
.login-img {
    margin-right: 10px;
    margin-top: 5px;
    /* margin: 30px auto 14px; */
    width: 26px;
    height: 26px;
}

.left-menu,
.left-menu-list,
.el-sub-menu,
.el-menu-item {
    background: #21376b;
}

.left-menu-list:hover {
    background: #041e61;
}

.el-menu-item.is-active {
    color: #fff;
    background: #274389;
    border-right: 5px solid #3b74ff;
}

.el-menu-item {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    letter-spacing: 0.17px;
    color: #fff;
}

.el-menu-item:hover {
    background-color: #041e61;
}

.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
    color: #fff;
}
</style>
