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

const loading = ref(false)
const socketUrl = ref('wss://testws.4dkankan.com')
const socketUrlLib = ref(
  'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.msgpack.min.js'
)

const userInfo = ref<DaikanUserInfoType>({
  userId: 'test-user-1',
  roomId: 'test-roomid-1',
  avatar: '',
  nickName: 'xxxxx',
  role: 'leader',
})

onMounted(async () => {
  __sdk.Scene.on('loaded', () => (loading.value = true))
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="scene">
    <Teleport v-if="loading" to=".kankan-plugins">
      <div xui_daikan_view>
        <kk-daikan
          :socket-lib="socketUrlLib"
          :user-info="userInfo"
          :socket-url="socketUrl"
        >
        </kk-daikan>
      </div>
    </Teleport>
  </div>
</template>

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