<script setup lang="ts">
let pageTitle: any = ref("Applications - Shenzhen Hotking Electronics Co., Ltd.");
useHead(() => ({
  title: pageTitle.value,
}));
import { useAll } from "~/api/pubAll/service";
const route = useRoute();
const { getContent, getNewsList } = useAll();
let pageData: any = ref([]);
let total: any = ref(0);
let query: any = ref({
  current: route.query.current || 1,
  records: [{ cid: 205, language: 2 }],
  size: route.query.size || 6,
});
const pageSizes = [6, 12, 24, 48];
if (route.query.current && route.query.size) {
  query.value.current = parseInt(route.query.current as any);
  query.value.size = parseInt(route.query.size as any);
}
console.log(query.value);
const { data: ssrGetNewsList, refresh } = await useAsyncData<any>(
  "getNewsListasdas",
  () => getNewsList(query.value)
);

watch(
  () => route.query.type,
  async (newValue: any, oldValue: any) => {
    query.value.current = parseInt(route.query.current as any) || 1;
    query.value.size = parseInt(route.query.size as any) || 6;
    query.value.records[0].cid = 205;
    await Promise.all([refresh()]);

    setData(ssrGetNewsList.value);
  },
  { deep: true }
);

setData(ssrGetNewsList.value);

function setData(res: any) {
  if (res.httpCode == 200) {
    total.value = res?.data?.total;
    pageData.value = res?.data?.records;
  }
}
function doQuery() {
  const q = JSON.parse(JSON.stringify(query.value));
  navigateTo({
    path: "/application",
    query: {
      type: route.query.type,
      current: q.current as any,
      size: q.size as any,
    },
  });
  refresh();
  setData(ssrGetNewsList.value);
  window.scrollTo({
    top: 0,
    behavior: "smooth", // 平滑滚动
  });
}

function filterTime(val: string) {
  return val.substring(0, 16);
}
</script>
<template>
  <div class="page-wrapper">
    <div class="page-main">
      <section class="section banner-wrap" style="margin-bottom: 0;">
      </section>
      <!-- 面包屑 -->
      <div class="breadcrumb-wrap section">
        <div class="breadcrumb">
          Current Location: <NuxtLink to="/">Home</NuxtLink>&nbsp;> Applications
        </div>
      </div>
      <div class="container">
        <h1 class="news-section-title">Applications</h1>
        <div class="news-list">
          <!-- 新闻项1 -->
          <NuxtLink class="news-item" v-for="item in pageData" :key="item.id" :to="{path:'/application/detail',query:{id:item.id,type:query.records[0].cid}}">
            <img :src="item.img" :alt="item.title" class="news-cover" />
            <div class="news-content">
              <div class="news-date">{{filterTime(item.updateTime)}}</div>
              <h3 class="news-title">{{item.title}}</h3>
              <p class="news-desc">{{item.description}}</p>
            </div>
          </NuxtLink>
          <div class="pagination-wrap f-c-fe w100_ mb100 mt40">
            <el-pagination v-model:current-page="query.current" v-model:page-size="query.size" background layout="total, sizes, prev, pager, next" :total="total" :page-sizes="pageSizes" @current-change="doQuery" @size-change="doQuery" :hide-on-single-page="true" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-width {
  margin: 0 auto;
  max-width: 1600px;
  padding: 0px;
}
.banner-wrap {
  height: 350px;
  width: 100%;
  position: relative;
  background: url(@/assets/img/news/newsBanner.png) no-repeat center center;
  background-size: auto 350px;
  position: relative;
}

/* 面包屑 */
.breadcrumb-wrap {
  box-shadow: 0 5px 20px #f9f9f9;
}
.container {
  max-width: 1600px;
  margin: 0 auto;
  .news-section-title {
    text-align: center;
    margin: 30px 0;
    font-size: 30px;
    color: #333;
    font-weight: bold;
  }
  /* 新闻列表容器 */
  .news-list {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  /* 单个新闻项 */
  .news-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
  }
  .news-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  /* 新闻封面图 */
  .news-cover {
    width: 240px;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
  }
  /* 新闻内容区 */
  .news-content {
    flex: 1;
    min-width: 0;
  }
  /* 新闻时间 */
  .news-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #ff4d4f;
    margin-bottom: 8px;
  }
  .news-date::before {
    content: "📅";
    font-size: 16px;
  }
  /* 新闻标题 */
  .news-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 新闻摘要 */
  .news-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>
