---
import Layout from "../../layouts/Layout.astro";
import { getConfig } from "../../../utils/config";
import { newsDetail } from "../../../utils/rpc";
import Breadcrumb from "../../components/Breadcrumb.astro";
const { slug } = Astro.params;
const config = getConfig(Astro);
const requestUrl = Astro.request.url;
const breadcrumb = [{title: '资讯', link: '/news'},{title: '教程', link: '/news/tech'}, {title: '正文', link: ''}]
if (!slug) {
  return Astro.redirect("/404");
}

if (slug == "seo_tech") {
  return Astro.rewrite("/");
}

const { code, data } = await newsDetail(slug, config);
if (!data || code !== 0) {
  return Astro.redirect("/404");
}
---

<Layout
  desc={data.description}
  keywords={data.keywords}
  title={`${data.title} - ${config.app_name}`}
>
  <div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
  <div class="html-text-component parbase">
    <div
      class="v4 n06-news-second-navigation"
      id="news-second-navigation-v4"
      data-component="n06-news-second-navigation"
    >
      <div class="product-tabs-wrap container">
        <div class="product-tabs__heading">
          <div class="product-tabs__title body-medium">
            <!-- <a title={TP2_COLUMN_NEWS} href={TP2_COLUMN_NEWS_URL} class="product-link product-link__active">{TP2_COLUMN_NEWS}</a> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <main class="news-main">
    <div class="news-container">
      <Breadcrumb data={breadcrumb} />
      <header>
        <h1 class="title" title={data.title}>{data.title}</h1>
        <span>{data.created_at}</span>
        <a href={data.column_tag_url}
          ><span class="label label-success">{data.column_tag}</span></a
        >
      </header>
      <article class="news-detail-content">
        <div class="top-icon"></div>
        <Fragment set:html={data.content} />
      </article>
      <div>
        <p>原文地址：<a href={`/news/${data.id}`}>{requestUrl}</a></p>
      </div>

      <div class="top-icon"></div>
      <div class="news-navigation">
        {
          data.prevNews && (
            <div>
              <span>上一篇: </span>
              <a
                class="news-prev news-link"
                title={data.prevNews.title}
                href={`/news/${data.prevNews.id}`}
              >
                {data.prevNews.title}
              </a>
            </div>
          )
        }
        {
          data.nextNews && (
            <div>
              <span>下一篇: </span>
              <a
                class="news-next news-link"
                title={data.nextNews.title}
                href={`/news/${data.nextNews.id}`}
              >
                {data.nextNews.title}
              </a>
            </div>
          )
        }
      </div>
    </div>
    <aside class="news-sidebar">
      <div class="related-news">
        <h3>相关推荐</h3>
        <ul>
          {
            data.about.map((item) => (
              <li>
                <a
                  class="news-link"
                  title={item.title}
                  href={`/news/${item.id}`}
                >
                  <span class="related-title">{item.title}</span>
                </a>
              </li>
            ))
          }
        </ul>
      </div>
    </aside>
  </main>
</Layout>
<style is:inline>
  @media (min-width: 1200px) and (max-width: 1500px) {
    .header_full_banner {
      padding-left: 125px;
    }
  }
  .news-content img {
    max-width: 100%;
    height: auto;
  }

  article {
    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    p,
    ol > li,
    ul > li
    {
      font:
        14px Helvetica Neue,
        Helvetica,
        PingFang SC,
        Tahoma,
        Arial,
        sans-serif;
      /* text-indent: unset !important; */
      /* margin: 15px; */
      /* margin-top: 0.5rem; */
      /* margin-bottom: unset; */
      letter-spacing: .5px;
      line-height: 32px;
      margin-bottom: 15px;
      font-size: 16px;
      line-height: 32px;
      margin-bottom: 24px;
      text-align: justify;
      color: #3b3b3b;
      font-weight: 400;
      word-break: break-word;
    }

    h1 {
      display: block;
      font-size: 2em;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
    }

    h2 {
      display: block;
      font-size: 1.5em;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
    }

    h3 {
      display: block;
      font-size: 1.17em;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
    }
    h4 {
      display: block;
      margin-block-start: 1.33em;
      margin-block-end: 1.33em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
    }
    h5 {
      display: block;
      font-size: 0.83em;
      margin-block-start: 1.67em;
      margin-block-end: 1.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
    }

    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      unicode-bidi: isolate;
    }

  }

  article h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4 {
    font-weight: 700;
  }

  .breadcrumb {
    border-bottom: none !important;
    padding: unset !important;
  }

  header > h1 {
    margin: unset;
  }
</style>
<style>
  .related-news > h3:after {
    content: "";
    width: 70px;
    height: 1px;
    background: #e94c3d;
    position: absolute;
    left: 0;
    bottom: -1px;
  }
  .related-news > h3 {
    padding-bottom: 10px;
    margin: unset;
    border-bottom: 1px solid #ebebeb;
    font-size: 15px;
    position: relative;
  }
  .news-main {
    display: grid;
    flex-direction: row;
    grid-template-columns: 4fr 1.5fr;
    gap: 1rem;
  }

  @media (max-width: 1024px) {
    .news-main {
      display: flex;
      flex-direction: column;
    }
  }

  .top-icon {
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .news-date {
    font-weight: 700;
    font-size: 14px;
    color: #d0021b;
    line-height: 17px;
    margin-bottom: 30px;
    display: inline-block;
  }

  .news-meta {
    border-bottom: 1px solid var(--text-primary);
    color: black;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .title {
    font-size: 1.5rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    margin-top: 0.8rem;
    /* line-height: 1.4; */
  }

  .news-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
  }

  .news-meta span {
    color: var(--text-primary);
  }

  .news-author a {
    color: black;
    text-decoration: none;
  }
  /* 
    .news-date::before {
      content: '📅';
    }

    .news-author::before {
      content: '👤';
    } */

  .news-tags {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .news-tag {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }

  .news-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
  }

  .news-container {
    max-width: 1200px;
    padding: 1.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
  }

  .news-detail-content {
    border-right: 1px solid var(--text-primary);
    /* padding: 3rem; */
    position: relative;
    overflow: hidden;
  }

  .news-content {
    padding-top: 3rem;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .news-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .news-images img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
  }

  .news-images img:hover {
    transform: scale(1.02);
  }

  .news-content p {
    margin-bottom: 1.8rem;
  }

  .news-content p:last-child {
    margin-bottom: 0;
  }

  .news-navigation {
    margin-top: 1rem;
    border-top: 1px solid var(--divider-color);
  }

  .news-sidebar {
    padding: 1.5rem;
    /* position: sticky; */
    top: 2rem;
    height: fit-content;
    background-color: #ffffff;
  }

  .related-news ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .related-news li {
    /* margin-bottom: 1.2rem;
      padding-bottom: 1.2rem; */
    border-bottom: 1px solid var(--divider-color);
  }

  .related-news li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .related-news a {
    color: #000000;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.2rem;
    border-radius: var(--radius-md);
  }

  .related-news a:hover {
    transform: translateX(5px);
  }

  .related-title {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .related-date {
    font-size: 0.9rem;
    color: var(--text-tertiary);
  }

  @media (max-width: 1024px) {
    .news-sidebar {
      position: static;
    }
  }

  @media (max-width: 480px) {
    .news-detail-content {
      border: none;
    }

    .news-share {
      flex-wrap: wrap;
      gap: 0.8rem;
    }

    .share-btn {
      width: 100%;
      text-align: center;
    }
  }
</style>
