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

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

const modes = [
  '观测的二阶多项式拟合',
  '扰动分量的正弦波拟合',
  '径向风-纬向风矢量图',
  '温度-水平风矢量图',
] as const

const allPaths = ref([] as string[])
const selected = reactive({
  selectedMode: '观测的二阶多项式拟合',
  selectedPath: '',
})

onMounted(async () => {
  await baseFetch<string []>(`${API_BASE_URL}/balloon/metadata`).json().then(({ data }) => {
    const das = data.value!
    allPaths.value = das
  })
})

function renderDate(str: string) {
  const datePattern = /_\d{8}T\d{6}_/
  const date = str.match(datePattern)![0]
  const utcstr = date.replaceAll('_', '')
  const realTime = new Date(utcstr.replace(/(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/, '$1-$2-$3T$4:$5:$6'))
  return realTime.toLocaleString('zh', {
    year: 'numeric',
    month: 'long',
    day: '2-digit',
    hour: '2-digit',
    minute: 'numeric',
    second: 'numeric',
  })
}

const queryUrl = computed(() => {
  const selectedMode = selected.selectedMode
  const selectedDate = selected.selectedPath
  return `${API_BASE_URL}/balloon/render/single?mode=${encodeURIComponent(selectedMode)}&path=${encodeURIComponent(selectedDate)}`
})

async function customHandle(resp: Response) {
  if (resp.status === 204) {
    const res: ImageResult = {
      message: '这一天没有数据',
      result: 'error',
      resourceId: '',
    }
    return res
  }

  if (resp.status === 200) {
    const blob = await resp.blob()
    const url = URL.createObjectURL(blob)
    const res: ImageResult = {
      message: '成功',
      result: 'success',
      resourceId: url,
    }
    return res
  }
  return {
    message: '未知错误',
    result: 'error',
    resourceId: '',
  } as ImageResult
}
</script>

<template>
  <DenseFramework :image-query="queryUrl" :extra-response-handle="customHandle">
    <Label>选择模式</Label>
    <Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
      <TabsList class="grid grid-cols-1 w-full">
        <TabsTrigger v-for="m in modes" :key="m" :value="m">
          {{ m }}
        </TabsTrigger>
      </TabsList>
    </Tabs>
    <Label>选择日期</Label>
    <Select v-model="selected.selectedPath">
      <SelectTrigger>
        <SelectValue placeholder="选择日期" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>日期</SelectLabel>
          <SelectItem v-for="path in allPaths" :key="path" :value="path">
            {{ renderDate(path) }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </DenseFramework>
</template>

<style lang="scss" scoped>

</style>
