<template>
  <nav class="main-menu">
    <div class="logo-wrap">
      <h1 class="adm-logo"><router-link to="/adm/main">AI 디지털교과서<br />통합지원센터</router-link></h1>
    </div>
    <ul>
      <li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu,index)" :class="{ 'active': index === activeMenuIndex }">
        <router-link :to="menu.path">
          <p><span v-html="menu.icon"></span><span class="menu-text">{{ menu.pathName }}</span></p>
          <p v-html="menu.icon2"></p>
        </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" @click="stopToggleSubMenuClick">
            <router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { path: "/adm.page", pathName: "대시보드", icon: '<i class="fa-solid fa-house"></i>' },
        { path: "#", pathName: "커뮤니티", subMenu: [{ path: "/adm/noticeSelectList.page", pathName: "공지사항" }, { path: "/adm/newsSelectList.page", pathName: "홍보/뉴스" }], icon: '<i class="fa-regular fa-newspaper"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
        { path: "/adm/document.page", pathName: "자료실", subMenu: [{ path: "/adm/document.page", pathName: "기술문서" }, { path: "/adm/dataSelectList.page", pathName: "자료집" }], icon: '<i class="fa-regular fa-folder-open"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
        { path: "/adm/statistics.page", pathName: "통계서비스", icon: '<i class="fa-solid fa-chart-line"></i>' },
        { path: "/adm/corporatePR.page", pathName: "네트워킹", subMenu: [{ path: "/adm/corporatePR.page", pathName: "기업홍보관" }], icon: '<i class="fa-solid fa-network-wired"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
        { path: "/adm/modal.page", pathName: "팝업관리", icon: '<i class="fa-solid fa-layer-group"></i>' },
        { path: "/adm/email.page", pathName: "메일발송", icon: '<i class="fa-regular fa-envelope"></i>' },
        { path: "/adm/userSelectList.page", pathName: "사용자관리", icon: '<i class="fa-regular fa-circle-user"></i>' },
        { path: "/adm/subscription .page", pathName: "구독서비스", icon: '<i class="fa-regular fa-bell"></i>' },
      ],
      activeMenuIndex: -1,
    };
  },
  methods: {
    //토글 메뉴
    toggleMenu(menu,index) {
      if (menu.hasOwnProperty('isOpen')) {
        menu.isOpen = !menu.isOpen;
        if (menu.isOpen) {
          menu.icon2 = "<i class='fa-solid fa-angle-down'></i>";
        } else {
          menu.icon2 = "<i class='fa-solid fa-angle-right'></i>";
        }
        this.activeMenuIndex = index;
      }
    },
    // 하위메뉴 클릭 시 메뉴 닫힘 방지
    stopToggleSubMenuClick(event) {
      event.stopPropagation();
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {
    console.log("admin menu mounted");
  },
};
</script>

<style scoped>
.main-menu {
  height: 100%;
  grid-area: nav;
  background-color: #3f87f7;
  overflow-y: auto;
  box-shadow: 3px 0 10px #eee;
  z-index: 10000;
  font-family: "SBaggroM";
}

.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.adm-logo a {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  padding: 30px;
  line-height: 160%;
  font-family: "Pretendard-Regular";
}

.menu-text {
  padding: 0 10px;
}

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

.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;
  padding:15px;
}

.main-menu>ul>li.active{
  background: #fff;
  border-radius: 10px 0 0 10px;
}
.main-menu>ul>li.active >  a{
  color: #3f87f7;
}
.sub-menu {
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.sub-menu>li>a {
  font-size: 1.3rem;
  padding: 10px 50px;
  color: #aaa;
}
.sub-menu li a.router-link-active{
  color: #333;
}

</style>
