<script setup lang="ts">
import { Ref, ref, inject, watch } from 'vue'
import TagView from './TagView.vue'

const __sdk: any = inject('__sdk')
const notify = ref({ event: '', sid: '' })
const tags: Ref<Array<any>> = ref([])

watch(notify, () => {
    if (notify.value.event == 'hover') {
        // 强制清除上次点中的热点id，防止hover方式展开时，下次点选时还是相同的热点id
        __sdk.TagManager.unfocusTag()
    } else if (notify.value.event == 'focus') {
        __sdk.TagManager.focusTag(notify.value.sid, { direction: 'left' })
    }
})

__sdk.Camera.on('flying.started', (params: any) => {
    // 切换点位时关闭弹窗
    if (!params.isTagFlying) {
        notify.value = { event: '', sid: '' }
    }
})

__sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))

// 点击热点时触发
__sdk.TagManager.on('focus', (newId: string, oldId: string) => {
    if (newId == oldId) {
        notify.value = { event: '', sid: '' }
    }
})

// 调用打开热点触发
__sdk.TagManager.on('open', (sid: string) => {
    notify.value = { event: 'focus', sid }
})
// 调用sdk关闭热点触发
__sdk.TagManager.on('close', (sid: string) => {
    notify.value = { event: '', sid: '' }
})
</script>

<template>
    <Teleport to=".kankan-plugins" v-if="tags.length">
        <div xui_tags_view>
            <TagView v-for="item in tags" :tag="item" :notify="notify" @action="action => (notify = action)" />
        </div>
    </Teleport>
</template>
<style scoped>
[xui_tags_view] {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
