<template>
  <q-btn
    flat
    dense
    aria-label="lang"
    icon="public"
    color="black"
    :label="$root.varLangMap[$root.varLangSaveLocalStorage]['short_name']"
  >
    <q-popover v-model="isMenuOpen">
      <q-list highlight>
        <q-item
          @click.native="onClick(itm,event)"
          v-for="itm in langList"
          :key="itm.name"
          style="cursor:pointer;"
        >
          <q-item-side>
            <q-item-tile
              icon="check"
              v-show="$root.varLangSaveLocalStorage == itm.lang"
            />
          </q-item-side>
          <q-item-main
            :label="itm.name"
            class="w3-large"
            style="text-transform: capitalize;"
            nowrap
          ></q-item-main>
        </q-item>
      </q-list>
    </q-popover>
</template>

<script>
module.exports = {
  data () {
    return {
      "isMenuOpen": false,
    }
  },
  props: ["lang-list"],
  methods: {
    onClick (itm, evt) {
      this.$root.FnChgLang(itm.lang);
      this.isMenuOpen = false;
    }
  }
}
</script>

<style scoped>
</style>