<route lang="json">
{
  "meta":{
    "title":"TIDI 行星波月统计",
    "icon":"mdi:telescope",
    "group":"TIDI",
    "item_name":"行星波月统计"

  }
}
</route>

<script setup lang="ts">
import { API_BASE_URL } from '~/CONSTANT'

const selectedMode = ref('V_Meridional')

const years = ref([] as string[])
const selectedYear = ref('2017')

// const k = [ -4,-3,-2,-1,0,1,2,3,4]
const selectedK = ref(0)
const selectedT = ref('5')

const queryUrl = computed(() => {
  const query = new URLSearchParams()
  query.set('mode', selectedMode.value)
  query.set('year', selectedYear.value)
  query.set('k', selectedK.value.toString())
  query.set('T', selectedT.value.toString())
  return `${API_BASE_URL}/tidi/render/wave?${query}`
})

onMounted(async () => {
  const metas = await baseFetch<{ path: string [] }>(`${API_BASE_URL}/tidi/metadata`).json()
  const _years = metas.data.value.path.map((a: string) => {
    const year_pattern = /data\/(\d{4})\//
    return a.match(year_pattern)?.[1]
  })
  _years.sort()
  years.value = Array.from(new Set(_years))
  selectedYear.value = years.value[0]
})
</script>

<template>
  <DenseFramework :image-query="queryUrl">
    <div flex="col gap-3 ~  justify-stretch">
      <Label>计算模式</Label>
      <Tabs id="modes" v-model="selectedMode" default-value="V_Meridional">
        <TabsList class="grid grid-cols-2 w-full">
          <TabsTrigger value="V_Meridional">
            纬向风
          </TabsTrigger>
          <TabsTrigger value="V_Zonal">
            经向风
          </TabsTrigger>
        </TabsList>
      </Tabs>
      <Label>年份</Label>
      <Select v-model="selectedYear">
        <SelectTrigger>
          <SelectValue placeholder="选择年份" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>年份</SelectLabel>
            <SelectItem v-for="year in years" :key="year" :value="year">
              {{ year }}
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <Label>波数 k</Label>
      <NumberField
        v-model="selectedK"
        :max="4" :min="-4" :step="1"
      >
        <NumberFieldContent>
          <NumberFieldIncrement />
          <NumberFieldInput />
          <NumberFieldDecrement />
        </NumberFieldContent>
      </NumberField>
      <Label>滑动窗口 T</Label>
      <Tabs v-model:model-value="selectedT" default-value="15">
        <TabsList class="grid grid-cols-3 w-full">
          <TabsTrigger value="5">
            5
          </TabsTrigger>
          <TabsTrigger value="10">
            10
          </TabsTrigger>
          <TabsTrigger value="16">
            16
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
