<template>
  <div class="article-detail-page">
    <div class="mx-auto max-w-screen-xl px-4 py-8">
      <a-row :gutter="[32, 0]">
        <!-- 主内容区 -->
        <a-col :xs="24" :lg="17">
          <!-- 面包屑 -->
          <a-breadcrumb class="mb-6">
            <a-breadcrumb-item><NuxtLink to="/">首页</NuxtLink></a-breadcrumb-item>
            <a-breadcrumb-item v-if="article.categoryPath">
              <NuxtLink :to="article.categoryPath">{{ article.categoryName }}</NuxtLink>
            </a-breadcrumb-item>
            <a-breadcrumb-item>{{ article.title || '文章详情' }}</a-breadcrumb-item>
          </a-breadcrumb>

          <div v-if="loading" class="article-loading">
            <a-skeleton active :paragraph="{ rows: 12 }" />
          </div>

          <div v-else-if="!article.id" class="article-empty">
            <a-result status="404" title="文章不存在" sub-title="您查找的文章不存在或已被删除">
              <template #extra>
                <a-button type="primary" @click="$router.back()">返回上一页</a-button>
              </template>
            </a-result>
          </div>

          <article v-else class="article-container">
            <!-- 封面图 -->
            <div v-if="article.cover" class="article-cover">
              <img :src="article.cover" :alt="article.title" />
            </div>

            <!-- 标题区 -->
            <div class="article-header">
              <div class="article-category-tag" v-if="article.categoryName">
                {{ article.categoryName }}
              </div>
              <h1 class="article-title">{{ article.title }}</h1>
              <div class="article-meta">
                <span class="meta-item" v-if="article.source">
                  <span class="meta-icon">📰</span>来源：{{ article.source }}
                </span>
                <span class="meta-item" v-if="article.author">
                  <span class="meta-icon">✍️</span>{{ article.author }}
                </span>
                <span class="meta-item" v-if="article.publishTime">
                  <span class="meta-icon">🕐</span>{{ article.publishTime }}
                </span>
                <span class="meta-item" v-if="article.views">
                  <span class="meta-icon">👁</span>{{ article.views }} 次阅读
                </span>
              </div>
            </div>

            <!-- 摘要 -->
            <div v-if="article.summary" class="article-summary">
              <div class="summary-label">摘要</div>
              <p>{{ article.summary }}</p>
            </div>

            <!-- 正文 -->
            <div class="article-body" v-html="article.content"></div>

            <!-- 附件下载 -->
            <div v-if="article.attachments && article.attachments.length" class="article-attachments">
              <div class="attachments-title">📎 相关附件</div>
              <div class="attachments-list">
                <a
                  v-for="file in article.attachments"
                  :key="file.url"
                  :href="file.url"
                  target="_blank"
                  class="attachment-item"
                >
                  <span class="attachment-icon">📄</span>
                  <span class="attachment-name">{{ file.name }}</span>
                  <span class="attachment-size">{{ file.size }}</span>
                </a>
              </div>
            </div>

            <!-- 标签 -->
            <div v-if="article.tags && article.tags.length" class="article-tags">
              <span class="tags-label">标签：</span>
              <a-tag v-for="tag in article.tags" :key="tag" color="blue">{{ tag }}</a-tag>
            </div>

            <!-- 声明 -->
            <div class="article-disclaimer">
              <p>声明：本文内容仅代表作者本人观点，不代表本网站立场。如有侵权请联系我们删除。</p>
            </div>

            <!-- 分享 & 上一篇下一篇 -->
            <div class="article-nav">
              <div class="nav-prev" v-if="prevArticle" @click="goArticle(prevArticle)">
                <span class="nav-dir">« 上一篇</span>
                <span class="nav-title">{{ prevArticle.title }}</span>
              </div>
              <div class="nav-next" v-if="nextArticle" @click="goArticle(nextArticle)">
                <span class="nav-title">{{ nextArticle.title }}</span>
                <span class="nav-dir">下一篇 »</span>
              </div>
            </div>
          </article>
        </a-col>

        <!-- 侧栏 -->
        <a-col :xs="0" :lg="7" class="hidden lg:block">
          <div class="sidebar">
            <!-- 相关文章 -->
            <div class="sidebar-card">
              <div class="sidebar-title">相关文章</div>
              <div class="related-list">
                <div
                  v-for="item in relatedArticles"
                  :key="item.id"
                  class="related-item"
                  @click="goArticle(item)"
                >
                  <span class="related-dot">›</span>
                  <span class="related-title">{{ item.title }}</span>
                </div>
                <div v-if="!relatedArticles.length" class="related-empty">暂无相关文章</div>
              </div>
            </div>

            <!-- 热门推荐 -->
            <div class="sidebar-card mt-6">
              <div class="sidebar-title">热门推荐</div>
              <div class="related-list">
                <div
                  v-for="item in hotArticles"
                  :key="item.id"
                  class="related-item hot-item"
                  @click="goArticle(item)"
                >
                  <span class="hot-rank">{{ item.rank }}</span>
                  <span class="related-title">{{ item.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'

const route = useRoute()
const router = useRouter()
const articleId = computed(() => route.params.id as string)

const loading = ref(true)
const article = ref<any>({})
const prevArticle = ref<any>(null)
const nextArticle = ref<any>(null)
const relatedArticles = ref<any[]>([])
const hotArticles = ref<any[]>([
  { id: 1, title: '广西数字经济发展报告（2024）', rank: 1 },
  { id: 2, title: '自治区关于优化营商环境的实施意见', rank: 2 },
  { id: 3, title: '面向东盟的产业合作政策解读', rank: 3 },
  { id: 4, title: '广西乡村振兴战略实施进展报告', rank: 4 },
  { id: 5, title: '北部湾经济区发展最新动态', rank: 5 },
])

useHead({
  title: computed(() => `${article.value?.title || '文章详情'} - 决策咨询网`),
  meta: [
    { name: 'description', content: computed(() => article.value?.summary || '') },
  ]
})

async function loadArticle() {
  loading.value = true
  try {
    // TODO: 接入实际API
    // const res = await getArticleDetail(articleId.value)
    // article.value = res
    // prevArticle.value = res.prev
    // nextArticle.value = res.next
    // relatedArticles.value = res.related || []
    
    // 模拟数据
    article.value = {
      id: articleId.value,
      title: '广西自治区党委政府关于加快数字经济发展的实施意见',
      cover: `https://picsum.photos/900/400?random=${articleId.value}`,
      categoryName: '政策要闻',
      categoryPath: '/news',
      source: '广西壮族自治区人民政府',
      author: '政策研究处',
      publishTime: '2024-12-20 09:30:00',
      views: 1286,
      summary: '本意见旨在深入贯彻党中央、国务院关于发展数字经济的战略部署，结合广西实际，加快推进数字产业化和产业数字化，培育壮大数字经济新动能。',
      content: `
        <h2>一、总体要求</h2>
        <p>以习近平新时代中国特色社会主义思想为指导，全面贯彻党的二十大精神，围绕建设数字中国战略部署，立足广西比较优势，坚持创新驱动、数据赋能、融合发展，加快推动数字经济与实体经济深度融合，着力打造面向东盟的数字经济发展高地。</p>
        
        <h2>二、主要目标</h2>
        <p>到2026年，数字经济核心产业增加值占GDP比重达到12%，数字经济总量突破1万亿元，数字化转型企业数量超过5000家，建成5G基站15万座。</p>
        
        <h2>三、重点任务</h2>
        <h3>（一）加快数字基础设施建设</h3>
        <p>系统推进新型基础设施建设，加快5G、大数据中心、工业互联网等数字基础设施部署，构建高速、泛在、天地一体、云网融合、智能敏捷、绿色低碳的新型数字基础设施体系。</p>
        
        <h3>（二）深化数字技术与实体经济融合</h3>
        <p>推动制造业、农业、服务业数字化转型，加快工业互联网创新应用，推进数字农业农村建设，促进数字技术与传统产业深度融合。</p>
        
        <h3>（三）培育壮大数字经济核心产业</h3>
        <p>重点发展软件和信息技术服务业、大数据、云计算、人工智能、区块链等核心产业，打造广西数字经济核心产业集群。</p>
        
        <h2>四、保障措施</h2>
        <p>加强组织领导，完善工作机制，强化政策支持，健全评估体系，确保各项任务落到实处。</p>
      `,
      tags: ['数字经济', '政策解读', '广西'],
      attachments: [
        { name: '广西数字经济发展实施意见（全文）.pdf', url: '#', size: '2.4MB' },
        { name: '附件：实施细则.docx', url: '#', size: '856KB' },
      ]
    }
  } catch (e: any) {
    message.error('加载失败')
  } finally {
    loading.value = false
  }
}

function goArticle(item: any) {
  router.push(`/article/${item.id}`)
}

onMounted(() => {
  loadArticle()
})

watch(articleId, () => {
  loadArticle()
})
</script>

<style scoped>
.article-detail-page {
  background: #f5f7fa;
  min-height: 60vh;
}

.article-loading,
.article-empty {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
}

.article-container {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.article-cover {
  margin: -40px -40px 32px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  height: 320px;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-header {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.article-category-tag {
  display: inline-block;
  padding: 3px 12px;
  background: #1e3a5f;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.article-title {
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.5;
  margin: 0 0 16px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.meta-item {
  font-size: 13px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-icon {
  font-size: 14px;
}

/* 摘要 */
.article-summary {
  background: #f8fafc;
  border-left: 4px solid #1e3a5f;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 32px;
}

.summary-label {
  font-size: 13px;
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: 8px;
}

.article-summary p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.8;
  margin: 0;
}

/* 正文 */
.article-body {
  font-size: 16px;
  color: #374151;
  line-height: 2;
}

.article-body :deep(h2) {
  font-size: 20px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.article-body :deep(h3) {
  font-size: 17px;
  font-weight: 600;
  color: #374151;
  margin: 24px 0 12px;
}

.article-body :deep(p) {
  margin: 0 0 16px;
  text-indent: 2em;
}

.article-body :deep(ul), .article-body :deep(ol) {
  padding-left: 24px;
  margin: 12px 0;
}

.article-body :deep(li) {
  margin: 8px 0;
}

/* 附件 */
.article-attachments {
  margin-top: 32px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
}

.attachments-title {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  transition: all 0.2s;
}

.attachment-item:hover {
  border-color: #1e3a5f;
  color: #1e3a5f;
  background: #f0f7ff;
}

.attachment-size {
  margin-left: auto;
  color: #9ca3af;
  font-size: 12px;
}

/* 标签 */
.article-tags {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tags-label {
  font-size: 13px;
  color: #9ca3af;
}

/* 声明 */
.article-disclaimer {
  margin-top: 32px;
  padding: 12px 16px;
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 6px;
}

.article-disclaimer p {
  font-size: 12px;
  color: #92400e;
  margin: 0;
}

/* 上下篇 */
.article-nav {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.nav-prev, .nav-next {
  flex: 1;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-prev:hover, .nav-next:hover {
  background: #eff6ff;
}

.nav-next {
  text-align: right;
  align-items: flex-end;
}

.nav-dir {
  font-size: 12px;
  color: #9ca3af;
}

.nav-title {
  font-size: 14px;
  color: #1e3a5f;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 侧栏 */
.sidebar {
  position: sticky;
  top: 80px;
}

.sidebar-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1e3a5f;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.related-item:hover {
  background: #f3f4f6;
}

.related-dot {
  color: #1e3a5f;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.related-title {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-empty {
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
  padding: 12px 0;
}

.hot-item {
  align-items: center;
}

.hot-rank {
  width: 22px;
  height: 22px;
  background: #1e3a5f;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hot-item:nth-child(-n+3) .hot-rank {
  background: #dc2626;
}

@media (max-width: 768px) {
  .article-container {
    padding: 20px;
  }

  .article-cover {
    margin: -20px -20px 20px;
  }

  .article-title {
    font-size: 20px;
  }
}
</style>
