<template>
   <div :class="{'app-wrap': true,'page': isSimplePage}">
      <Header :selectedLabel="selectedLabel" :selectedIcon="selectedIcon"  v-if="!isSimplePage"/>
      <Nav @menu-selected="onMenuSelected"   v-if="!isSimplePage"/>
      <main class="main-wrap">
         <router-view/>
      </main>
   </div>
    <GlobalModal ref="modal" />
</template>

<script>
import Header from '../layout/Header.vue';
import Nav from '../layout/Nav.vue';
import GlobalModal from '../component/alert/Alert.vue';


const App = {
   provide() {
      const self = this; // ✅ this 바인딩 안전하게 확보
      return {
         $alert: (...args) => self.$alert(...args),
         $confirm: (...args) => self.$confirm(...args)
      }
   },
   data: () => {
      return {
         selectedLabel: 'Home',
         selectedIcon: require('../../resources/img/content/ico_home_w.svg')
      }
   },
   methods: {
      onMenuSelected(menu) {
         this.selectedLabel = menu.label;
         this.selectedIcon = menu.icon;
      },
      $alert(payload) {
         return this.$refs.modal.showAlert(payload);
      },
      $confirm(payload) {
         return this.$refs.modal.showConfirm(payload);
      },
   },
   watch: {},
   computed: {
      isSimplePage() {
         const path = this.$route.path;
         return (
         path === '/login.page' ||
         path === '/find.page' ||
         path === '/join.page'
         );
      }
   },
   components: {
      'Header': Header,
      'Nav' : Nav,
      'GlobalModal':GlobalModal
   },
   mounted: () => {}
}

export default App;
</script>

