<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]" @scrolltolower="loadMore">
    <view class="page-content">
      <text class="page-title">健康文章</text>
      <Loading v-if="loading && list.length === 0" text="加载中..." />
      <EmptyState v-else-if="list.length === 0" icon="📰" title="暂无文章" />
      <template v-else>
        <view v-for="item in list" :key="item.id" class="article-card" @tap="goDetail(item.id)">
          <text class="article-title">{{ item.title }}</text>
          <text class="article-summary">{{ item.summary || item.content?.substring(0, 60) }}</text>
          <view class="article-meta">
            <text class="article-date">{{ formatDate(item.created_at) }}</text>
            <text v-if="item.category" class="article-tag">{{ item.category }}</text>
          </view>
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
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 list = ref<any[]>([])
const page = ref(1)

function goDetail(id: string) {
  uni.navigateTo({ url: `/pages-sub/article/detail/index?id=${id}` })
}

async function fetchList() {
  loading.value = true
  try { list.value = await api.get<any[]>('/health/articles', { page: page.value, limit: 20 }) || [] }
  catch { list.value = [] }
  loading.value = false
}

function loadMore() {
  page.value++
  fetchList()
}

onMounted(fetchList)
</script>

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

.article-card {
  background: $card;
  border-radius: $r;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: $shadow-sm;
}

.article-title {
  display: block;
  font-size: var(--tk-font-body-lg);
  font-weight: 600;
  color: $tx;
  margin-bottom: 8px;
}

.article-summary {
  display: block;
  font-size: var(--tk-font-body-sm);
  color: $tx2;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.article-tag {
  @include tag($pri-l, $pri);
  font-size: var(--tk-font-micro);
}
</style>
