<template>
   <div class="app-wrap">
      <Header :selectedLabel="selectedLabel" :selectedIcon="selectedIcon" />
      <Nav @menu-selected="onMenuSelected" />
      <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 = {
   data: () => {
      return {
         selectedLabel: 'Home',
         selectedIcon: require('../../resources/img/content/ico_home_w.svg')
      }
   },
   methods: {
      onMenuSelected(menu) {
         this.selectedLabel = menu.label;
         this.selectedIcon = menu.icon;
         console.log(`Selected menu: ${  this.selectedLabe}, Icon: ${this.selectedIcon}`);
      },
      $alert(message) {
         return this.$refs.modal.showAlert(message);
      },
      $confirm(message) {
         return this.$refs.modal.showConfirm(message);
      },
      provide() {
         return {
            $alert: this.$alert,
            $confirm: this.$confirm
         };
      }
   },
   watch: {},
   computed: {},
   components: {
      'Header': Header,
      'Nav' : Nav,
      'GlobalModal':GlobalModal
   },
   mounted: () => {}
}

export default App;
</script>

