<template>
    <div class="equip-menu">
        <li v-for="item in items" @click="item.onClick">{{ item.label }}</li>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
class PopoverMenuItem {
  label: string;
  onClick: Function;
  constructor(label: string, onClick: Function) {
    this.label = label;
    this.onClick = onClick;
  }
}

const { t } = useI18n();
const { state, commit, dispatch } = useStore();

const prop = defineProps({
    items: {
        type: Array as () => PopoverMenuItem[],
        default: []
    }
})

onMounted(() => { });
</script>
<style lang="scss" scoped>
.equip-menu {
    margin: 0;
    background: #000;
    border: 1px solid #fff;
    // z-index: 3000;
    // position: absolute;
    list-style-type: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {
        margin: 0;
        padding: 9px 16px;
        cursor: pointer;
        border-top: 1px solid #ccc;
        margin-top: -1px;
        font-size: 14px;
        letter-spacing: 6px;

        &:hover {
            color: #ccc;
        }
    }
}
</style>