<template>
  <div v-cloak :class="layoutType === 'side' ? 'dashboard-wrap' : 'layout-wrap'">
    <Header v-if="store.state.loginUser != null" :className="layoutType" />
    <TopMenu v-if="layoutType === 'top' && store.state.loginUser != null" />
    <div :class="store.state.loginUser != null ? 'main' : 'login'">
      <PageNavigation v-if="layoutType === 'side' && store.state.loginUser != null" />
      <router-view />
    </div>
  </div>
  <AlertModal id="cmmnAlert" ref="Alert"></AlertModal>
</template>
<script>
import Header from '../layout/Header.vue';
import TopMenu from '../layout/TopMenu.vue';
import PageNavigation from '../component/PageNavigation.vue';
import AlertModal from '../component/common/AlertModal.vue';
import store from './AppStore'

const App = {
  data: () => {
    return {
      layoutType: "top",
      loginpage: false,
      store: store,
    }
  },
  components: {
    'Header': Header,
    'TopMenu': TopMenu,
    'PageNavigation': PageNavigation,
    'AlertModal': AlertModal,
  },
  mounted: function () {
    // 공통 모듈 alert
    this.$setAlertRef(this.$refs.Alert);
    this.$setDefaultObject();
  }
}

export default App;
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.main-warp {
  border: 1px solid #000;
  margin: 20px 0px;
}
</style>
