<!--  -->
<template>
    <teleport to="body">
        <div class="tag-layer" @click.stop="" :class="{ mobile: isMobile }">
            <div class="tag-info" @click.stop="" id="tag-info">
                <ui-icon class="close-btn" @click.stop="close" type="close"></ui-icon>
                <div class="tag-metas" v-if="hotData.media[hotData.type].length > 0 && hotData.type != 'audio'">
                    <metasImage :viewer="true" v-if="hotData.type == 'image'" />
                    <metasWeb v-if="hotData.type == 'link'" />
                </div>
            </div>
        </div>
    </teleport>
</template>

<script setup>
import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from 'vue'
import { Dialog } from '@/global_components/'
import metasImage from './metas/metas-image'
// import metasVideo from './metas/metas-video'
// import metasAudio from './metas/metas-audio'
import metasWeb from './metas/metas-web'
import common from '@/utils/common'
import { useStore } from 'vuex'
import { getApp, useApp } from '@/app'
const isMobile = ref(false)
const metasHeight = ref(0)
onMounted(async () => {
    const app = await useApp()
    isMobile.value = app.config.mobile

    nextTick(() => {
        let Layer = document.getElementById('tag-info')
        let layerHeight = Layer.getBoundingClientRect().height
        metasHeight.value = layerHeight * 0.85
    })
})
import { useMusicPlayer } from '@/utils/sound'
const musicPlayer = useMusicPlayer()
const store = useStore()
const emit = defineEmits(['close'])
const hotData = computed(() => {
    let data = store.getters['tag/hotData']
    if ((data && data.type == 'audio') || (data && data.type == 'video')) {
        // musicPlayer.pause(true)
    }
    return store.getters['tag/hotData']
})

const audioInfo = computed(() => {
    return hotData.value.media.audio
})
const audio = ref(null)
watchEffect(() => {
    if (audio.value) {
        audio.value.play()
    }
})

const close = () => {
    emit('close')
}
onMounted(() => {})
</script>
<style lang="scss">
.tag-layer {
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    top: 0;
    position: fixed;
    left: 0;
    // padding: calc(var(--editor-head-height) + 20px) calc(var(--editor-toolbox-width) + 20px) 60px calc(var(--editor-menu-width) + 20px);
    background-color: rgba(0, 0, 0, 0.7);

    .tag-info {
        color: #fff;
        width: 100%;
        height: 85%;
        position: absolute;
        top: 7.5%;
        left: 0;
        .close-btn {
            position: fixed;
            right: 36px;
            top: 36px;
            font-size: 18px;
            cursor: pointer;
            z-index: 100;
        }
        .tag-metas {
            width: 100%;
            height: 100%;
            position: relative;

            .pic-box {
                width: 100%;
                height: 100%;
                border: none;

                .image-list {
                    .image-item {
                        background-size: contain;
                    }
                }
            }
            .video-box {
                height: auto;
                border: none;
                video {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                }
            }
            .web-box {
                // height: 500px;
                width: 91%;
                height: 100%;
                border: none;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
[is-mobile] {
    .tag-layer {
        .tag-info {
            // padding: 20px;
            .close-btn {
                position: absolute;
                right: 20px;
                top: -30px;
                font-size: 18px;
                cursor: pointer;
            }
        }
    }
}
</style>
