<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-v2')
    }
  }
}
</script>
