<script setup lang="ts">
import type { Changelog } from '@/apis';
import { useQuery } from '@tanstack/vue-query';
import axios from 'axios';
import { NH1, NH2, NH3, NLi, NP, NScrollbar, NText, NUl } from 'naive-ui';
import { computed } from 'vue';

const CHENGELOGS_QUERY_KEY = 'changelogs-query';

const { data: changelogs = [] } = useQuery({
  queryKey: computed(() => [CHENGELOGS_QUERY_KEY]),
  queryFn: async ({ signal }) => {
    const response = await axios.get<Changelog[]>(`changelogs.json?t=${Date.now()}`, { signal });
    return response.data;
  },
});
</script>

<template>
  <NScrollbar content-style="padding: 32px 24px 56px 56px" style="width: 100%; height: 100%">
    <NH1>平台更新记录</NH1>
    <template v-for="{ version, date, changes } in changelogs" :key="version">
      <NH2>{{ version }}</NH2>
      <NP>
        <NText code>{{ date }}</NText>
      </NP>

      <template v-if="(changes.breaks?.length ?? 0) > 0">
        <NH3>重大变更</NH3>
        <template v-for="({ content }, index) in changes.breaks" :key="index">
          <NUl>
            <NLi>{{ content }}</NLi>
          </NUl>
        </template>
      </template>

      <template v-if="(changes.fixes?.length ?? 0) > 0">
        <NH3>修复</NH3>
        <template v-for="({ content }, index) in changes.fixes" :key="index">
          <NUl>
            <NLi>{{ content }}</NLi>
          </NUl>
        </template>
      </template>

      <template v-if="(changes.feats?.length ?? 0) > 0">
        <NH3>新增</NH3>
        <template v-for="({ content }, index) in changes.feats" :key="index">
          <NUl>
            <NLi>{{ content }}</NLi>
          </NUl>
        </template>
      </template>
    </template>
  </NScrollbar>
</template>

<style scoped></style>
