<template>
  <body>
      <div class="wrap" v-bind:class="{'main_wrap': (isLogin && isAuthChk), 'login-wrap': (!isLogin && !isAuthChk), 'bg-wrap': (isLogin && !isAuthChk) }" >      
        <hub-web-header v-if="isAuthChk == true"></hub-web-header>
        <nav-bar v-if="isAuthChk == true"></nav-bar>
        <router-view :key="$route.fullPath"></router-view>  
        <hub-web-footer  v-if="isAuthChk == false"></hub-web-footer>          
      </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 { mapGetters } from 'vuex';

export default {
  name: "hubwebLayout",
  components: {   
    NavBar,
    //vuejsDatepicker,
    HubWebHeader,
    HubWebFooter,    
  },
  data(){
    return{
      isLogin: false,
      isErrPage: false,
      isAuthChk: false,
    }
  },
  created() {           
   this.getLogin;
   this.getAuthChk;
  },
  mounted() {
      
  }
  ,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>