<template>
    <nav class="top-menu">
        <ul class="main-menu">
            <li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
                <p :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
                <ul v-if="mainMenu.subMenu" class="sub-menu" v-show="showSubmenu"
                    :class="{ show: showSubmenu, hide: !showSubmenu }">
                    <li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx" :class="{ active: isSubMenuActive(subMenu) }">
                        <router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="navbg" v-show="showSubmenu" :class="{ show: showSubmenu, hide: !showSubmenu }"></div>
    </nav>
</template>
 
<script>

export default {
    data() {
        return {
            menuList: [
                // { path: "/", pathName: "Dashboard", },
                {
                    pathName: "데이터관리",
                    subMenu: [
                        { path: "/fileManagement.page", pathName: "파일관리" },
                        { path: "/hostManagement.page", pathName: "호스트관리" },
                        { path: "/", pathName: "데이터셋 목록" },
                        { path: "/", pathName: "데이터 공유 관리" },
                    ],
                },
                {
                    pathName: "메타관리",
                    subMenu: [
                        { path: "/", pathName: "데이터 메타 정보" },
                        { path: "/", pathName: "표준 용어 관리" },
                    ],
                },
                {
                    pathName: "작업관리",
                    subMenu: [
                        { path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
                        { path: "/scheduleLogManagement.page", pathName: "로그 관리" },
                    ],
                },
                {
                    pathName: "데이터활용",
                    subMenu: [
                        { path: "/", pathName: "데이터 활용 관리" },
                        { path: "/", pathName: "데이터 활용 공유 관리" },
                        { path: "/", pathName: "GIS데이터 관리" },
                        { path: "/", pathName: "데이터현황 관리" },
                        { path: "/", pathName: "OpenAPI 목록" },
                    ],
                },
                {
                    pathName: "통합관리",
                    subMenu: [
                        { path: "/", pathName: "사용자관리" },
                        { path: "/", pathName: "부서관리" },
                        { path: "/", pathName: "연계정보관리" },
                    ],
                },
                {
                    pathName: "정보관리",
                    subMenu: [
                        { path: "/", pathName: "내정보관리" },
                        { path: "/", pathName: "비밀번호 변경" },
                        { path: "/", pathName: "부서메일" },
                    ],
                },
                {
                    pathName: "ai solution",
                    subMenu: [
                        { path: "/", pathName: "ai solution" },

                    ],
                },
                {
                    path: "/searchbar.page", pathName: "템플릿",
                    subMenu: [
                        { path: "/searchbar.page", pathName: "서치바" },
                        { path: "/table.page", pathName: "테이블" },
                        { path: "/btnPosition.page", pathName: "버튼별 위치" },
                    ],
                },
            ],
            currentRoute: null,
            showSubmenu: false
        }
    },
    methods: {
        showAllSubMenus() {
            this.showSubmenu = true;
        },
        hideAllSubMenus() {
            this.showSubmenu = false;
        },

        isMainMenuActive(mainMenu) {
            return this.currentRoute && (this.currentRoute.path === mainMenu.path || this.isSubMenuActive(mainMenu.subMenu));
        },

        isSubMenuActive(subMenu) {
            if (!subMenu) return false;
            for (let i = 0; i < subMenu.length; i++) {
                if (this.currentRoute.path === subMenu[i].path) {
                    return true;
                }
            }
            return false;
        },
    },
    watch: {
        $route(to, from) {
            this.currentRoute = to;
        },
    },
    computed: {

    },
    components: {

    },
    mounted() {
        console.log('Menu mounted');
    }
}
</script>
