vue-idle-game/src/views/backpack/equip-menu.vue

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

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

    <Dialog :title="t('equip') + t('inherited.0')" v-model="showInherited" :top="state.mobile ? '5rem' : '10rem'"
        left="2rem" padding="0" :z="11" :obscured="true">
        <Inherited :target="equip" :source="curEquip" @close="showInherited = false" />
    </Dialog>

</template>

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


const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const showStrengthen = ref(false);
const showInherited = ref(false);
const { show, top, left, index, open, close } = usePopoverMenu();
const emit = defineEmits(['closePack'])
const equip = computed(() => {
    return state.grid[index.value];
})
const curEquip = computed(() => {
    if (!equip.value) {
        return null;
    }
    return state.playerAttribute[equip.value.type];
})

defineExpose({ open })

const useEquip = () => {
    dispatch("useEquip", index.value);
    close();
}
const strengthenEquip = () => {
    emit('closePack');
    showStrengthen.value = true;
    close();
}
const lockEquip = () => {
    state.grid[index.value].locked = !state.grid[index.value].locked;
    close();
}
const sellEquip = () => {
    dispatch('sell_equip', index.value);
    close();
}
const inheritedEquip = () => {
    if (!curEquip.value) {
        commit("set_sys_info", { msg: t('cannotInherited.0'), type: "warning", });
        return;
    }
    if (curEquip.value.strengthenLv <= equip.value.strengthenLv) {
        commit("set_sys_info", { msg: t('cannotInherited.1'), type: "warning", });
        return;
    }
    emit('closePack');
    showInherited.value = true;
    close();
}

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