<template>
  <nav class="main-menu">
    <div class="menu-head">
      <div><i class="fa-solid fa-bars"></i></div>
      <h1 class="logo"><router-link to="/">웰라인</router-link></h1>
    </div>
    <ul class="menu-body">
      <li class="menu-title">Dashboard</li>
      <li><router-link to="/"><i class="fa-solid fa-layer-group"></i>Dashboard</router-link></li>
      <li class="menu-title">DR자원관리</li>
      <li><router-link to="/management.page"><i class="fa-solid fa-folder-open"></i>수요반응자원 관리</router-link></li>
      <li><router-link to="/contract.page"><i class="fa-solid fa-copy"></i>참여고객 관리</router-link></li>
      <li @click="toggleSubMenu('rrmse')">
        <a class="flex"><span class="flex"><i class="fa-solid fa-flag"></i>RRMSE(제안용)</span><span><i
              :class="{ 'fa-solid fa-chevron-up': !isRRMSESubMenuOpen, 'fa-solid fa-chevron-down': isRRMSESubMenuOpen }"></i></span>
        </a>
        <ul class="sub-menu" :style="{ 'max-height': isRRMSESubMenuOpen ? '200px' : '0' }">
          <li @click="stopToggleSubMenuClick"><router-link to="/rrmsePropose.page">산출의뢰</router-link></li>
          <li @click="stopToggleSubMenuClick"><router-link to="/rrmseCalculationLog.page">산출이력</router-link></li>
        </ul>
      </li>
      <li class="menu-title">DR이벤트관리</li>
      <li><router-link to="/reduceState.page"><i class="fa-solid fa-chart-simple"></i>감축현황</router-link></li>
      <li><router-link to="/reduceReport.page"><i class="fa-solid fa-print"></i>감축결과보고서</router-link></li>
      <li class="menu-title">전력사용현황</li>
      <li @click="toggleSubMenu('translate')">
        <a class="flex"><span><i class="fa-solid fa-clock-rotate-left"></i>데이터송수신현황</span><span><i
              :class="{ 'fa-solid fa-chevron-up': !isTranslateSubMenuOpen, 'fa-solid fa-chevron-down': isTranslateSubMenuOpen }"></i></span></a>
        <ul class="sub-menu" :style="{ 'max-height': isTranslateSubMenuOpen ? '200px' : '0' }">
          <li @click="stopToggleSubMenuClick"><router-link to="/translateDay.page">일별</router-link></li>
          <li @click="stopToggleSubMenuClick"><router-link to="/translateContract.page">참여고객별</router-link></li>
          <li @click="stopToggleSubMenuClick"><router-link to="/dataStatus.page">데이터수집현황</router-link></li>
        </ul>
      </li>
      <li><router-link to="/analysis.page"><i class="fa-solid fa-chart-line"></i>전력사용량/CBL 통계</router-link></li>
      <li><router-link to="/cblAnalysis.page"><i class="fa-solid fa-code-fork"></i>CBL분석</router-link></li>
      <li><router-link to="/device.page"><i class="fa-solid fa-location-crosshairs"></i>5분검침기 현황</router-link></li>
      <li class="menu-title">수요사업자관리</li>
      <li @click="toggleSubMenu('sms')">
        <a class="flex"><span><i class="fa-solid fa-comment"></i>SMS 발송관리</span><span><i
              :class="{ 'fa-solid fa-chevron-up': !isSMSSubMenuOpen, 'fa-solid fa-chevron-down': isSMSSubMenuOpen }"></i></span></a>
        <ul class="sub-menu" :style="{ 'max-height': isSMSSubMenuOpen ? '200px' : '0' }">
          <li @click="stopToggleSubMenuClick"><router-link to="/smsAutoSend.page">자동발송설정</router-link></li>
          <li @click="stopToggleSubMenuClick"><router-link to="/smsManualSend.page">수동발송</router-link></li>
          <li @click="stopToggleSubMenuClick"><router-link to="/smsLog.page">발송이력</router-link></li>
        </ul>
      </li>
      <li @click="toggleSubMenu('email')">
        <a class="flex"><span><i class="fa-solid fa-envelope"></i>E-mail발송관리</span><span><i
              :class="{ 'fa-solid fa-chevron-up': !isEmailSubMenuOpen, 'fa-solid fa-chevron-down': isEmailSubMenuOpen }"></i></span></a>
        <ul class="sub-menu" :style="{ 'max-height': isEmailSubMenuOpen ? '200px' : '0' }">
          <li @click="stopToggleSubMenuClick"><router-link to="/emailAutoSend.page">자동발송설정</router-link></li>
          <li @click="stopToggleSubMenuClick"><router-link to="/emailLog.page">발송이력</router-link></li>
        </ul>
      </li>
      <li class="menu-title">시스템관리</li>
      <li><router-link to="/system.page"><i class="fa-solid fa-user"></i>회원관리</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isRRMSESubMenuOpen: false,
      isTranslateSubMenuOpen: false,
      isEmailSubMenuOpen: false,
      isSMSSubMenuOpen: false,
    };
  },
  methods: {
    toggleSubMenu(menu) {
      if (menu === 'rrmse') {
        this.isRRMSESubMenuOpen = !this.isRRMSESubMenuOpen;
      } else if (menu === 'translate') {
        this.isTranslateSubMenuOpen = !this.isTranslateSubMenuOpen;
      } else if (menu === 'email') {
        this.isEmailSubMenuOpen = !this.isEmailSubMenuOpen;
      } else if (menu === 'sms') {
        this.isSMSSubMenuOpen = !this.isSMSSubMenuOpen;
      }
    },

    // 하위메뉴 클릭 시 메뉴 닫힘 방지
    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;
}

.menu-head {
  width: 100%;
  padding: 15px 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.menu-head i {
  font-size: 1.2rem;
  color: #fff;
  margin-right: 20px;
}

.menu-head .logo {
  font-size: 2rem;
  font-weight: 800;
}

.menu-head .logo a {
  color: #fff;
}

.menu-body li.menu-title {
  color: #6e82a5;
  font-size: 1.3rem;
  padding: 10px 15px;
}

.menu-body li a {
  display: block;
  padding: 10px 15px;
  color: #eee;
  font-family: Nunito, sans-serif;
  font-size: 1.3rem;
}

.menu-body li a.router-link-active {
  background-color: #F5F6FA;
  color: #333;
  border-radius: 50px 0 0 50px;
}

.menu-body li a.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-body {
  padding: 30px 0;
}

.menu-body .fa-solid {
  width: 20px;
  font-size: 1.3rem;
}

.sub-menu {
  background-color: #1d2c3f;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sub-menu li a {
  display: block;
  padding: 10px 35px;
}

.menu-body .fa-solid.fa-chevron-up,
.menu-body .fa-solid.fa-chevron-down {
  font-size: 1.2rem;
  display: inline-block;
  text-align: right;
}
</style>
