<route lang="json">
{
  "meta": {
    "title": "Saber拟合",
    "description": "Saber拟合",
    "group": "Saber",
    "item_name": "拟合"
  }
}
</route>

<script setup lang="ts">
import { API_BASE_URL } from '~/CONSTANT'
import { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths } from './utils'

const lat_ranges = [
  '0,10',
  '10,20',
  '20,30',
  '30,40',
  '40,50',
  '50,60',
]

const selected = reactive({
  path: './saber/data\\2012\\SABER_Temp_O3_April2012_v2.0.nc',
  day: '',
  height_no: '1',
  lat_ranges: '0,10',
})

const urll = computed(() => {
  const query = new URLSearchParams()
  query.set('path', selected.path)
  query.set('day', selected.day)
  query.set('height_no', selected.height_no.toString())
  query.set('lat_ranges', selected.lat_ranges)
  return `${API_BASE_URL}/saber/render/plot_wave_fitting?${query}`
})

onMounted(async () => {
  await refreshPath()
  selected.path = saberPaths.value[1]
})

watch(() => selected.path, async () => {
  await refreshCurrentSaberDays(selected.path)
  if (saberPaths.value.length > 0) {
    selected.path = saberPaths.value[1]
  }
})

function mapHeightValue(input: number) {
  // Input range: 1 to 157
  // Output range: 30 to 90
  const inputMin = 1
  const inputMax = 157
  const outputMin = 30
  const outputMax = 90

  // Calculate slope
  const m = (outputMax - outputMin) / (inputMax - inputMin)
  // Calculate y-intercept
  const b = outputMin - m * inputMin

  // Apply linear mapping
  return m * input + b
}
</script>

<template>
  <DenseFramework :image-query="urll">
    <div>
      <div flex="~ col justify-stretch   gap-3" py-3>
        <Label>纬度带</Label>
        <Select v-model="selected.lat_ranges">
          <SelectTrigger>
            <SelectValue placeholder="选择纬度带" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>纬度带</SelectLabel>
              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
                {{ lat_range.replace(",", " ~ ") }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="day">年月</Label>
        <Select v-model="selected.path">
          <SelectTrigger>
            <SelectValue placeholder="选择日期" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>月份</SelectLabel>
              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
                {{ renderPath(path) }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="day">天数</Label>
        <Select id="day" v-model="selected.day">
          <SelectTrigger>
            <SelectValue placeholder="选择日期" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Day</SelectLabel>
              <SelectItem v-for="day in currentSaberDays.slice(1)" :key="day" :value="day">
                {{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                }) }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label for="age">高度</Label>
        <Select v-model="selected.height_no">
          <SelectTrigger>
            <SelectValue placeholder="选择高度" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>高度</SelectLabel>
              <SelectItem v-for="height_no in 157" :key="height_no" :value="height_no.toString()">
                {{ mapHeightValue(height_no).toFixed(2) }} km
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  </DenseFramework>
</template>

<style scoped>

</style>
