<script setup>
import { inject, ref, watch, onBeforeUnmount } from "vue"
import { useSkyLight } from "@/hooks/useSkyLight"

const map = inject("map")
const { skyGroup, init, setTime } = useSkyLight(map.value)
const defaultTime = ref(420)

const timeOptions = Array.from({length: 24}).map((_, i) => ({
  label: `${i}时`,
  value: i * 60,
}))

map.value.amap.maxPitch = 180
window.$setTime = setTime

init()
setTime(defaultTime.value)

watch(defaultTime, (value) => {
  setTime(value)
})

onBeforeUnmount(() => {
  skyGroup.value?.dispose()
})
</script>

<template>
  <div class="sky-select">
    <select name="time" id="time" v-model="defaultTime">
      <option v-for="time in timeOptions" :key="time.value" :value="time.value">{{ time.label }}</option>
    </select>
  </div>
</template>

<style scoped>
select {
  min-width: 100px;
}
</style>
