<template>
  <a-card :title="title" class="ele-body">
    <a-list item-layout="vertical" :pagination="pagination" :data-source="list">
      <template #renderItem="{ item }">
        <a-list-item key="item.title">
          <template #actions>
            <span v-for="{ icon, text } in actions" :key="icon">
              <component :is="icon" style="margin-right: 8px" />
              {{ text }}
            </span>
          </template>
          <template #extra>
            <img
              width="100"
              height="100"
              alt="logo"
              v-if="item.image"
              :src="item.image"
            />
          </template>
          <a-list-item-meta :description="item.title">
            <template #title>
              <a @click="openNew('/cms/article/' + item.articleId)">{{
                item.title
              }}</a>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, unref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { pageArticle } from '@/api/cms/article';
  import { Article } from '@/api/cms/article/model';
  import { getArticleCategory } from '@/api/cms/category';
  import { ArticleCategory } from '@/api/cms/category/model';

  import {
    StarOutlined,
    LikeOutlined,
    MessageOutlined
  } from '@ant-design/icons-vue';
  import { openNew } from '@/utils/common';
  const { currentRoute } = useRouter();
  const title = ref<string>('');
  const categoryId = ref(0);
  const category = ref<ArticleCategory | any>();
  const list = ref<Article[]>([]);
  const spinning = ref(true);
  const page = ref(1);

  const pagination = {
    onChange: (index: number) => {
      page.value = index;
      reload();
    },
    total: 10,
    pageSize: 10
  };

  const actions: Record<string, any>[] = [
    { icon: StarOutlined, text: '156' },
    { icon: LikeOutlined, text: '156' },
    { icon: MessageOutlined, text: '2' }
  ];

  /**
   * 加载数据
   */
  const reload = () => {
    // 加载文章分类
    getArticleCategory(categoryId.value).then((data) => {
      category.value = data;
      // 修改页签标题
      if (data.title) {
        title.value = data.title;
        setPageTabTitle(data.title);
      }
    });
    // 加载文章列表
    pageArticle({ categoryId: categoryId.value, page: page.value }).then(
      (data) => {
        if (data?.list) {
          pagination.total = data.count;
          list.value = data.list;
        }
        spinning.value = false;
      }
    );
  };

  watch(
    currentRoute,
    (route) => {
      const { params } = unref(route);
      const { id } = params;
      if (id) {
        categoryId.value = Number(id);
        reload();
      }
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'ArticleCategoryPreview'
  };
</script>
<style>
  body {
    background: #f0f2f5;
  }
  .ele-body {
    margin: 0 auto;
    max-width: 1000px;
  }
</style>
