<template>
  <div id="appRoot">
    <template v-if="!$route.meta.public">
        <!-- Go to top -->
      <v-app id="inspire" class="app">
        <app-drawer class="app--drawer"></app-drawer>
        <v-content>
          <div class="page-wrapper">
            <router-view></router-view>
          </div>   
           <!-- App Footer -->
          <v-footer height="auto" class="grey darken-2 pa-3 app--footer"> 
          </v-footer>
        </v-content>
      </v-app>
    </template>
    <template v-else>
      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </template>
    <v-snackbar
      :timeout="3000"
      bottom
      right
      :color="snackbar.color"
      v-model="snackbar.show"
    >
      {{ snackbar.text }}
      <v-btn dark flat @click.native="snackbar.show = false" icon> 
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>    
  </div>
</template>
<script>
import AppDrawer from '@/components/pageHeader/AppDrawer';
import AppToolbar from '@/components/pageHeader/AppToolbar';
import menu from '@/api/menu';
import AppEvents from  './event';
export default {
  components: {
    AppDrawer,
    AppToolbar,
  },
  data: () => ({
    expanded: true,
    rightDrawer: false,
    snackbar: {
      show: false,
      text: '',
      color: '',
    }
  }),

  computed: {

  },

  created () {
    AppEvents.forEach(item => {
      this.$on(item.name, item.callback);
    });
    window.getApp = this;
  },
};
</script>


<style lang="stylus" scoped>
  .setting-fab 
    top:50%!important; 
    right:0;
    border-radius:0  
.page-wrapper
    min-height:calc(1200px - 64px - 50px - 81px ) 

</style>
