<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>

        <div class="mobile_close_cover" :class={isMo} @click="handleClose"></div>
    </Teleport>


</template>
<script setup>
import { Teleport, onMounted, inject, computed,ref } 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 open= ref(false);
const isMo = inject("isMo");
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 = () => {
    open.value =!open.value
    emits('toggleMenu',open.value)
}
const changeScene = (item) => {
    emits('changeScene', item)
}
const handleClose=()=>{
    open.value =false;
    emits('toggleMenu',false)
}
</script>
<style lang="scss" scoped>
.mobile_close_cover{
    display:none;
}
.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;


    .item {
        width: 75px;
        height: 75px;
        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;
        }
    }
}
.isMo {
    .right-menu {
        top:48%;
        .item {
            span.cap {
            font-size: 13px;
            }
        }
      
    }
    .mobile_close_cover {
        width:100%;
        height:100%;
        position:fixed;
        z-index:0;
        display:block;
    
    }
}

</style>
