<template>
  <q-layout view="lHh Lpr lFf">
    <q-header bordered class="header-style" elevated>
      <q-toolbar class="row justify-between">
        <div>
          <q-btn
            flat
            dense
            round
            icon="menu"
            aria-label="Menu"
            @click="leftDrawerOpen = !leftDrawerOpen"
          />
          <q-btn icon="home" @click="navigateToHome" flat />
        </div>

        <div class="menu-user row items-center">
          <q-fab square class="btn" icon="person" :label="adminName" direction="down" flat
                 no-caps>
            <q-fab-action class="btn-logout" @click="logout" text-color="white">
              Sair
            </q-fab-action>
          </q-fab>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
    >
      <q-list class="side-menu column justify-between">
        <div>
          <q-item-label
            header
            class="text-grey-8"
          >
            <div class="menu-logo row justify-center">
              <q-img class="image-logo" src="../assets/logo/primaryLogo.png" />
            </div>
          </q-item-label>
          <Menu></Menu>
          <q-item-label
            class="self-end"
          >
          </q-item-label>
        </div>
        <div class="menu-logo-ifes row justify-center">
          <q-img class="image-logo" src="../assets/ifes-logo.png" />
        </div>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer class="footer-style row justify-center items-center">
      Desenvolvido por Herik S.Lorenção
    </q-footer>
  </q-layout>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Menu from "components/menu/Menu.vue";
import AdminService from "src/services/AdminService";

@Component({
  components: { Menu },
})
export default class MainLayout extends Vue {
  leftDrawerOpen = false;
  adminName = '';

  navigateToHome() {
    if (this.$route.path !== '/') {
      this.$router.push('/');
    }
  }

  logout() {
    this.$store.commit('login/defineUserId', null);
    this.$router.push('/login');
  }

  async mounted() {
    const adminService = new AdminService();
    const userId = this.$store.getters['login/getIdUsuario'];

    const admin = await adminService.find(userId);

    if (admin && admin.name) {
      this.adminName = admin.name;
    }
  }
}
</script>
