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

<template>
    <div class="equip-dialog" v-if="equip">
        <Tooltip :infos="[rt('desc.1'), rt('desc.2'), rt('desc.3'), rt('desc.4')]" width="8rem">
            <div class="descript">- {{ rt('desc.0') }} -</div>
        </Tooltip>
        <div class="equip">
            <EquipIcon :equip="equip" />
            <div class='name' :class="equip.quality.quality">
                {{ t(equip.type + '.' + equip.base.name + '.0') }}
                {{ equip.strengthenLv ? '(+' + equip.strengthenLv + ')' : '' }}
            </div>
        </div>
        <div @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;" @click="reforge">
            <div class="extraEntry" v-if="!reforgeFlag || reforgeing">
                <div v-if="tempEntry" class="extraEntry-item" v-for="(v, k) in tempEntry" :key="k">
                    <button class="button">
                        <div>
                            {{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%)
                        </div>
                    </button>
                </div>
                <div v-if="!tempEntry" class="extraEntry-item" v-for="(v, k) in equip.extraEntry" :key="v.type + k">
                    <button class="button">
                        <div>
                            {{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%)
                        </div>
                    </button>
                </div>
            </div>
            <div class="reforge-tip" v-if="reforgeFlag && !reforgeing">
                <div :class="useCoins < reforgeNeed ? 'red' : ''">{{ replace(rt('action.0'), [reforgeNeed]) }}
                </div>
            </div>
        </div>
        <div class="btn-group">
            <button class="button" @click="saveOld">{{ rt('action.1') }}</button>
            <button class="button" @click="saveNew">{{ rt('action.2') }}</button>
        </div>
        <div class="btn-group" v-if='!auto'>
            <p>{{ rt('atuo.0') }}：</p>
            <select v-model="autoAttr">
                <option v-for="item in entrys" :value="item">{{ t(item + '.0') }}</option>
            </select>
            x
            <select v-model="autoNum">
                <option v-for="i in 5" :value="i">{{ i }}</option>
            </select>
            <button class="button" @click="startAuto">{{ rt('atuo.1') }}</button>
        </div>
        <div class="btn-group" v-if='auto'>
            <p>{{ rt('atuo.2') }}...</p>
            <button class="button" @click="stopAuto">{{ rt('atuo.3') }}</button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, computed, watch } from "vue";
import { Tooltip, EquipIcon } from "@/components"
import { createt } from "@/config/i18n";
import { Entry, extra_entry_num } from "@/config";
import * as config from "@/config";
import { replace } from "@/tool";
import { useI18n } from "vue3-i18n";

const { t } = useI18n();
const rt = createt('reforge.');
const { state, commit, dispatch } = useStore();
const reforgeFlag = ref(false);
const reforgeing = ref(false);
const reforgeNeed = computed(() => {
    const equip = prop.equip;
    if (!equip) {
        return 0;
    }
    return Math.round(equip.lv * equip.quality.qualityCoefficient * (200 + 10 * equip.lv) / 6);
})
const useCoins = computed(() => {
    return state.playerAttribute.coins;
})
const height = computed(() => {
    if (prop.equip) {
        return prop.equip.extraEntry.length * 2.5 + 'rem';
    }
    return '1rem';
})
const tempEntry = ref<Entry[] | null>();
const tempId = ref();

const auto = ref(false);
const autoAttr = ref('');
const autoNum = ref(3);
const entrys = computed(() => {
    if (prop.equip) {
        const key = prop.equip.type + 'ExtraEntrys';
        return config[key];
    }
    return null;
});

const prop = defineProps({
    equip: {
        type: Object,
        default: null
    }
});
watch(() => prop.equip, (n) => {
    tempEntry.value = null;
})

const reforge = () => {
    const need = Math.ceil(reforgeNeed.value * (auto.value ? 1.5 : 1));
    if (useCoins.value < need) {
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return
    }
    const equip = prop.equip;
    const quality = equip.quality.quality;
    const extraQuality = equip.quality.extraQuality;
    const extraEntryNum = extra_entry_num[quality];
    const extraEntry = new Array();
    for (let i = 0; i < extraEntryNum; i++) {
        const key = equip.type + 'ExtraEntry';
        const entry = config[key](quality, equip.lv, extraQuality);
        extraEntry.push(entry);
    }
    commit("add_player_coins", -1 * need);
    tempId.value = equip.id;
    tempEntry.value = extraEntry;
    reforgeing.value = true;
    check();
    auto.value && setTimeout(reforge, 200);
}

const saveOld = () => {
    tempEntry.value = null;
}
const saveNew = () => {
    if (!tempEntry.value) {
        return;
    }
    prop.equip.extraEntry = tempEntry.value;
    tempEntry.value = null;
}

const check = () => {
    debugger
    if (!auto.value || !tempEntry.value) return;
    let cout = 0;
    const entrys = tempEntry.value || prop.equip.extraEntry;
    entrys.forEach(entry => {
        if (entry.type == autoAttr.value) {
            cout++;
        }
    })
    auto.value = cout < autoNum.value;
}
const startAuto = () => {
    auto.value = true;
    check();
    auto.value && reforge();
}
const stopAuto = () => {
    auto.value = false;
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.extraEntry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-left: 1.2rem;
    padding-bottom: 0.6rem;
    height: v-bind('height');
    cursor: pointer;

    div {
        display: flex;
        justify-content: center;

        &>div {
            display: flex;
            justify-content: center;
        }
    }

    .button {
        border: 0;
        width: 80%;
    }
}

.reforge-tip {
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    height: v-bind('height');
    color: #68d5ed;
}

.red {
    color: red !important;
}

.btn-group {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>