<template>
  <div class="page-container">
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 文章头部 -->
      <div class="article-header">
        <h1 class="article-title">{{ article.title }}</h1>
        <div class="article-meta">
          <div class="meta-info">
            <van-icon name="clock-o" /><span class="publish-date">{{ article.publishDate }}</span>
            <van-icon name="manager-o" /><span class="author">{{ article.author }}</span>
          </div>
        </div>
      </div>

      <!-- 文章封面 -->
      <div class="article-cover" v-if="article.coverImage">
        <img :src="article.coverImage" :alt="article.title" />
      </div>

      <!-- 文章内容 -->
      <div class="article-content">
        <div class="content-text" v-html="article.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import dayjs from 'dayjs'

// 导入接口
import { getArticleDetailAPI } from '@/api/index.js'

const route = useRoute()
const router = useRouter()

const commentText = ref('')

// 文章数据
const article = ref({
  id: 1,
  title: '三坛大戒 | 护戒胜福田 成就最上因',
  content: `
    <p>为弘承世尊遗教，光大如来戒法，绍隆佛种，续佛慧命，经研究并报中国佛教协会批复同意（中佛会〔2025〕35号），由江苏省佛教协会主办，苏州市佛教协会、苏州市姑苏区佛教协会、苏州工业园区佛教协会协办，苏州西园戒幢律寺、苏州工业园区积善寺承办的传戒三坛大戒法会定于2025年10月15日至11月15日举办。</p>

    <h3>天增上三学，以戒为首</h3>
    <h3>佛灭度后，以戒为师</h3>

    <p>《梵网经》云："众生受佛戒，即入诸佛位。位同大觉已，真是诸佛子。"传戒法会，具称"千佛三坛大戒法会"，三坛大戒是成就僧人最重要的增上缘仪式，谓授千佛共同所制戒。戒场分非同一般之法会场所，庄妙标有，无过之者。</p>

    <p>今苏州西园戒幢律寺作为主戒场传戒三坛大戒，正值因时，其事庄严，此意成就道场通达。</p>
  `,
  author: '戒幢律寺编辑部',
  publishDate: '2025-10-1',
  viewCount: 2156,
  likeCount: 156,
  isLiked: false,
  isCollected: false,
  coverImage: 'https://images.unsplash.com/photo-1545558014-8692077e9b5c?w=800&h=600&fit=crop',
})

// 组件挂载时加载数据
onMounted(async () => {
  const articleId = route.params.id
  const { code, data } = await getArticleDetailAPI({ i: articleId })
  if (code) {
    article.value = {
      ...data,
      id: data.id,
      title: data.post_title,
      content: data.post_content,
      publishDate: dayjs(data.post_date).format('YYYY-MM-DD HH:mm:ss'),
      author: data.post_author,
      coverImage: data.photo,
    }
  }
})
</script>

<style scoped>
.page-container {
  background: #f5f5f5;
}

.content-container {
  background-color: #F2EBDB;
  min-height: 100vh;
}

.article-header {
  padding: 1rem;
}

.article-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #8b4513;
  line-height: 1.4;
  margin: 0 0 1rem 0;
  text-align: center;
}

.article-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.meta-info {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.publish-date,
.author {
  font-size: 0.875rem;
  color: #8b4513;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.article-cover {
  margin: 1rem 0;
}

.article-cover img {
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.article-content {
  background: #f9f7f4;
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8e3dc;
}

.content-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #5d4e37;
}

.content-text :deep(p) {
  margin: 0 0 1rem 0;
  text-indent: 2em;
}

.content-text :deep(h3) {
  font-size: 1.125rem;
  font-weight: 600;
  color: #8b4513;
  text-align: center;
  margin: 1.5rem 0 1rem 0;
  text-indent: 0;
}

.content-text :deep(p:last-child) {
  margin-bottom: 0;
}
</style>