<route lang="json">
  {
    "meta":{
      "title":"Saber 行星波月统计",
      "description":"Saber 行星波月统计",
      "group":"Saber",
      "item_name":"行星波统计"
    }
  }
</route>

<script setup lang="ts">
const selected = reactive({
  year: '2018',
  T: '16',
  k: 0,
  H: 90,
  range: '60',
})

const ranges = [
  '-30',
  '30',
  '-60',
  '60',
]

const queryUrl = computed(() => {
  const q = new URLSearchParams()
  q.set('year', selected.year)
  q.set('T', selected.T.toString())
  q.set('k', selected.k.toString())
  q.set('H', selected.H.toString())
  q.set('lat_target', selected.range)
  return `/saber/render/planet_wave/per_year/energy_plot?${q}`
})
</script>

<template>
  <DenseFramework :image-query="queryUrl">
    <Label>年份</Label>
    <Select v-model="selected.year">
      <SelectTrigger>
        <SelectValue placeholder="选择年份" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>年份</SelectLabel>
          <SelectItem v-for="year in ['2018', '2015']" :key="year" :value="year">
            {{ year }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <Label>行星波周期</Label>
    <!-- can be 5，10,16 -->
    <!-- use Tabs -->
    <Tabs v-model="selected.T" default-value="16">
      <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>
    <Label>高度（km）</Label>
    <NumberField
      id="start"
      v-model:model-value="selected.H" :format-options="{
        useGrouping: false,
      }" :default-value="94"
      :step="20"
      :max="110"
      :min="30"
    >
      <NumberFieldContent>
        <NumberFieldDecrement />
        <NumberFieldInput />
        <NumberFieldIncrement />
      </NumberFieldContent>
    </NumberField>
    <Label>纬度带（°）</Label>
    <Select v-model="selected.range">
      <SelectTrigger>
        <SelectValue placeholder="选择纬度带" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>纬度带（°）</SelectLabel>
          <SelectItem v-for="range in ranges" :key="range" :value="range">
            {{ range }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <Label>波数 k</Label>
    <NumberField
      v-model="selected.k"
      :default-value="0"
      :max="4" :min="-4" :step="1"
    >
      <NumberFieldContent>
        <NumberFieldIncrement />
        <NumberFieldInput />
        <NumberFieldDecrement />
      </NumberFieldContent>
    </NumberField>
  </DenseFramework>
</template>

<style scoped>

</style>
