<script setup lang="ts">
import '@kankan-components/theme-chalk/src/index.scss'
import { onMounted, inject, ref } from 'vue'
import { KkButton } from '@kankan-components/components'

const range = ref(100)
const isEnter = ref(false)

const __sdk: any = inject('__sdk')
const onEnter = () => {
  isEnter.value = true
  __sdk.Camera.extract.enter()
}
const onLeave = () => {
  isEnter.value = false
  __sdk.Camera.extract.leave()
}
const onReset = (type: string) => {
  __sdk.Camera.extract.reset(type)
}
const onChange = () => {
  __sdk.Camera.extract.range(range.value)
}
onMounted(() => {
  __sdk.use('Xui')
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="tools">
    <button @click="onEnter()">编辑</button>
    <button @click="onLeave()">退出</button>
    <button @click="onReset('camera')" :disabled="!isEnter">水平重置</button>
    <button @click="onReset('scale')" :disabled="!isEnter">1:1</button>
    <input
      type="range"
      min="70"
      max="300"
      v-model="range"
      @input="onChange()"
      :disabled="!isEnter"
    />
  </div>
  <div id="scene"></div>
</template>

<style scoped>
#tools {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1000;
}
#scene {
  width: 100vw;
  height: 100vh;
}
#scene-front {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
</style>
