<script lang='ts' setup>
import type { NewData } from "@/api/types";
import { client, safeClient } from "@/api";

const router = useRouter();
const { data } = await safeClient(() => client.api.news.get({
  query: {
    limit: 10,
    offset: 0,
  },
}));

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

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

    <template v-if="data?.data.length === 0">
      <ui-empty />
    </template>

    <div v-else class="space-y-3">
      <div
        v-for="item in data?.data"
        :key="item.id"
        class="flex gap-3 p-3 rounded-lg bg-(--ion-color-faint) transition-colors cursor-pointer"
        @click="openNewsDetail(item)"
      >
        <div class="shrink-0">
          <img
            :src="item.thumbnail.publicUrl"
            :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.summary }}
          </p>
          <div class="text-xs mt-1">
            {{ useDateFormat(item.createdAt, 'YY/MM/DD') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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