<script setup lang="ts">
  import { pageCmsArticle } from '~/api/cms/cmsArticle';
  import type { CmsArticle } from '~/api/cms/cmsArticle/model';
  import dayjs from 'dayjs';
  import { detail, navTo } from '~/utils/common';

  const props = withDefaults(
    defineProps<{
      categoryId?: number;
      row?: number;
    }>(),
    {}
  );

  const list = ref<CmsArticle[]>([]);
  const reload = () => {
    pageCmsArticle({
      categoryId: props.categoryId,
      limit: props.row || 10
    }).then(data => {
      list.value = data?.list || [];
    });
  };

  // 监听categoryId变化，自动重新加载数据
  watch(() => props.categoryId, () => {
    reload();
  }, { immediate: true });
</script>

<template>
  <div class="px-5 py-3">
    <template v-for="(item, index) in list" :key="index">
      <!-- 纯文字列表项，不显示图片 -->
      <div class="flex items-center py-2 border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors duration-200">
        <!-- 序号 -->
        <div class="flex-shrink-0 w-6 text-gray-400 text-sm mr-3">
          {{ index + 1 }}
        </div>

        <!-- 文章内容 -->
        <div class="flex-1 min-w-0">
          <nuxt-link :to="detail(item)" class="flex justify-between items-center group">
            <h4 class="text-base font-normal text-gray-700 line-clamp-1 flex-1 mr-4 group-hover:text-green-600 transition-colors duration-200">
              {{ item.title }}
            </h4>
            <div class="text-gray-400 text-sm font-normal text-nowrap flex-shrink-0">
              {{ dayjs(item.createTime).format('MM-DD') }}
            </div>
          </nuxt-link>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 悬停效果
.group:hover h4 {
  color: #16a34a;
}
</style>
