<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="p-5">
    <template v-for="(item, index) in list" :key="index">
      <!-- 显示第一篇文章的大图 -->
      <nuxt-link v-if="item.image && index == 0" :to="detail(item)" class="block mb-3">
        <el-image
          :src="item.image"
          fit="cover"
          :lazy="true"
          class="w-full md:h-[166px] h-[199px] cursor-pointer bg-gray-50 rounded-lg"
        />
      </nuxt-link>

      <!-- 文章列表项 -->
      <div class="flex items-start py-2 border-b border-gray-100 last:border-b-0">
        <!-- 小缩略图（非第一篇文章且有图片时显示） -->
        <nuxt-link v-if="item.image && index > 0" :to="detail(item)" class="flex-shrink-0 mr-3">
          <el-image
            :src="item.image"
            fit="cover"
            :lazy="true"
            class="w-16 h-12 cursor-pointer bg-gray-50 rounded"
          />
        </nuxt-link>

        <!-- 文章内容 -->
        <div class="flex-1 min-w-0">
          <div class="text-gray-700 dark:text-white text-base font-semibold flex flex-col gap-1.5">
            <nuxt-link :to="detail(item)" class="line-clamp-2 text-lg flex justify-between">
              <h4 class="text-lg font-normal line-clamp-2 flex-1 mr-2" :class="{ 'line-clamp-1': index === 0 }">
                {{ item.title }}
              </h4>
              <div class="text-gray-400 text-sm font-normal text-nowrap py-1 flex-shrink-0">
                {{ dayjs(item.createTime).format('MM-DD') }}
              </div>
            </nuxt-link>
          </div>
        </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;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.border-b:last-child {
  border-bottom: none;
}

// 悬停效果
.flex:hover {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

// 图片悬停效果
.el-image:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}
</style>
