<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 class="hidden-sm-and-down" @click.stop="togleDrawer()"></v-toolbar-side-icon>
    <h1>ONE</h1>
    <h2 class="bread-crumb">{{bread_crumb}}</h2>
    <v-spacer></v-spacer>
    <div style="margin-top:14px;margin-bottom:auto;">
    <span :class="auto_class" 
       style='display:inline-block;margin-right:15px;font-size:16px;color:#ffffff;'>
       Auto Verifikasi
    </span>
    <v-switch
        v-model="flagAutoRun"
        style="margin-right:15px;display:inline-block;"
        color="#00ff00"
    ></v-switch>
    <a href="#" style="text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{ xusername }}</a>

   </div>
    <!-- PROFILE MENU -->
    <v-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-content>
              <v-list-tile-title>{{ xusername }}</v-list-tile-title>
              <v-list-tile-sub-title>{{xstaffname}}</v-list-tile-sub-title>
            </v-list-tile-content>
            
          </v-list-tile>
        </v-list>

        <v-divider></v-divider>

        <v-list>
          <v-list-tile @click="change_password" >
             <v-list-tile-action>
                 <v-icon>security</v-icon>
             </v-list-tile-action>
             <v-list-tile-title>Change Password</v-list-tile-title>
          </v-list-tile>

        </v-list>
        <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>

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

   <one-cp></one-cp> 
  </v-toolbar>
</template>
<style scoped>
.bread-crumb {
   margin-left:20px;
   font-weight:normal!important;
}
.v-badge__badge{
  top:0px;
  right:0px;
}
</style>
<script>
module.exports = {
  components: {
    'one-menu-drawer' : httpVueLoader('./oneMenuDrawer.vue'),
    'one-cp' : httpVueLoader('./oneChangePassword.vue'),
    'one-menu-notification' : httpVueLoader('./oneNotificationDrawer.vue')
  },
  data: function() {
    return {
    drawer: false,
    drawer_notification: false	,
    flagAutoRun: false
    }
  },
  watch : {
     is_page_allowed : function(new_ipa, old_ipa) {
        if(! new_ipa ) {
           var dashboard = this.$store.state.system.dashboard
           if (dashboard == "") {
              //this.logout()
              console.log('go-to','logout')
           } else {
              //window.location.href = '/' + dashboard
              console.log('go-to dashboard',dashboard)
           }
        }
     }
  },
  computed: {
     is_page_allowed() {
        return this.$store.state.system.is_page_allowed
     },
     bread_crumb() {
        return this.$store.state.system.bread_crumb
     },
     xusername() {
          var un = ''
          if(localStorage.getItem("user")){
            var retrievedObject = localStorage.getItem('user')
            var dtuser = JSON.parse(retrievedObject)
            
            un = dtuser.M_UserUsername
          }
          return un
      },
     xstaffname() {
          var un = ''
          if(localStorage.getItem("user")){
            var retrievedObject = localStorage.getItem('user')
            var dtuser = JSON.parse(retrievedObject)
            
            un = dtuser.M_StaffName
          }
          return un
      },
    auto_label() {
       console.log('Auto', this.flagAutoRun);
       if (this.flagAutoRun) return 'Auto Verif Is Running';
       return 'Auto Verif Is Stopped';
    }
  },
  methods : {
    togleDrawer() {
      this.drawer = ! this.drawer 
    },
    change_password() {
       this.$store.commit("system/update_change_password_dialog",true)
    },
    logout () {
      window.one_logout('/one-ui/test/vuex/one-login')
    }
  }
}
</script>

