<template>
  <body>      
      <div v-bind:class="{'wrap main_wrap': (isAuthChk), 'wrap login-wrap': (!isLogin && !isAuthChk), 'wrap bg-wrap': (isLogin && !isAuthChk), 'error-wrap': (isErrPage) }" >        
        <hub-web-header v-if="isAuthChk == true && !isErrPage"></hub-web-header>
        <nav-bar v-if="isAuthChk == true && !isErrPage"></nav-bar>
        <router-view :key="$route.fullPath"></router-view>
        <hub-web-footer v-if="isAuthChk == false && !isErrPage"></hub-web-footer>
      </div>
      <!-- <div v-else class="error-wrap">
        <router-view :key="$route.fullPath"></router-view>
      </div>               -->
      <div class="loadingDimmed" style="display: none"></div>
      <div class="sp-3balls" style="display: none"></div>
  </body>
  
    
  
</template>

<script>
import NavBar from "../components/NavBar.vue";
import vuejsDatepicker from "../components/vuejs-datepicker";
import HubWebHeader from "../components/HubWebHeader.vue";
import HubWebFooter from "../components/HubWebFooter.vue";

import "../common/ko.js";

import "../assets/css/layout.css";
import "../assets/css/contents.css";
import "../assets/css/common.css";
import "../assets/css/style.css";
import "../assets/css/error.css";
import { mapGetters } from 'vuex';

export default {
  name: "hubwebLayout",
  components: {   
    NavBar,
    HubWebHeader,
    HubWebFooter,
  },  
  data(){
    return{
      isLogin: false,
      isErrPage: false,
      isAuthChk: false,
    }
  },
  created() {
   // this.getLogin;
   // this.getAuthChk;   
  },
  mounted() {
    this.isLogin = this.$store.getters["login/isLogin"]
    this.isAuthChk = this.$store.getters["login/isAuthChk"]
    this.isErrPage = this.$store.getters["login/isErrorPage"]    
  }
  ,computed: {
    ...mapGetters({
      getLogin: 'login/isLogin',
      getErrorPage: 'login/isErrorPage',
      getAuthChk: 'login/isAuthChk',
    }),
  },
  watch: {
    getLogin(data) {
      if (data != null && data != '' && data == true) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    },
    getErrorPage(data) {
      if (data != null && data != '' && data == true) {
        this.isErrPage = true;
      } else {
        this.isErrPage = false;
      }
    },
    getAuthChk(data) {
      if (data != null && data != '' && data == true) {
        this.isAuthChk = true;
      } else {
        this.isAuthChk = false;
      }
    },   
  }
};
</script>
