<template>
    <Tooltip :infos="[t('dungeon')]" width="12rem">
        <img class="menu-img" :src="menu_icons.dungeon" @click="showMenu">
    </Tooltip>

    <teleport to="#main" v-if="showMap">
        <div id="map" class="map">
            <span v-if="!state.battle.battleShow">
                <DungeonView v-for="item in dungeons" :dungeon="item" :key="item.lv" @battle="startBattle(item)" />
                <img :src="refresh_icon" class="refresh" @click="refreshDungeons"></img>
            </span>
            <BattleView :dungeon="curDungeon" v-if="state.battle.battleShow" ref="battle" />
            <img v-if="state.mobile" :src="close_icon" class="close" @click="showMenu"></img>
        </div>
    </teleport>


</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip, Dialog } from "@/components"
import { menu_icons, Dungeon, refresh_icon, close_icon } from "@/config";
import { randomDungeonDifficulty } from "@/tool";
import DungeonView from "./dungeon.vue"
import BattleView from "./battle.vue"

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const showMap = ref(false);
const dungeons = ref<Dungeon[]>()
const battle = ref();
const curDungeon = ref();

const showMenu = () => {
    showMap.value = !showMap.value;
}

const startBattle = (dungeon) => {
    state.battle.battleShow = true;
    curDungeon.value = dungeon;
    if (battle.value) {
        battle.value?.startDungeon();
    } else {
        setTimeout(() => {
            startBattle(dungeon);
        }, 50);
    }
}

const refreshDungeons = () => {
    const tmp = new Array();
    const lv = state.playerAttribute.lv;
    for (let i = lv < 6 ? 1 : lv - 5; i < lv + 6; i++) {
        const df = randomDungeonDifficulty();
        tmp.push(new Dungeon(i, df));
    }
    dungeons.value = tmp;
}

const setStype = () => {
    if (showMap.value) {
        showMap.value = false;
        setTimeout(() => {
            showMap.value = true;
        }, 100);
    }
}

const keydown = (e) => {
    if (e.keyCode == 84 && !e.ctrlKey) {
        showMenu();
    }
    if (e.keyCode == 27) {
        showMap.value = false;
    }
}

onMounted(() => {
    document.addEventListener('keydown', keydown)
    refreshDungeons();
    setStype();
    window.onresize = setStype;
});
onBeforeUnmount(() => {
    document.removeEventListener('keydown', keydown)
})

</script>
<style lang="scss" scoped>
.map {
    height: 98vh;
    width: 58.5vw;
    left: 40.5vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-image: url(@/assets/icons/map.jpg);

    * {
        color: white;
    }

    .refresh {
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        display: block;
        width: 2rem;
        height: 2rem;
        background-size: cover;
    }

    .close {
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: block;
        width: 2rem;
        height: 2rem;
        background-size: cover;
    }
}

@media only screen and (max-width: 768px) {
    .map {
        height: calc(100% - 1vh);
        width: calc(100% - 1vw);
        top: 0.5vh;
        left: 0.5vw;
    }

}
</style>