<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-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");

          }
        }

      ]

    }),
    computed: {

      toolbarColor() {

        return this.$vuetify.options.extra.mainNav;
      }
    },

    mounted() {
      this.getUserData();
    },

    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);
            // }

          });

      }

    }

  };
  </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>