<template>
    <Teleport to="body">
        <ul class="right-menu">
            <li class="item" @click="changeScene(homeLink)">
                <img :src="homeICON" />
                <span class="cap">{{ homeLink.zhName }}</span>
                <span class="sub">{{ homeLink.enName }}</span>

            </li>
            <li class="item" @click="toggleMenu">
                <img :src="selectionICON" />
                <span class="cap">場景選擇</span>
                <span class="sub">Scene selection</span>
            </li>
            <li class="item">
                <a :href="official.url">
                    <img :src="officialICON" />
                    <span class="cap">{{ official.zhName }}</span>
                    <span class="sub">{{ official.enName }}</span>
                </a>
            </li>
        </ul>
    </Teleport>


</template>
<script setup>
import { Teleport, onMounted, inject, computed } from 'vue';
import homeICON from '../assets/home.png'
import selectionICON from '../assets/scene_selection_n.png'
import officialICON from '../assets/official_website.png'
const data = inject('data');

const emits = defineEmits(['toggleMenu', 'changeScene'])
const homeLink = computed(() => Array.from(data.value).find(item => item.id === 'home'));
const official = computed(() => Array.from(data.value).find(item => item.id === 'official_website'));

const toggleMenu = () => {
    emits('toggleMenu')
}
const changeScene = (item) => {
    emits('changeScene', item, true)
}
</script>
<style lang="scss" scoped>
.right-menu {
    right: 20px;
    transform: translateY(-50%);
    position: fixed;
    top: 55%;
    display: flex;
    width: 75px;
    flex-direction: column;
    text-decoration: none;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 100000;

    .item {
        width: 80px;
        height: 80px;
        text-decoration: none;
        background-image: url('/src/assets/icon_bg.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 115% 115%;
        color: white;
        margin: 10px 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0.9;

        a {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
        }

        img {
            width: 24px;
            margin-top: -4px;
        }

        span.cap {
            font-size: 14px;
        }

        span.sub {
            font-size: 9px;
            line-height: 0.8;
            text-align: center;
        }
    }
}

.isMo {
    .right-menu {
        top: 48%;

        .item {
            span.cap {
                font-size: 13px;
            }
        }

    }
}
</style>
