<template>
  <v-app-bar
    :clipped-left="$vuetify.breakpoint.lgAndUp"
    app
    color="blue darken-3"
    dark
  >
    <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
    <v-toolbar-title
      class="mr-3"
    >
      <v-btn text router :to="{name:'Dashboard'}">B Ware HQ</v-btn>
    </v-toolbar-title>

      <nav>
            <v-btn text router :to="{name:'Customer'}">Customer</v-btn>
            <v-btn text router :to="{name:'Monitoring'}">Monitoring</v-btn>
            <v-btn text router :to="{name:'Analysis'}">Analysis</v-btn>
            <v-menu offset-y open-on-hover>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  text
                  v-bind="attrs"
                  v-on="on"
                >
                  Management
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, index) in managementItems"
                  :key="index"
                  @click="$router.push({name:item.to})"
                >
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
      </nav>
      
    <v-spacer></v-spacer>

    <v-menu
      :nudge-width="200"
      offset-y
      open-on-hover
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          icon
          v-bind="attrs"
          v-on="on"
        >
          <v-icon>mdi-bell</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item>
          alarm
        </v-list-item>
      </v-list>
    </v-menu>
    
    <v-menu offset-y open-on-hover>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          icon
          v-bind="attrs"
          v-on="on"
          class="mr-5"
        >
          <v-avatar color="teal">
            <span class="headline">AD</span>
          </v-avatar>
        </v-btn>
      </template>
      <v-list>
        <v-list-item @click="$router.push({name:'AccountUser'})">
          <v-list-item-title >My Account</v-list-item-title>
        </v-list-item>
        <v-list-item v-if="isLogin" @click="$store.dispatch('logout')">
          <v-list-item-title >Logout</v-list-item-title>
        </v-list-item>
        <v-list-item v-else route :to="{name:'Login'}" exact>
          <v-list-item-title >LogIn</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

  </v-app-bar>
</template>

<script>
  import {mapActions,mapState} from 'vuex'

  export default {
    name: 'DashboardCoreAppBar',
    data: () => ({
      managementItems: [
        { title: 'Notice', to: 'ManagementNotice', },
        { title: 'FAQ', to: 'ManagementFAQ', },
        //{ title: 'Contact us', to: 'DataTables', },
        { title: 'Account', to: 'ManagementAccount', },
      ],

      userItems: [
        { title: 'My Account', to: 'AccountUser', },
        { title: 'LogIn', to: 'Login', },
        { title: 'Logout', to: 'Logout', },
      ],
    }),
    computed:{
      ...mapState('loginStore',['isLoginError','isLogin','userInfo'])
    },
    methods:{
      ...mapActions('loginStore',['logout'])
    }
  }
</script>
