<template>
  <nav class="top-menu">
    <ul class="main-menu">
      <li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
        <p class="depth1" :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
        <ul v-if="mainMenu.subMenu" class="sub-menu" :style="subShow ? 'max-height:500px; opacity:1' : 'max-height:0px; opacity:0'">
          <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" :style="subShow ? `height: ${maxSubMenuHeight}px` : `height: 0px`"></div>
  </nav>
</template>
<script>

export default {
  data() {
    return {
      menuList: [
        // { path: "/", pathName: "Dashboard", },
        {
          pathName: "데이터관리",
          subMenu: [
            { path: "/fileManagement.page", pathName: "파일관리" },
            { path: "/hostManagement.page", pathName: "호스트관리" },
            { path: "/dataManagement.page", pathName: "데이터관리" },
            // { path: "/jobTest.page", pathName: "데이터 공유 관리" },
          ],
        },
        {
          pathName: "메타관리",
          subMenu: [
            { path: "/dataMetaManagement.page", pathName: "데이터 메타 정보" },
            { path: "/termManagement.page", pathName: "표준 용어 관리" },
          ],
        },
        {
          pathName: "작업관리",
          subMenu: [
            // { path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
            { path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
            //{ path: "/push.page", pathName: "알림관리" },
            //{ path: "/scheduleLogManagement.page", pathName: "로그 관리" },
          ],
        },
        {
          pathName: "데이터활용",
          subMenu: [
            { path: "/customSelectList.page", pathName: "데이터 활용 관리" },
            // { path: "/customInsertDev.page", pathName: "개발테스트" },

            // { path: "/", pathName: "데이터 활용 공유 관리" },
            // { path: "/", pathName: "GIS데이터 관리" },
            // { path: "/", pathName: "데이터현황 관리" },
            { path: "/gisInfoList.page", pathName: "GIS 기능 관리" },
            { path: "/openApiList.page", pathName: "OpenAPI 목록" },
            { path: "/openApiKeyList.page", pathName: "OpenAPI key 관리" },
          ],
        },
        {
          pathName: "통합관리",
          subMenu: [
            { path: "/user.page", pathName: "사용자관리" },
            { path: "/department.page", pathName: "부서관리" },
            { path: "/dbConnectionList.page", pathName: "연계정보관리" },
          ],
        },
        {
          pathName: "정보관리",
          subMenu: [
            { path: "/myPage.page", pathName: "내정보관리" },
            { path: "/myPagePwd.page", pathName: "비밀번호 변경" },
            // { path: "/", pathName: "부서메일" },
          ],
        },
        // {
        //     pathName: "ai solution",
        //     subMenu: [
        //         { path: "/", pathName: "ai solution" },

        //     ],
        // },
        // {
        //     pathName: "템플릿",
        //     subMenu: [
        //         { path: "/searchbar.page", pathName: "서치바" },
        //         { path: "/table.page", pathName: "테이블" },
        //         { path: "/btnPosition.page", pathName: "버튼별 위치" },
        //         { path: "/formModal.page", pathName: "form modal" },
        //         { path: "/listModal.page", pathName: "list modal" },
        //         { path: "/icon.page", pathName: "icon" },
        //     ],
        // },
        // {
        //     pathName: "레이아웃 템플릿",
        //     subMenu: [
        //         { path: "/vertical.page", pathName: "수직 레이아웃" },
        //         { path: "/horizontal.page", pathName: "수평 레이아웃" },
        //     ],
        // },
        // {
        //     pathName: "가이드",
        //     subMenu: [
        //         { path: "/guide.page", pathName: "가이드" },
        //     ],
        // },
      ],
      currentRoute: null,
      subShow: false
    }
  },
  methods: {
    showAllSubMenus() {
      this.subShow = true;
    },
    hideAllSubMenus() {
      this.subShow = 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: {
    maxSubMenuHeight: function () {
      let maxSubItems = Math.max(...this.menuList.map(menu => menu.subMenu.length));
      return maxSubItems * 55; // assuming each item is 50px high
    }
  },
}
</script>
