<script setup lang="ts">
import { onMounted, inject, ref } from 'vue'
const __sdk: any = inject('__sdk')
const logo = ref(0)
const size = ref(100)
const getImageURL = (name: number) => {
  return __sdk.resource.getAppURL(`images/floorlogos/${name}.png`)
}
const onClick = (name: number) => {
  logo.value = name
  __sdk.Scene.setFloorLogo({ url: getImageURL(name) })
}
const onSizeChange = () => {
  console.log(size.value)
  __sdk.Scene.setFloorLogo({ size: size.value })
}
onMounted(() => {
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="tools">
    <div
      v-for="(item, name) in 3"
      :style="{ backgroundImage: `url(${getImageURL(name)})` }"
      @click="onClick(name)"
      :class="{ active: name == logo }"
    ></div>
    <input
      type="range"
      min="20"
      max="180"
      v-model="size"
      @input="onSizeChange()"
    />
  </div>
  <div id="scene"></div>
</template>

<style scoped lang="scss">
#tools {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    cursor: pointer;
    width: 128px;
    height: 128px;
    margin-left: 10px;
    border: solid 1px rgba($color: #000000, $alpha: 0.6);
    background-repeat: no-repeat;
    background-size: 100%;
    &.active {
      border-color: aqua;
    }
  }
}
#scene {
  width: 100%;
  height: 100vh;
}
</style>
