<!--
  Program: Side menu
  Author: SDL
  Brief: side menu common layout
-->
<template>
  <nav class="bg-light ui--lnb-container">
    <a
      v-show="rootMenu.menuId"
      class="ui--lnb-collapsed-icon"
      href="javascript:"
      @click="isFoldMenu = !isFoldMenu"
      data-trigger-resize=""
      data-toggle-state="ui---lnb-collapsed"
    >
      <i class="bi fs-4" :class="isFoldMenu ? 'bi-chevron-right' : 'bi-chevron-left'"></i>
    </a>
    <div class="ui--lnb-inner">
      <div class="ui--nav-heading">{{ getLabel(rootMenu) }}</div>
      <nav class="ui--sidebar">
        <!-- Level2 -->
        <ul class="ui--sidebar-nav">
          <li v-for="menu in groupMenus" :key="menu.menuId" :class="{ active: selGroupId === menu.menuId }">
            <strong>
              <a href="javascript:" v-if="menu.externalUrlUsed === true" @click="openExternalUrl(menu.externalUrl)">
                <span>{{ getLabel(menu) }} <i class="bi bi-arrow-up-right"></i></span>
              </a>
              <a href="javascript:" v-else-if="menu.defaultPage" @click="moveMenu(menu.defaultPage.pagePath)">
                <span>{{ getLabel(menu) }} <i class="bi bi-chevron-right"></i></span>
              </a>
              <a href="javascript:" v-else @click="groupSelect(menu)">
                <span>{{ getLabel(menu) }}</span>
              </a>
              <button class="btn ui--btn-sidebar" @click="groupSelect(menu)">
                <i class="bi" :class="{ 'bi-chevron-up': selGroupId === menu.menuId, 'bi-chevron-down': selGroupId !== menu.menuId }"></i>
              </button>
            </strong>
            <!-- Level3 -->
            <ul class="colapse ui--sidebar-nav ui--sidebar-subnav" :class="{ show: selGroupId === menu.menuId }">
              <li
                v-for="subMenu in getSubMenus(menu.menuId)"
                :key="subMenu.menuId"
                :class="{ active: selMenuId === subMenu.menuId }"
                @click="
                  subMenu.externalUrlUsed === true ? openExternalUrl(subMenu.externalUrl) : moveMenu(subMenu.menuUrl)
                "
              >
                <a href="javascript:">
                  {{ getLabel(subMenu) }}
                  <i v-if="subMenu.externalUrlUsed === true" class="bi bi-arrow-up-right"></i></a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </nav>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import store from '@/vuex/store';
import SDLLocale from '@/mixin/SDLLocale';

export default {
  name: 'SideMenu',
  mixins: [SDLLocale],
  data() {
    return {
      rootMenu: {},
      groupMenus: [],
      selGroupId: '',
      selMenuId: '',
      isFoldMenu: false,
    };
  },
  computed: {
    ...mapGetters({
      menus: 'getMenus', // Receive menus with getter
    }),
  },
  watch: {
    isFoldMenu(value) {
      this.$emit('fold-event', value);
    },
    $route() {
      this.selMenuId = this.$route.meta.menuId;
      this.init();
    },
  },
  methods: {
    init() {
      const curMenu = this.getCurrentMenu();
      if (curMenu) {
        let list = [curMenu];
        for (let i = curMenu.menuLevel - 1; i > 0; i -= 1) {
          const parentMenu = this.getParentMenu(list[0].parentId);
          if (parentMenu) {
            list = [parentMenu, ...list];
          }
        }
        this.rootMenu = this.menus.find(menu => menu.menuLevel === 1 && menu.menuId === list[0].menuId);
        this.groupMenus = this.menus.filter(menu => menu.menuLevel === 2 && menu.parentId === this.rootMenu.menuId);
        // 순서 정렬
        this.groupMenus = _.sortBy(this.groupMenus, ['menuSequence']);
        this.selGroupId = list[1] ? list[1].menuId || '' : '';
        this.selMenuId = _.last(list).menuId;
      } else {
        this.rootMenu = {};
      }
    },
    moveMenu(pagePath) {
      // 메뉴에서 강제로 이동시에는 저장된 파라미터 초기화
      // Initialize saved parameters when forced to move from the menu
      // Initialize stored parameters when forced to move from menu
      store.commit('PARAMS', {});
      this.$router.push({ path: pagePath });
    },
    getCurrentMenu() {
      const { menuId } = this.$route.meta;
      return this.menus.find(item => item.menuId === menuId);
    },
    getParentMenu(parentId) {
      return this.menus.find(item => item.menuId === parentId);
    },
    getSubMenus(parentId) {
      return _.sortBy(this.menus.filter(menu => menu.parentId === parentId), ['menuSequence']);
    },
    groupSelect(menu) {
      if (_.find(this.menus, ['parentId', menu.menuId])) {
        this.selGroupId = this.selGroupId === menu.menuId ? '' : menu.menuId;
      } else {
        this.$router.push({ path: menu.menuUrl });
      }
    },
    openExternalUrl(url) {
      window.open(url.startsWith('http') ? url : `http://${url}`, '_blank');
    },
  },
  created() {
    this.init();
  },
};
</script>
