<template>
  <q-btn
    flat
    dense
    round
    aria-label="more"
    icon="more_vert"
    color="black"
  >
    <q-popover
      v-model="isMenuOpen"
      style="width:180px;"
    >
      <q-list highlight>
        <q-item
          @click.native="onClick(itm,event)"
          v-for="itm in menuData"
          v-show="itm.visible"
          :key="itm.name"
          style="cursor:pointer;"
        >
          <q-item-side>
            <q-item-tile :icon="itm.icon" />
          </q-item-side>
          <q-item-main
            :label="$t(itm.name)"
            class="w3-large"
            style="text-transform: capitalize;"
            nowrap
          ></q-item-main>
        </q-item>
      </q-list>
    </q-popover>
  </q-btn>
</template>

<script>
module.exports = {
  data () {
    return {
      "isMenuOpen": false,
    }
  },
  computed: {
    menuData () {
      return [
        {
          "name": "layout.right_menu", "icon": "menu_open", "visible": this.$root.VarIsRightMenu, "fn": () => {
            this.$root.VarIsRightMenuOpen = !this.$root.VarIsRightMenuOpen;
          }
        },
        {
          "name": "page.login.logout", "icon": "logout", "visible": true, "fn": () => {
            this.$root.FnLogout();
          }
        },
        {
          "name": "sys.version", "icon": "notes", "visible": true, "fn": async () => {
            await this.$root.FnNotify(this.$t("sys.version") + ": " + this.$root.Version, "info");
          }
        },
      ];
    }
  },
  methods: {
    onClick (itm, evt) {
      itm.fn();
      this.isMenuOpen = false;
    }
  }
}
</script>

<style scoped>
</style>