<script lang='ts' setup>
import type { NewsItem } from "@/mocks/data/news";
import { mockClient } from "@/api";

// TODO: 后续从API获取新闻数据
const { data } = mockClient<NewsItem[]>("news");

function formatTime(time: string) {
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const hours = Math.floor(diff / (1000 * 60 * 60));

  if (hours < 1) {
    const minutes = Math.floor(diff / (1000 * 60));
    return `${minutes}分钟前`;
  }
  if (hours < 24) {
    return `${hours}小时前`;
  }
  const days = Math.floor(hours / 24);
  if (days < 7) {
    return `${days}天前`;
  }
  return date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
}

const router = useRouter();

function openNewsDetail(item: NewsItem) {
  router.push(`/news/${item.id}`);
}
</script>

<template>
  <div class="mt-5">
    <div class="text-md font-semibold mb-4">
      动态新闻
    </div>

    <!-- 新闻列表 -->
    <div class="space-y-3">
      <div
        v-for="item in data"
        :key="item.id"
        class="flex gap-3 p-3 rounded-lg bg-(--ion-color-faint) transition-colors cursor-pointer"
      >
        <!-- 缩略图 -->
        <div class="shrink-0">
          <img
            :src="item.thumbnail"
            :alt="item.title"
            class="w-20 h-20 rounded-lg object-cover"
          >
        </div>

        <!-- 内容 -->
        <div class="flex-1 min-w-0 flex flex-col justify-between">
          <!-- 标题 -->
          <div class="text-md font-medium line-clamp-1">
            {{ item.title }}
          </div>

          <!-- 描述 -->
          <p class="text-xs line-clamp-2 mt-1">
            {{ item.description }}
          </p>

          <!-- 时间 -->
          <div class="text-xs mt-1">
            {{ formatTime(item.time) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
</style>
