<!--  -->
<template>
    <div class="show-tag" :id="`tagBox_${hotData.sid}`">
        <div class="tag-title">
            <h2>
                {{ hotData.title }}
                <ui-audio v-if="hotData.type == 'audio' && audioInfo.length > 0" class="audio" ref="audio" :src="common.changeUrl(audioInfo[0].src)"></ui-audio>
            </h2>
        </div>
        <div class="desc" v-if="hotData.content != ''">
            <div class="text" v-html="hotData.content"></div>
        </div>
        <div class="tag-metas" @click.stop="open" :class="{ mask: hotData.type == 'link', nocursor: hotData.type == 'video' }" v-if="hotData.media[hotData.type].length > 0 && hotData.type != 'audio'">
            <metasImage v-if="hotData.type == 'image'" />
            <metasVideo v-if="hotData.type == 'video'" />
            <metasWeb v-if="hotData.type == 'link'" />
        </div>
        <div class="edit-btn" v-if="routerName && routerName == 'tag' && !editModule">
            <span @click="edit()"><ui-icon type="edit"></ui-icon> 修改</span>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, watchEffect, computed, watch, defineEmits } from 'vue'
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 { useRouter } from 'vue-router'
import { useMusicPlayer } from '@/utils/sound'
const musicPlayer = useMusicPlayer()
// const router = useRouter()
const editModule = computed(() => store.getters['editModule'])
const store = useStore()
const emit = defineEmits(['open'])
const hotData = computed(() => {
    let data = store.getters['tag/hotData']
    if (data.type == 'audio' || data.type == 'video') {
        musicPlayer.pause(true)
        // console.log('pause(true)')
    }
    return data
})

const audioInfo = computed(() => {
    return hotData.value.media.audio
})
const router = computed(() => store.getters['router'])
const routerName = computed(() => {
    let name = router.value.name || null
    return name
})
const audio = ref(null)
watchEffect(() => {
    if (audio.value) {
        audio.value.play()
    }
})
const open = () => {
    if (hotData.value.type != 'video') {
        emit('open')
    }
}
const edit = () => {
    store.commit('tag/edit')
    store.commit('tag/gotoTag', hotData.value)
}
onMounted(() => {})
</script>
<style lang="scss" scoped>
.show-tag {
    pointer-events: auto;
    background: rgba(27, 27, 28, 0.8);
    border-radius: 4px;
    // border: 1px solid #000000;
    // backdrop-filter: blur(4px);
    min-width: 400px;
    // min-height: 100px;
    padding: 30px 20px;
    .edit-btn {
        margin-top: 20px;
        text-align: right;
        span {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            &:hover {
                color: #fff;
            }
        }
    }
    .tag-metas {
        width: 100%;
        height: 225px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        cursor: -webkit-zoom-in;
        margin-top: 20px;
        &.nocursor {
            cursor: auto;
        }
        &.mask {
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 100;
            }
        }
    }
    .tag-title {
        word-break: break-all;
        h2 {
            font-size: 20px;
            // margin-bottom: 10px;
            line-height: 20px;
            color: #ffffff;
            position: relative;
            .ui-audio {
                float: right;
                &.audio {
                    display: inline-block;
                    cursor: pointer;
                }
            }
        }
    }
    .desc {
        margin-top: 10px;
        .text {
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            text-align: justify;
            word-break: break-all;
        }
    }
}
[is-mobile] {
    .show-tag {
        pointer-events: auto;
        background: rgba(27, 27, 28, 0.8);
        border-radius: 0.0533rem;
        // border: 1px solid #000000;
        // backdrop-filter: blur(0.0533rem);
        min-width: 7.4667rem;
        // min-height: 4rem;
        padding: 0.4rem 0.2667rem;

        .edit-btn {
            margin-top: 0.2667rem;
            text-align: right;
            span {
                font-size: 0.1867rem;
                color: rgba(255, 255, 255, 0.6);
                cursor: pointer;
                &:hover {
                    color: #fff;
                }
            }
        }
        .tag-metas {
            width: 100%;
            height: 4.2667rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0.0533rem;
            overflow: hidden;
            position: relative;
            cursor: -webkit-zoom-in;
            margin-top: 0.4rem;
            &.mask {
                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 100;
                }
            }
        }
        .tag-title {
            h2 {
                font-size: 0.5333rem;
                color: #ffffff;
                position: relative;
                .ui-audio {
                    float: right;
                    &.audio {
                        display: inline-block;
                        cursor: pointer;
                    }
                }
            }
        }
        .desc {
            margin-bottom: 0.2933rem;

            .text {
                font-size: 0.3733rem;
                color: #999999;
                line-height: 0.2533rem;
                text-align: justify;
                line-height: 0.5333rem;

                p {
                    line-height: 0.5333rem;
                }
            }
        }
    }
}
</style>
