<template>
    <aside class="sidebar" :class="{ collapsed: isCollapsed }">
        <div class="sider_top">
            <!-- <div class="img_box">
                <img :src="isCollapsed ? foldLogo : siderTopLogo" alt="">
            </div> -->
            <!-- GENUINE OPTICS (THAILAND) -->
        </div>
        <ul>
            <li v-for="(item, index) in allMenuItems" :key="item.groupIndex" class="menu-group">
                <!-- 父级菜单项 -->
                <div class="menu-parent" :class="{ expanded: item.expanded, 'has-active-child': hasActiveChild(item), 'parent-active': isParentActive(item, item.groupIndex) }"
                    @click="toggleMenu(item.groupIndex)">
                    <div class="menu-parent-inner">
                        <img v-if="item.iconImg" :src="item.iconImg" class="menu-icon-img" :alt="item.label" />
                        <i v-else class="pi" :class="item.icon"></i>
                        <span v-if="!isCollapsed">{{ item.label }}</span>
                    </div>
                    <i v-if="!isCollapsed" class="pi pi-chevron-down caret" :class="{ expanded: item.expanded }"></i>
                </div>
                <!-- 子级菜单项 -->
                <ul v-if="!isCollapsed && item.expanded && item.children" class="sub-menu">
                    <li v-for="(child, childIndex) in item.children" :key="childIndex" @click="goPage(child.name)"
                        :class="{ active: currentName === child.name }" class="sub-menu-item">
                        <div class="sub-menu-inner">
                            <img v-if="child.iconImg" :src="child.iconImg" class="sub-menu-icon-img" alt="" />
                            <i v-else class="dot"></i>
                            <span>{{ child.label }}</span>
                        </div>
                        <div v-if="currentName === child.name" class="active-indicator"></div>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="sidebar-footer">
            <div class="watermark">
                <img :src="isCollapsed ? foldCompanyLogo : companyLogo" alt="">
            </div>
        </div>
    </aside>
</template>

<script setup>
import { getTimesheetRouteName } from "../configs/common";
import { ref, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { useUiStore } from "../store/ui";
import systemIcon from "../images/sider/system.png";
import assetsIcon from "../images/sider/assets.png";
import meteringIcon from "../images/sider/metering.png";
import operationLogIcon from "../images/sider/log.svg";
import overviewDashboardIcon from "../images/sider/overview.svg";
import siderTopLogo from "../images/sider/newLogo.svg";
import foldLogo from "../images/sider/newLogo.svg";
import companyLogo from "../images/logo.png";
import foldCompanyLogo from "../images/sider/foldCompanyLoago.svg";

import { storeToRefs } from "pinia";

const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const uiStore = useUiStore();
const { isSidebarCollapsed: isCollapsed } = storeToRefs(uiStore);

// 菜单展开状态 - 与 fullMenuConfig 下标一致：0 概览看板、1 资产管理、2 计量管理、3 系统管理、4 操作日志
const menuExpandedStates = ref({
    0: true,  // 概览看板默认展开（与默认首页一致）
    1: false,
    2: false,
    3: false,
    4: false,
});

// 当前“选中”的父级索引（仅此父级显示蓝色，其他保持灰色）
const lastClickedParentIndex = ref(0);

// 所有菜单项配置（路由 name 与 Vue Router 一致）
const fullMenuConfig = [
    {
        // 概览看板
        labelKey: "menu.overviewDashboard",
        icon: "pi-chart-line",
        iconImg: overviewDashboardIcon,
        isAsset: false,
        children: [
            { labelKey: "menu.overviewDashboard", name: "OverviewDashboard", icon: "pi-chart-line" },
            // { labelKey: "role.pagePermission.equipmentRepairReport", name: "EquipmentRepairReport", icon: "pi-file" },
            // { labelKey: "role.pagePermission.equipmentAcceptanceReport", name: "EquipmentAcceptanceReport", icon: "pi-file" },
            { labelKey: "role.pagePermission.equipmentMaintenanceReport", name: "EquipmentMaintenanceReport", icon: "pi-file" },
            { labelKey: "role.pagePermission.equipmentMeteringReport", name: "EquipmentMeteringReport", icon: "pi-file" },
        ],
    },
    {
        // 资产管理
        labelKey: "menu.assetManagement",
        icon: "pi-database",
        iconImg: assetsIcon,
        isAsset: true,
        children: [
            { labelKey: "menu.assetList", name: "AssetList", icon: "pi-box" },
            { labelKey: "menu.assetInventory", name: "AssetInventory", icon: "pi-list" },
            { labelKey: "menu.deviceMaintain", name: "DeviceMaintain", icon: "pi-wrench" },
            { labelKey: "menu.deviceRepair", name: "DeviceRepair", icon: "pi-box" },
            { labelKey: "menu.assetAlarmRecord", name: "AssetAlarmRecord", icon: "pi-bell" },
            { labelKey: "menu.accessControlManage", name: "AccessControlManage", icon: "pi-lock" },
            { labelKey: "menu.attachmentManage", name: "AttachmentManage", icon: "pi-paperclip" },
        ],
    },
    {
        // 计量管理
        labelKey: "menu.measurementManagement",
        icon: "pi-database",
        iconImg: meteringIcon,
        isAsset: true,
        children: [
            { labelKey: "menu.deviceMetering", name: "DeviceMetering", icon: "pi-paperclip" },
            { labelKey: "menu.measureMaterialManage", name: "MeasureMaterialManage", icon: "pi-box" },
        ],
    },
    {
        // 系统管理
        labelKey: "menu.systemManagement",
        icon: "pi-cog",
        iconImg: systemIcon,
        isAsset: false,
        children: [
            { labelKey: "menu.userManagement", name: "UserManage", icon: "pi-users" },
            { labelKey: "menu.roleManagement", name: "RoleManage", icon: "pi-shield" },
            { labelKey: "menu.employeeManagement", name: "EmployeeManage", icon: "pi-user" },
            { labelKey: "menu.factoryManagement", name: "FactoryManage", icon: "pi-building" },
            { labelKey: "menu.sensorManagement", name: "SensorManage", icon: "pi-microchip" },
        ],
    },
    {
        // 操作日志（子项：操作日志页）
        labelKey: "menu.operationLogParent",
        icon: "pi-history",
        iconImg: operationLogIcon,
        isAsset: false,
        children: [
            { labelKey: "menu.operationLog", name: "OperationLog", icon: "pi-history" },
        ],
    },
];

// 左侧菜单始终展示全部配置项（不再按接口 permission_codes 过滤）
const allMenuItems = computed(() => {
    const expanded = menuExpandedStates.value;
    return fullMenuConfig.map((group, groupIndex) => {
        const visibleChildren = group.children || [];
        return {
            groupIndex,
            label: t(group.labelKey),
            icon: group.icon,
            iconImg: group.iconImg,
            expanded: expanded[groupIndex],
            isAsset: group.isAsset,
            children: visibleChildren.map((child) => ({
                label: t(child.labelKey),
                name: getTimesheetRouteName(child.name),
                icon: child.icon,
                iconImg: child.iconImg,
            })),
        };
    });
});

// 获取当前可见菜单的所有路由名称
const getAllMenuRouteNames = () => {
    const routeNames = [];
    allMenuItems.value.forEach((item) => {
        if (item.children) {
            item.children.forEach((child) => {
                if (child.name) routeNames.push(child.name);
            });
        }
    });
    return routeNames;
};

// 默认路由名称（概览看板）；当前路由不在菜单内时的回退路由
const defaultRouteName = getTimesheetRouteName("OverviewDashboard");

// 计算当前选中的路由名称
const currentName = computed(() => {
    const routeName = route.name;
    const menuRouteNames = getAllMenuRouteNames();

    // 如果当前路由不在菜单项中，或者路由为空/未定义，则默认选中概览看板
    if (!routeName || !menuRouteNames.includes(routeName)) {
        return defaultRouteName;
    }

    return routeName;
});

// 判断该父菜单下是否有当前激活的子项（用于父级标题变色）
const hasActiveChild = (item) => {
    if (!item.children) return false;
    return item.children.some((child) => child.name === currentName.value);
};

// 当前父级是否为“选中”状态（仅一个父级为 true，用于蓝色高亮）
const isParentActive = (item, groupIndex) => {
    return groupIndex === lastClickedParentIndex.value && (hasActiveChild(item) || item.expanded);
};

const toggleMenu = (index) => {
    if (isCollapsed.value) {
        const targetGroup = allMenuItems.value.find((item) => item.groupIndex === index);
        if (targetGroup?.children?.length) {
            goPage(targetGroup.children[0].name);
        }
        lastClickedParentIndex.value = index;
        return;
    }
    menuExpandedStates.value[index] = !menuExpandedStates.value[index];
    lastClickedParentIndex.value = index;
};

const goPage = (name) => {
    if (name) {
        router.push({ name });
    }
};

const handleLogout = () => {
    // 清除本地存储的 token 和 uid
    localStorage.removeItem("token");
    localStorage.removeItem("uid");
    // 跳转到登录页
    router.push({ name: getTimesheetRouteName("Login") });
};

watch(
    () => route.name,
    (newName) => {
        const menuRouteNames = getAllMenuRouteNames();
        if (newName && !menuRouteNames.includes(newName)) {
            router.push({ name: defaultRouteName });
        }
        // 手风琴：只展开当前路由所在分组，其余分组折叠
        const newExpanded = { 0: false, 1: false, 2: false, 3: false, 4: false };
        allMenuItems.value.forEach((item) => {
            if (item.children && item.children.some((child) => child.name === newName)) {
                newExpanded[item.groupIndex] = true;
                lastClickedParentIndex.value = item.groupIndex;
            }
        });
        menuExpandedStates.value = newExpanded;
    },
    { immediate: true }
);
</script>

<style scoped>
.sidebar {
    background: #FFFFFF;
    box-shadow: 2px 0px 15px 0px rgba(0, 69, 143, 0.05);
    border-radius: 0px 0px 0px 0px;
    padding: 1rem 0;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    padding: 0 12px;
    position: relative;
    padding-bottom: 4rem;
    flex-shrink: 0;

    .sider_top {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 25px;

        .img_box {
            width: 140px;
            height: 26px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

}

.sidebar.collapsed {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 0 8px;

    .sider_top .img_box {
        width: 44px;
        height: 26px;
    }
}

.sidebar>ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-group {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 父级菜单样式 */
.menu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.sidebar.collapsed .menu-parent {
    justify-content: center;
    padding: 0.7rem 0;
}

.menu-parent-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* flex: 1; */
    min-width: 0;
    overflow: hidden;
}

.sidebar.collapsed .menu-parent-inner {
    justify-content: center;
}

.menu-parent .pi {
    font-size: 1rem;
    transition: color 0.2s;
}

.menu-parent .menu-icon-img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* 父级菜单默认正常色（灰） */
.menu-parent .pi-cog,
.menu-parent .pi-database,
.menu-parent .pi-ruler,
.menu-parent .pi-chart-line,
.menu-parent .pi-history {
    color: #6b7280;
}

.menu-parent span {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    transition: color 0.2s;
}

/* 仅当前“选中”的父级（parent-active）显示主题色，其他父级保持灰色 */
.menu-parent.parent-active .pi,
.menu-parent.parent-active span {
    color: #3067E5;
}

.caret {
    margin-top: 3px;
    font-size: 0.75rem;
    transition: transform 0.2s, color 0.2s;
}

.menu-parent .caret {
    color: #6b7280;
    scale: .75;
}

.menu-parent.parent-active .caret {
    color: #3067E5;
}

.caret.expanded {
    transform: rotate(180deg);
}

/* 子菜单容器 */
.sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
}

/* 子菜单项样式 */
.sub-menu-item {
    display: flex;
    align-items: center;
    list-style: none;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    height: 36px;
}

.sub-menu-item:hover {
    background: #EFF4FF;
    border-radius: 4px 4px 4px 4px;
}

/* .sub-menu-item.active {
    background: #fff5f0;
} */

.sub-menu-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 0.75rem 3rem;
    min-width: 0;
    overflow: hidden;
}

.sub-menu-item .pi {
    font-size: 0.875rem;
    transition: color 0.2s;
}

.sub-menu-item:not(.active) .pi {
    color: #6b7280;
}

.sub-menu-item:not(.active) span {
    color: #6b7280;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* flex: 1; */
    min-width: 0;
}

.sub-menu-item.active .pi {
    color: #3067E5;
}

.sub-menu-item.active span {
    color: #3067E5;
    font-size: 0.875rem;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}

/* 激活指示器（右侧橙色竖条） */
.active-indicators {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3067E5;
}

.sidebar-footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.logout-btn {
    width: 100%;
    justify-content: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.logout-btn:hover {
    color: #3067E5;
    background-color: #fff5f0;
}

.watermark {
    text-align: center;
    width: 110px;
    height: 20px;
    img{
        width: 100%;
        height: 100%;
    }
}

.sidebar.collapsed .watermark {
    width: 36px;
    height: 20px;
}

.dot {
    width: 5px;
    height: 5px;
    background: #3067E5;
    border-radius: 5px;
}

.sub-menu-icon-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
</style>