<template>
  <nav class="main-menu">
    <div class="logo-wrap">
      <h1 class="logo"><router-link to="/">AI 디지털교과서 통합지원센터</router-link></h1>
    </div>
    <ul>
      <li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu)">
        <router-link :to="menu.path">{{ menu.pathName }}<span v-html="menu.icon"></span></router-link>
        <ul v-if="menu.subMenu" class="sub-menu" :style="{ 'max-height': menu.isOpen ? '200px' : '0' }">
          <li v-for="(subMenu, subIndex) in menu.subMenu" :key="subIndex">
            <router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { path: "/main.page", pathName: "대시보드" },
        { path: "/notice.page", pathName: "커뮤니티", subMenu: [{ path: "/notice.page", pathName: "공지사항" }, { path: "/new.page", pathName: "홍보/뉴스" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
        { path: "/document.page", pathName: "자료실", subMenu: [{ path: "/document.page", pathName: "기술문서" }, { path: "/reference.page", pathName: "자료집" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
        { path: "/statistics.page", pathName: "통계서비스" },
        { path: "/corporatePR.page", pathName: "네트워킹", subMenu: [{ path: "/corporatePR.page", pathName: "기업홍보관" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
        { path: "/modal.page", pathName: "팝업관리" },
        { path: "/email.page", pathName: "메일발송" },
        { path: "/userSelectList.page", pathName: "사용자관리" },
        { path: "/subscription .page", pathName: "구독서비스" },
      ]
    };
  },
  methods: {
    //토글 메뉴
    toggleMenu(menu) {
      console.log(menu);
      if (menu.hasOwnProperty('isOpen')) {
        menu.isOpen = !menu.isOpen;
        if (menu.isOpen) {
          menu.icon = "<i class='fa-solid fa-angle-down'></i>";
        } else {
          menu.icon = "<i class='fa-solid fa-angle-right'></i>";
        }
      }
    },
    // 하위메뉴 클릭 시 메뉴 닫힘 방지
    stopToggleSubMenuClick(event) {
      event.stopPropagation();
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {
    console.log("Header mounted");
  },
};
</script>

<style scoped>
.main-menu {
  height: 100%;
  grid-area: nav;
  background-color: #101924;
  overflow-y: auto;
}

.main-menu::-webkit-scrollbar {
  width: 10px;
}

.main-menu::-webkit-scrollbar-thumb {
  background-color: #2f3542;
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}

.main-menu::-webkit-scrollbar-track {
  background-color: grey;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px white;
}

.logo-wrap h1 a {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  padding: 30px 15px;
}

.main-menu>ul {
  padding: 30px 0;
}

.main-menu>ul>li>a,
.sub-menu>li>a {
  display: block;
  color: #fff;
  padding: 10px 15px;
}

.main-menu>ul>li>a {
  font-size: 1.6rem;
  display: flex;
  justify-content: space-between;
}

.sub-menu {
  background-color: #203248;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.sub-menu>li>a {
  font-size: 1.3rem;
  padding: 10px 30px;
}
</style>
