<template>
  <nav>
    <ul v-if="menuList.length > 0" class="main_menu">
      <li v-for="child in menuList" :key="child.menuNo" :class="child.classNm">
        <div class="menu_btn"></div>
        <a href="javascript:void(0);" class="menu_target" @click="actionMenu" :data-menu-no="child.menuNo">{{
          child.menuNm
        }}</a>
        <div class="sub_menu_wrap">
          <ul class="sub_menu" v-if="child.children.length > 0">
            <li v-for="child2 in child.children" :key="child2.menuNo">
              <router-link :to="`${child2.menuUrl}`">{{ child2.menuNm }}</router-link>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</template>
<script>
//import "../assets/js/script.js";
import api from '@/service/api.js';
import tokenSvc from '@/common/token-service';
import { mapGetters } from 'vuex';

export default {
  name: 'Nav',
  props: {},
  data() {
    return {
      isLogin: false,
      isAuthChk: false,
      isErrPage: false,
      navActive: false,
      menuList: [],
      tempList: [],
      nowPath: '',
    };
  },
  created() {
    this.isLogin = !!tokenSvc.getToken();
    let curPage = location.pathname;

    if (this.isLogin && curPage != '/login') {
      this.$store.commit('login/isLogin', true);
      this.setMenuData();
    } else {
      this.$store.commit('login/isLogin', false);
      this.isLogin = false;
    }
  },
  mounted() {
    //this.menuhighlight();
  },
  computed: {
    ...mapGetters({
      getLogin: 'login/isLogin',
      getErrorPage: 'login/isErrorPage',
    }),
  },
  watch: {
    getLogin(data) {
      if (data != null && data != '' && data == true) {
        this.isLogin = true;
        this.setMenuData();
      } else {
        this.isLogin = false;
        this.menuList = null;
      }
    },
    getErrorPage(data) {
      if (data != null && data != '' && data == true) {
        this.isErrPage = true;
      } else {
        this.isErrPage = false;
      }
    },
  },
  methods: {
    setMenuData() {
      api
        .menus()
        .then((response) => {
          const rootMenu = response.data.data;
          if (rootMenu != null && rootMenu.children != null && rootMenu.children.length > 0) {
            this.tempList = rootMenu.children;

            var nowUrl = this.$route.fullPath;

            for (var i = 0; i < this.tempList.length; i++) {
              var menuNo = this.tempList[i].menuNo;
              var classNm = '';
              switch (menuNo) {
                case 1001:
                  classNm = 'customer';
                  if (nowUrl.indexOf('custMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1002:
                  classNm = 'attract';
                  if (nowUrl.indexOf('attractMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1003:
                  classNm = 'service';
                  if (nowUrl.indexOf('servMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1004:
                  classNm = 'calculate';
                  if (nowUrl.indexOf('calculate') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1005:
                  classNm = 'channel';
                  if (nowUrl.indexOf('channelMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1006:
                  classNm = 'key';
                  if (nowUrl.indexOf('sendNumMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1007:
                  classNm = 'moniter';
                  if (nowUrl.indexOf('mntrng') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1008:
                  classNm = 'risk';
                  if (nowUrl.indexOf('riskMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1009:
                  classNm = 'stats';
                  if (nowUrl.indexOf('stats') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1010:
                  classNm = 'system';
                  if (nowUrl.indexOf('sysMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                case 1011:
                  classNm = 'moniter';
                  if (nowUrl.indexOf('homeMgt') > -1) {
                    classNm += ' is-current';
                  }
                  break;
                default:
                  classNm = 'customer';
                  classNm += ' is-current';
              }

              this.tempList[i].classNm = classNm;
            }
            this.menuList = rootMenu.children;
          } else {
            window.top.location.href = '/';
            this.menuList = null;
          }
        })
        .catch((response) => {
          console.log(response);
          this.menuList = null;
        });
    },
    clickMenu(link) {
      var location = this.$route.fullPath;
      if (link != location) {
        this.$router.push({
          path: link,
        });
      }
    },
    reload() {
      var location = this.$route.fullPath;
      if (location == '/' || location == '') {
        // nothing
      } else {
        this.$router.replace('/');
        this.$nextTick(() => this.$router.replace(location));
      }
    },

    actionMenu(e) {
      const menuList = document.querySelectorAll('.main_menu .is-current');
      if (e.target.classList.contains('menu_target') || e.target.classList.contains('menu_btn')) {
        const menuListCheck = e.target.parentNode;
        if (menuListCheck.classList.contains('is-current')) {
          menuListCheck.classList.remove('is-current');

          for (const menu of menuList) {
            menu.classList.remove('is-current');
          }
        } else {
          for (const other of menuList) {
            other.classList.remove('is-current');
          }
          menuListCheck.classList.add('is-current');
        }
      }
    },
  },
};
</script>
