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

<template>
    <div class="equip-dialog" v-if="equip">
        <div class="coins">
            {{ t('coins.0') }}:{{ userCoins }}
        </div>
        <Tooltip :infos="[ft('desc.1'), ft('desc.2'), ft('desc.3'), ft('desc.4')]" width="8rem">
            <div class="descript">- {{ ft('desc.0') }} -</div>
        </Tooltip>
        <Equip :equip="equip" />
        <EquipSelect v-model="material" :equips="materials" />
        <div class='btn-div'>
            <button class="button" @click="confirm.open(0, $event)" :disabled="!material">
                {{ ft('need') }}{{ needCoins }} {{ ft('title') }}
            </button>
        </div>
    </div>
    <Confirm ref="confirm" width="8rem" :tip="ft('confirm.0')" :confirm="ft('confirm.1')" :cancel="ft('confirm.2')"
        @confirm="confirmFusion" />
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, computed, watch } from "vue";
import { useI18n } from "vue3-i18n";
import { createt } from "@/config/i18n";
import { Tooltip, Confirm } from "@/components";
import Equip from "./equip.vue";
import EquipSelect from "./equip-select.vue";
import * as config from "@/config";


const { t } = useI18n();
const ft = createt('fusion.');
const { state, commit, dispatch } = useStore();
const userCoins = computed(() => {
    return state.playerAttribute.coins;
})
const material = ref();
const materials = ref<any>([])
const confirm = ref();
const rase = computed(() => {
    if (!prop.equip || !material.value) {
        return false;
    }
    const f1 = prop.equip.fusion;
    const f2 = material.value.fusion;
    const e1 = prop.equip.fusionEntry;
    const e2 = material.value.fusionEntry;
    if (f1 == 0 || !e1) {
        return true;
    }
    if (f2 == 0 || !e2) {
        return false;
    }
    return f1 == f2 && e1.type == e2.type;
});

const level = computed(() => {
    let fusion = prop.equip.fusion;
    return rase.value ? fusion + 1 : fusion;
})
const needCoins = computed(() => {
    let factor = level.value - 1;
    factor < 0 && (factor = 0);
    return 100000000 * (5 ** factor);
})

const prop = defineProps({
    equip: {
        type: Object,
        default: null
    }
});

const setMaterils = () => {
    if (level.value >= 3) {
        materials.value = [];
        return;
    }
    materials.value = state.grid.filter(equip => {
        if (!equip) return false;
        if (equip.base.name != prop.equip.base.name) return false;
        if (equip == prop.equip) return false;
        if (prop.equip.fusion > 1 && (equip.fusion <= 1 || equip.fusionEntry.type != prop.equip.fusionEntry.type)) return false;
        return true;
    });
}

watch(() => prop.equip, (n) => {
    if (n) {
        setMaterils();
        material.value = null;
    }
})

const confirmFusion = () => {
    if (userCoins.value < needCoins.value) {
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return
    }
    const equip = prop.equip;
    const creator = config[equip.type + 'ExtraEntry'];
    const fusion = level.value;
    const extraQuality = config.extra_quality[fusion - 2];
    let lv = 100;
    extraQuality && (lv += config.extra_quality_lv);
    const type = fusion > 1 && rase.value ? equip.fusionEntry.type : null;
    const entry = creator(config.qualitys[5], lv, extraQuality, type);
    commit("add_player_coins", -1 * needCoins.value);
    for (let i = 0; i < state.grid.length; i++) {
        const tmp = state.grid[i];
        if (tmp == material.value) {
            state.grid[i] = null;
        }
    }
    material.value = null;
    equip.fusion = fusion;
    equip.fusionEntry = entry;
    dispatch('saveGame');
    setMaterils();
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.btn-div {
    width: 100%;
    padding: 1rem;
}
</style>