<route lang="yaml">
meta:
  title: 探空气球-重力波统计
  description: 探空气球-重力波统计
  group: 探空气球
  item_name: 重力波统计
</route>

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

const selectedMode = ref('w/f值统计结果')

const isIllegal = ref(false)

const startYear = ref(2017)
const endYear = ref(2024)

const modes = [

  'w/f值统计结果',
  '周期统计结果',
  '垂直波长分布',
  '水平波长分布',
  '纬向本征相速度',
  '经向本征相速度',
  '垂直本征相速度',
  'Zonal wind amplitude (m/s)',
  '扰动振幅统计结果',
  'Temperature amplitude (K)',
  '纬向动量通量统计结果',
  '经向动量通量统计结果',
  // 'horizontal propagation',
  // '每月上传/下传重力波占比',
  // '动能和势能分布情况',
] as const

const mode_display_mapping = {
  'w/f值统计结果': '本征频率与惯性频率的比值',
  '周期统计结果': '周期统计',
  '垂直波长分布': '垂直波长',
  '水平波长分布': '水平波长',
  '纬向本征相速度': '纬向本征相速度',
  '经向本征相速度': '经向本征相速度',
  '垂直本征相速度': '垂直本征相速度',
  'Zonal wind amplitude (m/s)': '纬向风扰动幅度',
  '扰动振幅统计结果': '经向风扰动幅度',
  'Temperature amplitude (K)': '温度扰动振幅',
  '纬向动量通量统计结果': '纬向动量通量统计',
  '经向动量通量统计结果': '经向动量通量统计',
  'horizontal propagation': 'horizontal propagation',
  '每月上传/下传重力波占比': '每月上传/下传重力波占比',
  '动能和势能分布情况': '动能和势能分布情况',
}

const queryUrl = computed(() => {
  return `${API_BASE_URL}/balloon/render/year?mode=${encodeURIComponent(selectedMode.value)}&start_year=${startYear.value}&end_year=${endYear.value}`
})

watch([selectedMode, startYear, endYear], () => {
  if (startYear.value > endYear.value) {
    isIllegal.value = true
    return
  }
  isIllegal.value = false
})
</script>

<template>
  <DenseFramework :image-query="queryUrl">
    <div flex="col gap-5 ~  justify-center">
      <div>
        <Label>统计参数</Label>
        <Select v-model="selectedMode">
          <SelectTrigger>
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>模式</SelectLabel>
              <SelectItem
                v-for="mode in Array.from(modes).sort(((a, b) => {
                  return mode_display_mapping[a].length - mode_display_mapping[b].length
                }))"
                :key="mode" :value="mode"
              >
                {{ mode_display_mapping[mode] }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
      <NumberField
        id="start"
        v-model:model-value="startYear" :format-options="{
          useGrouping: false,
        }" :default-value="2017" :min="2017" :max="2024"
      >
        <Label for="start">起始年</Label>
        <NumberFieldContent>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldContent>
      </NumberField>
      <NumberField
        id="end"
        v-model:model-value="endYear" :format-options="{
          style: 'decimal',
          notation: 'standard',
          useGrouping: false,
        }" :default-value="2017" :min="2017" :max="2024"
      >
        <Label for="end">终止年</Label>
        <NumberFieldContent>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldContent>
      </NumberField>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
