<template>
  <div>
    <Dropdown>
      <a href="javascript:void(0)">
        <i
          class="fa fa-bars"
          aria-hidden="true"
        />

        {{ labelMenu }}
        <Icon type="ios-arrow-down" />
      </a>
      <template #list>
        <DropdownMenu>
          <DropdownItem
            v-for="menu in getListMenu"
            :key="menu.key"
            @click.native="openMenu(menu)"
          >
            <img
              v-if="menu.image"
              :src="menu.image"
              style="height: 15px"
            >
            <i
              v-else
              :class="menu.icon"
              aria-hidden="true"
            />
            <span :class="['ml-5',menu.color]">{{ menu.label }}</span>
          </DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>

    <span
      v-if="isUsePopup"
      class="ml-5"
    >
      <a
        class="text-danger"
        href="#"
        @click="openNewTabCurrentUrl"
      >
        <i
          class="fa fa-external-link"
          aria-hidden="true"
        />
      </a>
    </span>
  </div>
</template>

<script>
import mixin from '@/vue/mixin/menu';

export default {
  name: 'MenuPopup',
  mixins: [mixin],
  methods: {
    openNewTabCurrentUrl() {
      this.openExternalUrl(window.location.href);
    },
  },
  computed: {
    getListMenu() {
      return this.listMenu.filter((item) => item.isShow && item.isPopup);
    },
  },
};
</script>
