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

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

const selectedT = ref<'5' | '10' | '16'>('5')

const fetchUrl = computed(() => {
  const query = new URLSearchParams()
  query.set('T_', selectedT.value)
  return `${API_BASE_URL}/cosmic/temp_render?${query}`
})
</script>

<template>
  <DenseFramework :image-query="fetchUrl">
    <Label for="T_range">行星波周期</Label>
    <Tabs id="T_range" v-model="selectedT" default-value="5">
      <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>
  </DenseFramework>
</template>
