<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">
            <!-- Header toolbar with Seacrh -->
            <app-toolbar class="app--toolbar" ></app-toolbar>
            <router-view :key="$route.fullPath"></router-view>
          </div>
          <!-- App Footer -->
        </v-content>
        <!-- theme setting -->
        <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
          <v-icon>settings</v-icon>
        </v-btn>
        <v-navigation-drawer
          class="setting-drawer"
          temporary
          right
          v-model="rightDrawer"
          hide-overlay
          fixed
          >
          <theme-settings></theme-settings>
        </v-navigation-drawer>-->
      </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";
import ThemeSettings from "@/components/ThemeSettings";
// import { FunctionalCalendar } from "vue-functional-calendar";

export default {
  components: {
    AppDrawer,
    AppToolbar,
    ThemeSettings
    // FunctionalCalendar
  },
  data: () => ({
    expanded: true,
    rightDrawer: false,
    snackbar: {
      show: false,
      text: "",
      color: ""
    }
  }),

  computed: {},

  created() {
    AppEvents.forEach(item => {
      this.$on(item.name, item.callback);
    });
    window.getApp = this;
  },
  methods: {
    openThemeSettings() {
      this.$vuetify.goTo(0);
      this.rightDrawer = !this.rightDrawer;
    }
  }
};
</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>
<style>
.application {
  background-color: white !important;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
</style>
