<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 === this.$filters.ctxPath('/adm/main.page')}" :style="{ height: menuUse === 'Y' ? 'calc(100% - 152px)' : '100%' }">
          <router-view />
        </div>
        <MenuSatisfaction v-if="!$route.path.includes('/insert.page')" @menuChecck="menuYnCheck"/> <!-- 내용 확인용 -->
    </main>
  </div> 
  <div v-else v-cloak class="user-wrap relative">
    <UserHeader v-if="path != this.$filters.ctxPath('/login.page') && path != this.$filters.ctxPath('/cmslogin.page') && !$route.path.includes('/popup.page')"/>
    <main class="main-wrap">
      <Breadcrumb v-if="$route.path !== this.$filters.ctxPath('/adm/main.page') && $route.path !== this.$filters.ctxPath('/main.page')" />
      <router-view />
      <MenuSatisfaction v-if="!$route.path.includes('/insert.page')"/>
    </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";
import MenuSatisfaction from "../layout/MenuSatisfaction.vue";
const App = {
  data: () => {
    return {
      otherWindow: false,
      path: "",
      menuUse: "N",
    };
  },
  methods: {
    // 메뉴 만족도 조사 사용 여부
    menuYnCheck(yn) {
      // console.log("menuYnCheck", yn);
      this.menuUse = yn;
    },
  },
  watch: {
    $route(to, from) {
      this.path = to.path;
      if(this.path.includes('/insert.page') || this.path.includes('/view.page')) {
        this.menuUse = "N";
      }
    },
  },
  computed: {
    isAdminPage() {
      // 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
      return this.$route && this.$route.path.startsWith(this.$filters.ctxPath("/adm"));
    },
  },
  components: {
    'UserHeader': UserHeader,
    'AdminHeader': AdminHeader,
    'AdminMenu': AdminMenu,
    'Breadcrumb' : Breadcrumb,
    'MenuSatisfaction': MenuSatisfaction,
  },
  mounted() {},
};

export default App;
</script>

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