<script setup lang="ts">
import { onMounted, inject, reactive } from 'vue'
const __sdk: any = inject('__sdk')
const options = reactive([
  {
    type: 'brightness',
    title: '亮度',
    value: 0,
  },
  {
    type: 'contrast',
    title: '对比度',
    value: 0,
  },
  {
    type: 'temperature',
    title: '色温',
    value: 0,
  },
  {
    type: 'saturation',
    title: '饱和度',
    value: 0,
  },
])
const onChange = (option: any) => {
  __sdk.FilterManager.edit[option.type](option.value / 20)
}
const onReset = () => {
  options.forEach((option) => {
    option.value = 0
    onChange(option)
  })
}
onMounted(() => {
  __sdk.FilterManager.on('FilterManager.updateCurrentFilter', (info: any) => {
    console.log(info)
  })
  __sdk.Scene.on('loaded', () => {
    __sdk.FilterManager.edit.enter()
  })
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="tools">
    <ul>
      <li v-for="option in options">
        <label for="">{{ option.title }}</label>
        <input
          type="range"
          min="-20"
          max="20"
          v-model="option.value"
          @input="onChange(option)"
        />
      </li>
      <li><button @click="onReset()">恢复默认</button></li>
    </ul>
  </div>
  <div id="scene"></div>
</template>

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