<template>
  <v-toolbar flat class="white pt-2" fixed app>
    <v-toolbar-title>
      <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>
    </v-toolbar-title>
    <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
    <v-flex xs12 class="white">
      <!-- <v-text-field
        flat
        append-icon="search"
        label="Seacrh"
        class="pl-3"
        color="white"
        @input.native="emitSearch"
        type="text"
        dark
      ></v-text-field>-->
      <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
    </v-flex>
    <v-spacer></v-spacer>
    <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn>
    <!-- <v-toolbar-items class="hidden-sm-and-down">
      <v-icon class="header-icon">notifications_none</v-icon>
    </v-toolbar-items>-->
    <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
      <v-btn icon large flat slot="activator">
        <v-avatar size="26">
          <img src="/static/icon/setting1.png" alt="icon" />
        </v-avatar>
      </v-btn>
      <v-list class="pa-0">
        <v-list-tile
          v-for="(item,index) in items"
          :to="!item.href ? { name: item.name } : null"
          :href="item.href"
          @click="item.click"
          ripple="ripple"
          :disabled="item.disabled"
          :target="item.target"
          rel="noopener"
          :key="index"
        >
          <v-list-tile-action v-if="item.icon">
            <v-icon class="iconSize">{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-menu>
  </v-toolbar>
</template>
<script>
import http from "@/Services/http.js";

export default {
  name: "app-toolbar",
  data: () => ({
    userName: "",
    search: "",
    userData: {},
    items: [
      {
        icon: "account_circle",
        href: "/resetPassword",
        title: "Change Password",
        click: e => {
          console.log(e);
        }
      },
      // {
      //   icon: 'settings',
      //   href: '#',
      //   title: 'Settings',
      //   click: (e) => {
      //     console.log(e);
      //   }
      // },
      {
        icon: "lock",
        href: "#",
        title: "Logout",
        click: e => {
          window.getApp.$emit("APP_LOGOUT");
        }
      }
    ],
    adminRole: "",
    SchoolRole: ""
  }),
  computed: {
    toolbarColor() {
      return this.$vuetify.options.extra.mainNav;
    }
  },
  mounted() {
    // this.getUserData();
    this.adminRole = this.$store.state.role;
    if (this.adminRole == "PARENT") {
      var obj = {};
      obj = {
        icon: "face",
        href: "/changeStudents",
        title: "Change Student",
        click: e => {
          console.log(e);
        }
      };
      this.items.push(obj);
    }
    // console.log("this.adminRole", this.adminRole);
    this.SchoolRole = this.$store.state.schoolRole;
  },
  methods: {
    // emitSearch(ev) {
    //   this.$root.$emit("app:search", ev.target.value);
    // },
    handleDrawerToggle() {
      window.getApp.$emit("APP_DRAWER_TOGGLED");
    },
    handleFullScreen() {
      Util.toggleFullScreen();
    },
    getUserData() {
      http()
        .get("/getParticularUserDetail", {
          //  headers: {
          //   Authorization: "Bearer " + this.$store.state.token
          // }
        })
        .then(response => {
          this.userData = response.data.data;
        })
        .catch(error => {
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    goToSchool() {
      console.log("click");
      if (this.$store.state.role === "ADMIN") {
        this.$store.dispatch("Role", null);
        this.$store.dispatch("setToken", null);
        this.$router.push("/schooldashboard");
        setTimeout(() => {
          location.reload();
        }, 1000);
      }
    }
  }
};
</script>
<style>
.v-icon {
  font-size: 30px;
}
.fixcolors {
  background: #444b54 !important;
}

@media screen and (min-width: 1270px) {
  .hide {
    display: none;
  }
  /* }
@media screen and (max-width: 962px) {
.imglogo{
    position: absolute;
    top: 13px;
    left: 13px !important;
    width: 70px;
    height: 24px;
} */
}
@media screen and (max-width: 420px) {
  .v-list__tile {
    font-size: 14px;
    padding: 0 10px;
  }
  .name {
    font-size: 15px;
  }
}
</style>