<template>
  <div>
    <div class="header-height"></div>
    <div class="w-1200 py-8 nav">
      <NBreadcrumb>
        <NBreadcrumbItem>
          <NuxtLink :to="localePath('/')">{{ $t('homePage') }}</NuxtLink>
        </NBreadcrumbItem>
        <NBreadcrumbItem>
          {{ $t('news') }}
        </NBreadcrumbItem>
      </NBreadcrumb>
    </div>

    <!-- 文章列表-->
    <div class="w-1440">
      <div class="w-1200">
        <NuxtLink v-for="(item, index) in articleDataList" :to="localePath('/news-detail/' + item.id)" class="article flex justify-between">
          <div class="flex flex-col justify-between">
            <p class="article-title line-clamp-2">{{ locale== 'zh'?item.title:item.titleEn}}</p>
            <NSpace class="article-footer">
              <span class="">{{locale== 'zh'? item.source: item.sourceEn}}</span>
              <span class="">{{item.viewsCount}} {{$t('viewsCount')}}</span>
              <span class="">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</span>
            </NSpace>
          </div>
          <img :src="item.picUrl" class="article-img"  />
        </NuxtLink>

      </div>
    </div>
  </div>
<!-- 分页-->
  <div class="flex justify-center py-8">
    <NPagination
        :itemCount="itemCount"
        :page-size="10"
        @update-page="queryList"
    />
  </div>



</template>
<script setup lang="ts">
import {NBreadcrumb, NBreadcrumbItem, NSpace, NPagination, NThing} from 'naive-ui'
import {getArticleList} from "~/api/article";
const dayjs = useDayjs()
const {locale} = useI18n()
const localePath = useLocalePath()
useHead({
  title: `金梦网-最新资讯`
})
const pageParams = {
  pageNo: 1,
  pageSize: 10,
  categoryId: 28
}
const itemCount = ref(0)
const articleDataList = ref<any[]>([])
const queryList = (pageNo: number) => {
  pageParams.pageNo = pageNo
  getArticleList(pageParams).then((res: any)=> {
    articleDataList.value = res.list
    itemCount.value = res.total
  })
}
queryList(1)

</script>

<style scoped>
.data-list {

}
.article{
  border-bottom: 1px solid rgba(137, 107, 52, 0.15);
  padding: 38px 0 28px;
}
.article-img {
  width: 260px;
  height: 165px;
  border-radius: 8px;
}
.article-title{
  width: 859px;
  height: 92px;
  line-height: 45px;
  color: rgba(51, 51, 51, 1);
  font-size: 20px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-footer {
  font-size: 14px;
  color: #9A9A9A;
}
.nav {
  border-bottom: 1px solid rgba(137, 107, 52, 0.15);
}
</style>
