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

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

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

const selected = reactive({
  path: '',
  lat_range: '0,10',
})

const urll = computed(() => {
  const query = new URLSearchParams()
  query.set('path', selected.path)
  query.set('lat_range', selected.lat_range)
  return `${API_BASE_URL}/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
})

onMounted(async () => {
  await refreshPath()
  selected.path = saberPaths.value[0]
})
</script>

<template>
  <DenseFramework :image-query="urll">
    <div>
      <div flex="~ col items-stretch gap-3" py-3>
        <Label>纬度带</Label>
        <Select v-model="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>
      </div>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
