<script setup lang="ts">
import { type PropType, ref, useSlots } from 'vue'
import ShowTag from './showTag.vue'

const props = defineProps({
    tag: {
        type: Object as PropType<TagContent>,
        required: true,
    },
})
const slots = useSlots()

const emit = defineEmits(['click', 'mouseEnter', 'mouseLeave'])

const isShow = ref<boolean>(false)
const isClick = ref<boolean>(false)
const handleMouseEnter = (event: MouseEvent, tag: any, index?: number | undefined) => {
    // console.log('in', event)
    isShow.value = true
    emit('mouseEnter', { ...event, ...tag })
}
const handleMouseLeave = (event: MouseEvent, tag: any, index?: number | undefined) => {
    // console.log('out', event)
    isShow.value = false
    emit('mouseLeave', { ...event, ...tag })
    // isClick.value = false
}

const handleTagClick = (tagId: string) => {
    isClick.value = !isClick.value
    emit('click', {
        id: tagId,
        isClick: isClick.value,
    })
}
</script>

<template>
    <div
        :data-tag-id="tag.sid"
        :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
        @mouseleave.prevent="handleMouseLeave($event, tag)"
    >
        <slot v-if="slots.content" :id="tag.sid" name="content" :data="tag" :is-click="isClick" :visible="tag.visible" :is-show="isShow" :x="tag.x" :y="tag.y" />
        <template v-else>
            <span
                class="tag-icon animate"
                style="background-image: url(http://4dkk.4dage.com/v4/sdk/4.2.2/images/tag_icon_default.svg)"
                @click="handleTagClick(tag.sid)"
                @mouseenter.prevent="handleMouseEnter($event, tag)"
            />

            <div class="content">
                <div class="trans" :class="{ active: isShow || isClick }">
                    <template v-if="isShow || isClick">
                        <div :id="`arrow_${tag.sid}`" class="arrow" />
                        <ShowTag :id="tag.sid" :title="tag.title" :type="tag.type" :content="tag.content" :media="tag.media" />
                    </template>
                </div>
            </div>
        </template>
    </div>
</template>

<style scoped>
/* div {
    position: absolute;
} */
</style>
<style>
[xui_tags_view] {
    position: absolute;
    width: 100%;
    height: 100%;
}
[xui_tags_view] > div {
    pointer-events: all;
    display: none;
    position: absolute;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    z-index: 1;
}

[xui_tags_view] > div.focus {
    z-index: 2;
}
[xui_tags_view] > div.fixed {
    z-index: 3;
}
[xui_tags_view] > div.active {
    z-index: 4;
}

[xui_tags_view] .tag-icon {
    display: block;
    width: 48px;
    height: 48px;
    background-size: cover;
    cursor: pointer;
}

[xui_tags_view] .tag-icon.animate {
    animation: tag-animate-zoom 3s -1s linear infinite;
}

@keyframes tag-animate-zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(1);
    }
}

[xui_tags_view] .content .trans {
    padding: 0 40px 0 0;
    position: absolute;
    right: 35px;
    top: 50%;
    min-width: 420px;
    min-height: 60px;
    z-index: 1000;
    transform: translateY(-50%) scale(0);
    transform-origin: center right;
    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
    pointer-events: none;
    /* background-color: rgba(0, 0, 0, 0.8); */
}

[xui_tags_view] .content .trans .arrow {
    pointer-events: auto;
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 40px solid rgba(27, 27, 28, 0.8);
    transform: translateY(-50%);
}
[xui_tags_view] .content .trans.active {
    transform: translateY(-50%) scale(1);
}
</style>
