<template>
  <div v-if="isAdminPage" v-cloak class="admin-wrap">
    <AdminHeader />
    <AdminMenu />
    <main class="main-wrap">
        <div :class="{'content-wrap': true, 'main': this.$route.path === '/adm/main.page'}">
          <router-view />
        </div>
    </main>
  </div>
  <div v-else v-cloak class="user-wrap relative">
    <UserHeader v-if="path != '/login.page'"/>
    <main class="main-wrap">
      <Breadcrumb v-if="$route.path !== '/adm/main.page' && $route.path !== '/main.page'" />
      <router-view />
    </main>
  </div>
</template>

<script>
import UserHeader from "../layout/UserHeader.vue";
import AdminHeader from "../layout/AdminHeader.vue";
import AdminMenu from "../layout/AdminMenu.vue";
import Breadcrumb from "../component/Breadcrumb/Breadcrumb.vue";
const App = {
  data: () => {
    return {
      otherWindow: false,
      path: "",
    };
  },
  created() { 
    const loginMode = localStorage.getItem("loginMode");
  if (loginMode) {
    this.$store.commit("setLoginMode", loginMode);
  }},
  methods: {},
  watch: {
    $route(to, from) {
      this.path = to.path;
    },
  },
  computed: {
    isAdminPage() {
      // 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
      return this.$route && this.$route.path.startsWith("/adm");
    },
  },
  components: {
    'UserHeader': UserHeader,
    'AdminHeader': AdminHeader,
    'AdminMenu': AdminMenu,
    'Breadcrumb' : Breadcrumb,
  },
  mounted() {},
};

export default App;
</script>

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