<template>
  <v-toolbar class="fixcolors" fixed app>
    <v-toolbar-title class="ml-0">
      <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide white--text"></v-toolbar-side-icon>
    </v-toolbar-title>

    <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
    <v-flex
      xs7
      sm3
      class="userSearch"
      v-if="$route.name != 'Dashboard' && $route.name != 'changepassword'"
    >
      <v-text-field
        flat
        append-icon="search"
        label="Seacrh"
        class="pl-3"
        color="white"
        @input.native="emitSearch"
        type="text"
        dark
      ></v-text-field>
    </v-flex>
    <v-spacer></v-spacer>
    <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
      <v-btn icon large flat slot="activator">
        <v-avatar >
          <!-- <img src="/static/icon/user.png" /> -->
          <v-icon dark  size="40px">account_circle</v-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 Util from "@/util";
export default {
  name: "app-toolbar",
  data: () => ({
    userName: "",
    search: "",
    items: [
      {
        icon: "account_circle",
        href: "/changepassword",
        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");
        }
      }
    ]
  }),
  computed: {
    toolbarColor() {
      return this.$vuetify.options.extra.mainNav;
    }
  },
  methods: {
    emitSearch(ev) {
      this.$root.$emit("app:search", ev.target.value);
      console.log("ev.target.value", ev.target.value);
    },
    handleDrawerToggle() {
      window.getApp.$emit("APP_DRAWER_TOGGLED");
    },
    handleFullScreen() {
      Util.toggleFullScreen();
    }
  }
};
</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>
