<script setup lang="ts">
let pageTitle: any = ref("News Details - Shenzhen Hotking Electronics Co., Ltd.");
useHead(() => ({
  title: pageTitle.value,
}));
import banner from "@/assets/img/about-us/banner.png";
import { useAll } from "~/api/pubAll/service";
const route = useRoute();
const { getContent, getNewsDetail, getPreNext } = useAll();
let newDetail: any = ref({});
let newNext: any = ref([]);
let total: any = ref(0);
let query: any = ref({
  id: route.query.id,
  language: 2,
  type: route.query.type,
});
if (route.query.id) {
  query.value.id = route.query.id;
}
async function getDetail() {
  let res: any = await getNewsDetail(query.value.id);
  setData(res);
}
async function getPreNextFun() {
  let res: any = await getPreNext(query.value.id);
  setData2(res);
}
watch(
  () => route.query.id,
  async (newValue: any, oldValue: any) => {
    query.value.id = route.query.id;
    await Promise.all([
      getDetail(), // 刷新新闻详情
      getPreNextFun(), // 刷新上下篇
    ]);
    window?.scrollTo({
      top: 0,
      behavior: "smooth", // 平滑滚动
    });
  },
  { deep: true }
);
function setData(res: any) {
  if (res.httpCode == 200) {
    newDetail.value = res?.data;
  }
}
function setData2(res: any) {
  if (res.httpCode == 200) {
    newNext.value = res?.data;
  }
}
onMounted(() => {
  getDetail(); // 刷新新闻详情
  getPreNextFun(); // 刷新上下篇
});
</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;> News&nbsp;>
          {{ query.type == 40 ? "Company News" : "Industry News" }}&nbsp;>
          {{ newDetail.title }}
        </div>
      </div>
      <div class="container">
        <div class="news-details" v-if="newDetail.title">
          <div class="content auto">
            <h2 class="title">{{ newDetail.title }}</h2>
            <div class="other">
              <span>Date: {{ newDetail.updateTime }}</span><span>Source: This Site</span>
            </div>
            <div class="info ql-editor" v-html="newDetail.content"></div>
            <div class="news-page-wrap clearfix">
              <NuxtLink class="fl" v-if="newNext[0]" :to="{
                  path: '/news/detail',
                  query: { id: newNext[0].id, type: query.type },
                }">Previous: {{ newNext[0].title }}</NuxtLink>
              <NuxtLink class="fr" v-if="newNext[1]" :to="{
                  path: '/news/detail',
                  query: { id: newNext[1].id, type: query.type },
                }">Next: {{ newNext[1].title }}</NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-width {
  margin: 0 auto;
  max-width: 1200px;
  width: 90%;
  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: 1200px;
  width: 90%;
  margin: 0 auto;
  min-height: 300px;
  .news-details {
    background: #f5f5f5;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 100%;

    .content {
      background: #fff;
      padding: 60px 20px;

      .title {
        color: #333333;
        font-size: 32px;
        text-align: center;
        font-weight: bold;
        line-height: 48px;
        margin-bottom: 30px;
      }

      .other {
        font-size: 14px;
        text-align: center;
        margin-bottom: 30px;
      }

      .info {
        padding: 30px 0;
        border-top: 1px solid #f5f5f5;

        img {
          display: block;
          margin: 0 auto;
        }
      }

      .news-page-wrap {
        display: flex;
        justify-content: space-between;
        a {
          width: 440px;
          height: 50px;
          line-height: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          border: 1px solid #ddd;
          border-radius: 3px;
          padding: 0 20px;
          transition: all 0.1s ease 0s;

          &:hover {
            border-color: #e6252c;
            background: #e6252c;
            color: #fff;
            box-shadow: 0 5px 10px rgba($color: #e6252c, $alpha: 0.3);
          }
        }
      }
    }
  }
}
</style>
