<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('product') }}
        </NBreadcrumbItem>
      </NBreadcrumb>
    </div>

    <!-- 文章列表-->
    <div class="w-1440">
      <div class="w-1200">
        <NuxtLink v-for="item in  articleDataList" :to="localePath('/product-detail/' + item.id)" class="product flex justify-between py-8">
          <div class="flex">
            <img class="product-img" :src="item.picUrl"/>
            <div class="ml-8">
              <p class="product-title">{{locale == 'zh'?item.title: item.titleEn}}</p>
              <p class="product-content">{{locale == 'zh'?item.content: item.contentEn}}</p>
              <p class="product-desc"><span style="color: #906D2C;">{{item.viewsCount}}</span> {{$t('viewsCount')}} <span class="pl-4">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</span></p>
            </div>
          </div>
          <p class="btn-detail">{{$t('detail')}}</p>
        </NuxtLink>
      </div>
    </div>
  </div>
<!-- 分页-->
  <div class="flex justify-center py-8">
    <NPagination
        :item-count="itemCount"
        @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: 30
}
const itemCount = ref(0)
const articleDataList = ref<any[]>([])
const queryList = (pageNo: number) => {
  pageParams.pageNo = pageNo
  getArticleList(pageParams).then((res: any)=> {
    if(process.client) {
      res.list.forEach(item => {
        // 创建一个临时的div元素
        var tempDiv = document.createElement('div');

        tempDiv.innerHTML = item.content;
        var plainText = tempDiv.textContent;
        item.content = plainText

        tempDiv.innerHTML = item.contentEn;
        plainText = tempDiv.textContent;
        item.contentEn = plainText

      })
    }
    articleDataList.value = res.list
    itemCount.value = res.total
  })
}
queryList(1)
</script>

<style scoped>
.data-list {

}

.btn-detail {
  width: 60px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(229, 203, 152, 1) 0%, rgba(250, 235, 201, 1) 100%);
  color: rgba(137, 107, 52, 1);
  font-size: 12px;
  text-align: center;
}

.product-title {
  font-size: 20px;
  color: #333333;
  width: 420px;
}

.product-content {
  font-size: 16px;
  color: #6C6C6C;
  height: 40px;
  line-height: 20px;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 420px;

}

.product-desc {
  font-size: 12px;
  color: #999999;
  width: 420px;

}

.product-img {
  width: 200px;
  height: 120px;
  object-fit: cover;
}

.product-more {
  color: rgba(229, 203, 152, 1);
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}
.nav {
  border-bottom: 1px solid rgba(137, 107, 52, 0.15);
}
</style>
