<script setup lang="ts">
  import { pageCmsArticle } from '~/api/cms/cmsArticle';
  import type { CmsArticle } from '~/api/cms/cmsArticle/model';
  import dayjs from 'dayjs';
  import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
  import { navigateTo } from '#imports';

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

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

<template>
  <el-col v-for="(sub, index) in list" :key="index" :xs="24" :span="6" class="mb-6">
    <el-card
      shadow="hover"
      :body-style="{ padding: '0px' }"
      class="hover:bg-gray-50 cursor-pointer"
      @click="navigateTo(`/detail/${sub.articleId}.html`)"
    >
      <el-image
        :src="sub.image"
        fit="cover"
        :lazy="true"
        class="w-full md:h-[166px] h-[199px] cursor-pointer bg-gray-50"
      />
      <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
        <div class="text-gray-700 dark:text-white text-base font-semibold flex flex-col gap-1.5">
          <div class="line-clamp-2 text-lg min-h-[54px]">
            {{ sub.title }}
          </div>
        </div>
        <!--              <div class="flex items-center gap-1.5 py-2 text-gray-500 justify-between">-->
        <!--                <div class="text-gray-500 line-clamp-2">{{ sub.comments }}</div>-->
        <!--              </div>-->
        <div class="button-group flex justify-between items-center mt-3 text-sm">
          <el-space class="flex items-end">
            <div class="text-gray-400 gap-1 flex items-center">
              <el-icon>
                <View />
              </el-icon>
              <span>{{ getViews(sub) }}</span>
            </div>
          </el-space>
          <div class="text-gray-400">
            {{ dayjs(sub.createTime).format('YYYY-MM-DD') }}
          </div>
        </div>
      </div>
    </el-card>
  </el-col>
</template>

<style scoped lang="scss"></style>
