<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]">
    <view class="page-content">
      <Loading v-if="loading" text="加载中..." />
      <template v-else-if="article">
        <text class="article-title">{{ article.title }}</text>
        <view class="article-meta">
          <text class="article-date">{{ formatDate(article.created_at) }}</text>
          <text v-if="article.author" class="article-author">{{ article.author }}</text>
        </view>
        <view class="article-body">
          <rich-text :nodes="article.content || ''" />
        </view>
      </template>
      <EmptyState v-else icon="📰" title="文章不存在" />
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { api } from '@/services/request'
import { formatDate } from '@/utils/date'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()
const loading = ref(false)
const article = ref<any>(null)

onLoad(async (query: any) => {
  const id = query?.id
  if (!id) return
  loading.value = true
  try { article.value = await api.get<any>(`/health/articles/${id}`) }
  catch { article.value = null }
  loading.value = false
})
</script>

<style lang="scss" scoped>
.page-scroll { height: 100vh; background: $bg; }
.page-content { padding: 28px 24px 120px; }

.article-title {
  display: block;
  font-size: var(--tk-font-h1);
  font-weight: bold;
  color: $tx;
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid $bd-l;
}

.article-date, .article-author {
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.article-body {
  font-size: var(--tk-font-body);
  line-height: var(--tk-line-height);
  color: $tx;
}
</style>
