<template>
    <Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0">
        <PopoverMenu :items="[
            { label: t('use'), onClick: useEquip },
            { label: t('strengthen'), onClick: strengthenEquip },
            { label: t('reforge'), onClick: strengthenEquip },
            { label: state.grid[index]?.locked ? t('unlock') : t('lock'), onClick: () => state.grid[index].locked = !state.grid[index].locked },
            { label: t('sell'), onClick: () => dispatch('sell_equip', index) },
        ]" />
    </Dialog>

    <Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" top="10rem" left="2rem" padding="0">
        <Strengthen :equip="state.grid[index]" />
    </Dialog>

</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Dialog, PopoverMenu } from "@/components"
import Strengthen from "./strengthen.vue";
import { usePopoverMenu } from "@/tool";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const showStrengthen = ref(false);
const { show, top, left, index, open, close } = usePopoverMenu();
const emit = defineEmits(['closePack'])

defineExpose({ open })

const useEquip = () => {
    dispatch("useEquip", index.value);
}
const strengthenEquip = () => {
    emit('closePack');
    close();
    showStrengthen.value = true;
}

onMounted(() => {
    document.addEventListener('click', close)
});
onBeforeUnmount(() => {
    document.removeEventListener('keydown', close)
})
</script>
<style lang="scss" scoped></style>