<script setup lang="ts">
import { type PropType } from 'vue'

interface Tag {
    x: Number
    y: Number
    sid: string
    visible: boolean
}

interface Notify {
    sid: string
    event: string
}

const props = defineProps({
    tag: {
        type: Object as PropType<Tag>,
        required: true,
    },
    notify: {
        type: Object as PropType<Notify>,
        required: true,
    },
})

const emits = defineEmits(['action'])

const onHover = (hover: boolean) => {
    // 如果是其他事件打开模板，则不触发hover
    if (props.notify.sid && props.tag.sid == props.notify.sid && props.notify.event == 'focus') {
        return
    }

    if (hover) {
        emits('action', { event: 'hover', sid: props.tag.sid })
    } else {
        emits('action', { event: '', sid: '' })
    }
}
const onFocus = () => {
    emits('action', { event: 'focus', sid: props.tag.sid })
}
</script>

<template>
    <div
        @mouseenter="onHover(true)"
        @mouseleave="onHover(false)"
        @click="onFocus"
        :data-tag-id="props.tag.sid"
        :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
        class="tag-item"
    >
        <i class="tag-icon animate" style="background-image: url(http://4dkk.4dage.com/v4/sdk/4.2.2/images/tag_icon_default.svg)"></i>
        <transition>
            <div class="tag-body" v-if="props.tag.sid == notify.sid" @click.stop @mouseenter.stop @mouseleave.stop>sdfsdf</div>
        </transition>
    </div>
</template>
<style scoped>
.tag-item {
    pointer-events: all;
    display: none;
    position: absolute;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    z-index: 1;
}

.tag-item.focus {
    z-index: 2;
}
.tag-item.focus .tag-body {
    transform: translateY(-50%) scale(1);
}
.tag-item.fixed {
    z-index: 3;
}
.tag-item.active {
    z-index: 4;
}

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

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

.tag-item .tag-body {
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: 70px;
    width: 200px;
    height: 200px;
    transform: translateY(-50%) scale(1);
    transform-origin: calc(100% + 40px) -50%;
    background: rgba(27, 27, 28, 0.8);
    border-radius: 4px;
    min-width: 400px;
    padding: 30px 20px;
}

.tag-item .tag-body::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    top: 0;
    right: -40px;
}

.tag-item .tag-body::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -39px;
    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%);
}

.tag-item .tag-body.show {
    transform: translateY(-50%) scale(1);
}

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

.tag-item .v-enter-from,
.tag-item .v-leave-to {
    opacity: 0;
    transform: translateY(50%) scale(0);
}
.tag-item .v-enter-active,
.tag-item .v-leave-active {
    will-change: transform;
    transition: all 0.25s cubic-bezier(0.35, 0.32, 0.65, 0.63);
}
.tag-item .v-enter-to,
.tag-item .v-leave-from {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
</style>
