<template>
  <span>
  <one-menu-drawer :drawer="drawer" > </one-menu-drawer>	
  <one-menu-notification :drawer="drawer_notification" > </one-menu-notification>	
  <v-toolbar color="blue lighten-2" dark fixed app>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <h1>ONE</h1>
     <v-spacer></v-spacer>

    <a href="#" style="text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{ xusername }}</a>
    <v-badge color="red">
      <template v-slot:badge>
        <span>9</span>
      </template>
      <v-btn icon @click="drawer_notification = !drawer_notification" flat>
        
        <v-icon
          medium
          
        >
          notifications
        </v-icon>
      </v-btn>
    </v-badge>

    

     <!-- <v-btn class="ml-4" icon>
      <v-icon>apps</v-icon>
    </v-btn> -->

    <!-- PROFILE MENU -->
    <v-menu
      v-model="menu"
      :close-on-content-click="true"
      :nudge-width="200"
      offset-overflow
      left
      bottom
    >
      <template v-slot:activator="{ on }">
        <v-btn
          class="ml-4" icon
          v-on="on"
        >
          <v-icon>apps</v-icon>
        </v-btn>
      </template>

      <v-card>
        <v-list>
          <v-list-tile avatar>
            <v-list-tile-avatar>
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>{{ xusername }}</v-list-tile-title>
              <v-list-tile-sub-title>Founder of Vuetify.js</v-list-tile-sub-title>
            </v-list-tile-content>

            
          </v-list-tile>
        </v-list>

        <v-divider></v-divider>

        <v-list>
          <v-list-tile
            @click="logout"
          >
            <v-list-tile-action>
              <v-icon>no_meeting_room</v-icon>
            </v-list-tile-action>
            <v-list-tile-title>Log Out</v-list-tile-title>
          </v-list-tile>

          <!-- <v-list-tile>
            <v-list-tile-action>
              <v-switch v-model="hints" color="purple"></v-switch>
            </v-list-tile-action>
            <v-list-tile-title>Enable hints</v-list-tile-title>
          </v-list-tile> -->
        </v-list>

        
      </v-card>
    </v-menu>
    <!-- End of PROFILE MENU -->

  </v-toolbar>
</template>
<style scoped>
.v-badge__badge{
  top:0px;
  right:0px;
}
</style>
<script>
module.exports = {
  components: {
    'one-menu-drawer' : httpVueLoader('./oneMenuDrawer.vue'),
    'one-menu-notification' : httpVueLoader('./oneNotificationDrawer.vue')
  },
  data: function() {
	return {
    drawer: false,
    drawer_notification: false	
    }
  },
  computed: {
      xusername() {
          var un = ''
          if(localStorage.getItem("user")){
            var retrievedObject = localStorage.getItem('user')
            var dtuser = JSON.parse(retrievedObject)
            
            un = dtuser.M_UserUsername
          }
          return un
      }
  },

  methods : {
    logout () {
      window.one_logout('/one-ui/test/vuex/one-login')
    }
  }
}
</script>

