<template>
  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px', minHeight: '252px' }">
    <template #extra
      ><a
        @click="openPreview('/article/' + categoryId)"
        class="ele-text-placeholder"
        >更多<RightOutlined /></a
    ></template>
    <a-list :size="`small`" :split="false" :data-source="list">
      <template #renderItem="{ item }">
        <a-list-item>
          <a
            class="ele-text-secondary"
            @click="openUrl('/cms/article/' + item.articleId)"
          >
            {{ item.title }}
          </a>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { pageArticle } from '@/api/cms/article';
  import { Article } from '@/api/cms/article/model';
  import {openNew, openPreview, openUrl} from '@/utils/common';
  import { RightOutlined } from '@ant-design/icons-vue';
  const list = ref<Article[]>([]);

  const props = defineProps<{
    title: string;
    categoryId: number;
  }>();

  /**
   * 加载数据
   */
  const reload = () => {
    const { categoryId } = props;
    // 加载文章列表
    pageArticle({ categoryId, limit: 6 }).then((data) => {
      if (data?.list) {
        list.value = data.list;
      }
    });
  };
  reload();
</script>

<script lang="ts">
  export default {
    name: 'DashboardArticleList'
  };
</script>
