<script setup lang="ts">
import { onMounted, inject, ref } from 'vue'
import { KkTag } from '@kankan-components/components'
import '@kankan-components/theme-chalk/src/tag.scss'
const __sdk: any = inject('__sdk')

const tags = ref<any>([])

onMounted(async () => {
  __sdk.TagManager.on('loaded', (data: any) =>
    __sdk.TagManager.load((tags.value = data) && tags.value)
  )
  __sdk.mount('#scene').render()
})

const handleTagview = (data: any) => {
  console.log('tag', data)
}
</script>

<template>
  <div id="scene">
    <Teleport v-if="tags.length" to=".kankan-plugins">
      <div xui_tags_view>
        <KkTag
          v-for="(item, index) in tags"
          :key="index"
          :tag="item"
          @click="handleTagview"
        >
          <!-- <template v-slot:content="{ data, id, isClick, isShow, x, y }">
            <div>id:{{ id }}</div>
            <div>isClick:{{ isClick }}</div>
            <div>isShow:{{ isShow }}</div>
            <div>x:{{ x }}</div>
            <div>y:{{ y }}</div>
          </template> -->
        </KkTag>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
#scene {
  width: 100vw;
  height: 100vh;
}
</style>
