<template>
  <div>
  <header>
    <h1 class="logo"><a href="javascript:void(0)">uplus 메시지허브이지<span>BACKOFFICE</span></a></h1>
    <div class="user_wrap">
      <div class="user" @click="userInfoToggle();">
        <p>{{ this.$store.getters['login/userNm'] }}</p>
        <a href="javascript:void(0)" class="btn_user">{{ this.$store.getters['login/userId'] }}</a>
      </div>
      <div class="user_info">
<!--        <a href="javascript:void(0)" class="modify">정보수정</a>-->
        <a href="javascript:void(0)" class="logout" @click="logout();">로그아웃</a>
      </div>
    </div>
  </header>
  <logout-modal ref="logoutModal"></logout-modal>
  </div>
</template>

<script>
//import tokenSvc from '@/common/token-service';
import { mapGetters } from 'vuex';
import loginApi from '@/modules/login/service/api';
import logoutModal from "./logoutModal";
import tokenSvc from '@/common/token-service';

export default { 
  name: "hubWebHeader",  
  data() {
    return {
      menuList: null,
      isLogin: false,
      isErrPage: false,
      navActive: false,

    }
  },
  created() {
    const loggedIn = !!tokenSvc.getToken();   
    if(!loggedIn){
      window.top.location.href = '/login';        
    }
  },  
  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;
        window.top.location.href = '/';
        //this.menuList = null;
      }
    },
    getErrorPage(data) {
      if (data != null && data != '' && data == true) {
        this.isErrPage = true;
      } else {
        this.isErrPage = false;
        window.top.location.href = '/';
      }
    },
  },
  components: {
    logoutModal,
  },
  methods: {
    userInfoToggle(){
      var click = "clicked";
      var userBtn = document.querySelector('.user_wrap .user');
      if(userBtn.classList.contains(click)){
        userBtn.classList.remove(click);
      }
      else{
        userBtn.classList.add(click);
      }
    },
    logout(){
      //commonModal
      this.$refs.logoutModal.logoutModalOpen();

      // let result = confirm("로그아웃 하시겠습니까?");
      // if (result) {
      //   loginApi.logout().then(response => {
      //     if(response.data.retCode == '0000'){
      //
      //       // tokenSvc.removeToken();
      //
      //       this.$router.push({
      //         path: "/login"
      //       });
      //     }
      //   });
      // }
    }
  }
};
</script>
