<route lang="yaml">
meta:
  title: Cosmic 重力波多日
  description: Cosmic 重力波多日
  group: COSMIC
  item_name: 重力波统计
</route>

<script setup lang="ts">
import { API_BASE_URL } from '~/CONSTANT'
/**
            if mode == "布伦特-维萨拉频率分布":
        await run_sync(p.plot_heatmap_tempNz)()
    elif mode == "位温分布":
        await run_sync(p.plot_heatmap_tempPtz)()
    elif mode == "每月浮力频率变化趋势":
        await run_sync(p.plot_floatage_trend)()
    elif mode == "每月平均重力势能的折线图":
        await run_sync(p.plot_monthly_energy)()
 */
const MODES = [
  '位温分布',
  '每月浮力频率变化趋势',
  '每月平均重力势能的折线图',
  '布伦特-维萨拉频率分布',
]

const selected = reactive({
  year: '2008',
  // begin_day
  mode: '位温分布',
})
const queryUrl = computed(() => {
  const q = new URLSearchParams()
  q.set('year', selected.year)
  q.set('mode', selected.mode)
  return `${API_BASE_URL}/cosmic/render/gravity_wave/multiday?${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 ['2008']" :key="year" :value="year">
            {{ year }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <Label>模式</Label>
    <Tabs v-model="selected.mode">
      <TabsList class="grid grid-cols-1 w-full">
        <TabsTrigger v-for="mode in MODES" :key="mode" :value="mode">
          {{ mode }}
        </TabsTrigger>
      </TabsList>
    </Tabs>
  </DenseFramework>
</template>

<style scoped>

</style>
