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

defineOptions({
  name: 'KkTag',
})

const props = defineProps(tagProps)
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>
