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

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

const currentMode = ref('月统计图')
const allYears = ref([] as string[])
const lat_ranges = [
  '-60,-50',
  '-50,-40',
  '-40,-30',
  '-30,-20',
  '-20,-10',
  '-10,0',
  '0,10',
  '10,20',
  '20,30',
  '30,40',
  '40,50',
  '50,60',
]

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

const urll = computed(() => {
  if (currentMode.value === '月统计图') {
    const query = new URLSearchParams()
    query.set('path', selected.path)
    query.set('lat_range', selected.lat_range)
    return `/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
  }
  else {
    const query = new URLSearchParams()
    query.set('year', selected.year)
    query.set('lat_range', selected.lat_range)
    return `/saber/render/gravity_wave/per_year/power_wave_plot?${query}`
  }
})

onMounted(async () => {
  await refreshPath()
  selected.path = saberPaths.value[0]
  // traverse all paths to get all years,
  // in each item, str is like ../data/saber/2017/SABER_Temp_O3_June2017_v2.0.nc
  const years = Array.from(new Set(saberPaths.value.map((str: string) => str.match(/(\d{4})/)?.[1])))
  allYears.value = years.filter(year => year !== null).map(year => year!)
  selected.year = allYears.value[0]
})
</script>

<template>
  <DenseFramework :image-query="urll">
    <div>
      <Label>模式</Label>
      <Tabs v-model="currentMode">
        <TabsList class="grid grid-cols-2 w-full">
          <TabsTrigger value="月统计图">
            月统计图
          </TabsTrigger>
          <TabsTrigger value="年统计图">
            年统计图
          </TabsTrigger>
        </TabsList>
      </Tabs>
      <div v-if="currentMode === '月统计图'" flex="~ col items-stretch gap-3" py-3>
        <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>纬度带（°）</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>
      </div>
      <div v-else class="flex flex-col gap-3 py-2">
        <Label>年份</Label>
        <Select v-model="selected.year">
          <SelectTrigger>
            <SelectValue placeholder="选择年份" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>年份</SelectLabel>
              <SelectItem v-for="year in allYears" :key="year" :value="year">
                {{ year }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <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>
      </div>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
