<route lang="json">
{
    "meta": {
      "title": "Saber日周期功率波图",
      "description": "Saber日周期功率波图",
      "group": "Saber",
      "item_name": "日周期功率波图"
    }
  }
</route>

<script setup lang="ts">
import { API_BASE_URL } from '~/CONSTANT'
import { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths } from './utils'

const selected = reactive({
  path: './saber/data/2012/SABER_Temp_O3_April2012_v2.0.nc',
  day: '',
  cycle_no: '1',
  lat_range: '0,10',
})

const lat_ranges = [
  '0,10',
  '10,20',
  '20,30',
  '30,40',
  '40,50',
  '50,60',
]

const lon_ranges = [
  '0 ~ 24',
  '24 ~ 48',
  '48 ~ 72',
  '72 ~ 96',
  '96 ~ 120',
  '120 ~ 144',
  '144 ~ 168',
  '168 ~ 192',
  '192 ~ 216',
  '216 ~ 240',
  '240 ~ 264',
  '264 ~ 288',
  '288 ~ 312',
  '312 ~ 336',
  '336 ~ 360',
]

const urll = computed(() => {
  // const path = encodeURIComponent(selected.path)
  // const day = encodeURIComponent(selected.day)
  // const query = `path=${path}&day=${day}&cycle_no=${selected.cycle_no}`
  const query = new URLSearchParams()
  query.set('path', selected.path)
  query.set('day', selected.day)
  query.set('cycle_no', selected.cycle_no.toString())
  query.set('lat_range', selected.lat_range)
  return `${API_BASE_URL}/saber/render/gravity_wave/per_day/fft_ifft?${query}`
})

onMounted(async () => {
  await refreshPath()
  selected.path = saberPaths.value[1]
})

watch(() => selected.path, async () => {
  await refreshCurrentSaberDays(selected.path)
  if (selected.day === '' && currentSaberDays.value.length > 0) {
    selected.day = currentSaberDays.value[1]
  }
})
</script>

<template>
  <DenseFramework :image-query="urll">
    <div>
      <div flex="~ col items-stretch gap-3" py-3>
        <slot />
        <Label>纬度带</Label>
        <Select v-model:model-value="selected.lat_range">
          <SelectTrigger>
            <SelectValue placeholder="选择纬度带" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>纬度带</SelectLabel>
              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
                {{ lat_range.replace(",", " ~ ") }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="day">年月</Label>
        <Select v-model="selected.path">
          <SelectTrigger>
            <SelectValue placeholder="选择日期" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>月份</SelectLabel>
              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
                {{ renderPath(path) }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="day">天数</Label>
        <Select id="day" v-model="selected.day">
          <SelectTrigger>
            <SelectValue placeholder="选择日期" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Day</SelectLabel>
              <SelectItem v-for="day in currentSaberDays.slice(1)" :key="day" :value="day">
                {{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                }) }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="age">经度范围</Label>
        <Select v-model="selected.cycle_no">
          <SelectTrigger>
            <SelectValue placeholder="选择范围" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>经度范围</SelectLabel>
              <SelectItem v-for="i in 15" :key="i" :value="i.toString()">
                {{ lon_ranges[i - 1] }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
