<script setup lang="ts">
import { onMounted, inject, ref } from 'vue'
import { KkMinmap, KkIcon } from '@kankan-components/components'

import '@kankan-components/theme-chalk/src/index.scss'
const __sdk: any = inject('__sdk')

const loading = ref(false)
const mapShow = ref(false)
const minMap = ref(null)

onMounted(async () => {
  __sdk.Scene.on('ready', () => (loading.value = true))
  __sdk.use('MinMap').then(() => {
    mapShow.value = true
  })
  // __sdk.use('MinMap', { theme: { camera_fillStyle: "#B8A965" }})
  __sdk.mount('#scene').render()
})
onMounted(() => {})
// setTimeout(() => {
//   mapShow.value = false
// }, 5000)
</script>

<template>
  <div id="scene">
    <kk-minmap ref="minMap" :show="mapShow">
      <kk-icon type="arrow"></kk-icon>
    </kk-minmap>
  </div>
</template>

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