<template>
  <header>
    <Header/>
    <Navbar/>
  </header>
  <main>
    <Loading v-if="loadingStore.isLoading" />
    <router-view>
    </router-view>
  </main>
</template>

<script>
import LoginStore from '@/stores/login.js';
import LoadingStore from '@/stores/loading.js';
import Header from "@/components/Header.vue";
import Navbar from "@/components/Navbar.vue";
import Loading from '@/components/Loading.vue';

export default {
  name: 'MainContainer',
  setup() {
    const loginStore = LoginStore();
    const loadingStore = LoadingStore();
    const { checkLogin } = loginStore;

    return {
      checkLogin,
      loadingStore,
    }
  },
  components: {
    Header,
    Navbar,
    Loading,
  },
  created() {
    /**
     * Save token in Headers.
     */
    const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    /**
     * check login for 'my-account' api
     */
    this.checkLogin();
  },
};
</script>
