<template>
  <div v-if="isReadyLoading">
    <layout-popup
      v-if="isPopupLayout"
      id="app"
    >
      <div class="mb-5">
        <header-nav />
      </div>
      <div :style="layoutBox">
        <router-view />
      </div>
    </layout-popup>
    <layout-default v-else-if="isDefaultLayout" />
    <div v-else>
      <router-view />
    </div>
  </div>
</template>
<script>
import LayoutDefault from '@/vue/components/Layout/LayoutDefault.vue';
import LayoutPopup from '@/vue/components/Layout/LayoutPopup.vue';
import HeaderPopup from '@/vue/components/Popup/Header.vue';

export default {
  name: 'App',
  components: {
    'layout-default': LayoutDefault,
    'layout-popup': LayoutPopup,
    'header-nav': HeaderPopup,
  },
  data() {
    return {
      isReadyLoading: false,
    };
  },
  created() {
    this.$router.afterEach(() => {
      setTimeout(() => {
        this.isReadyLoading = true;
      }, 100);
    });
  },
  computed: {
    layoutName() {
      return this.$route.meta.layout || '';
    },
    isDefaultLayout() {
      return this.layoutName === 'default';
    },
    isPopupLayout() {
      return this.layoutName === 'popup';
    },
  },
};
</script>
