<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, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'

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

const urll = computed(() => {
  const path = encodeURIComponent(selected.path)
  const day = encodeURIComponent(selected.day)
  const query = `path=${path}&day=${day}&cycle_no=${selected.cycle_no}`
  return `${API_BASE_URL}/saber/render/day_fft_ifft_plot?${query}`
})

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

watch(() => selected.path, async () => {
  await refreshCurrentSaberDays(selected.path)
})

function renderPath(path: string) {
  const yearPattern = /\/data\/(\d{4})/
  const year = path.match(yearPattern)?.[1]
  const monthPattern = /Temp_O3_(.*)(\d{4})/
  const month = path.match(monthPattern)?.[1]
  return `${year}年${month}`
}
</script>

<template>
  <DenseFramework :image-query="urll">
    <div>
      <div 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" :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" :key="day" :value="day">
                {{ day }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="age">Cycle No.</Label>
        <NumberField id="age" v-model:model-value="selected.cycle_no" :default-value="1" :min="0">
          <NumberFieldContent>
            <NumberFieldDecrement />
            <NumberFieldInput />
            <NumberFieldIncrement />
          </NumberFieldContent>
        </NumberField>
      </div>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
