<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar title="新闻详情" left-arrow @click-left="$router.back()" class="custom-nav">
      <template #right>
        <van-icon name="share-o" size="18" @click="handleShare" />
      </template>
    </van-nav-bar>
    
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 文章头部 -->
      <div class="article-header">
        <h1 class="article-title">{{ article.title }}</h1>
        <div class="article-meta">
          <div class="meta-info">
            <span class="publish-date">{{ article.publishDate }}</span>
            <span class="author">{{ article.author }}</span>
          </div>
          <div class="article-stats">
            <span class="view-count">
              <van-icon name="eye-o" />
              {{ article.viewCount }}
            </span>
            <span class="like-count" @click="handleLike">
              <van-icon :name="article.isLiked ? 'like' : 'like-o'" :color="article.isLiked ? '#ff6b6b' : '#999'" />
              {{ article.likeCount }}
            </span>
          </div>
        </div>
        
        <!-- 标签 -->
        <div class="article-tags" v-if="article.tags && article.tags.length">
          <van-tag
            v-for="tag in article.tags"
            :key="tag"
            type="primary"
            size="small"
            class="article-tag"
          >
            {{ tag }}
          </van-tag>
        </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 class="article-footer">
        <div class="footer-actions">
          <div class="action-item" @click="handleLike">
            <van-icon :name="article.isLiked ? 'like' : 'like-o'" :color="article.isLiked ? '#ff6b6b' : '#666'" size="20" />
            <span>{{ article.isLiked ? '已赞' : '点赞' }}</span>
          </div>
          <div class="action-item" @click="handleCollect">
            <van-icon :name="article.isCollected ? 'star' : 'star-o'" :color="article.isCollected ? '#fbbf24' : '#666'" size="20" />
            <span>{{ article.isCollected ? '已收藏' : '收藏' }}</span>
          </div>
          <div class="action-item" @click="handleShare">
            <van-icon name="share-o" color="#666" size="20" />
            <span>分享</span>
          </div>
          <div class="action-item" @click="handleComment">
            <van-icon name="chat-o" color="#666" size="20" />
            <span>评论</span>
          </div>
        </div>
      </div>
      
      <!-- 相关文章 -->
      <div class="related-articles" v-if="relatedArticles.length">
        <h3 class="section-title">相关文章</h3>
        <div class="related-list">
          <div
            v-for="related in relatedArticles"
            :key="related.id"
            class="related-item"
            @click="handleRelatedClick(related)"
          >
            <div class="related-cover">
              <img v-if="related.coverImage" :src="related.coverImage" :alt="related.title" />
              <div v-else class="cover-placeholder">
                <van-icon name="photo-o" size="24" color="#ccc" />
              </div>
            </div>
            <div class="related-info">
              <h4 class="related-title">{{ related.title }}</h4>
              <div class="related-meta">
                <span class="related-date">{{ related.publishDate }}</span>
                <span class="related-views">{{ related.viewCount }}阅读</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评论区 -->
      <div class="comments-section">
        <h3 class="section-title">评论 ({{ comments.length }})</h3>
        
        <!-- 评论输入 -->
        <div class="comment-input">
          <van-field
            v-model="commentText"
            type="textarea"
            placeholder="写下你的评论..."
            rows="3"
            maxlength="500"
            show-word-limit
          />
          <van-button
            type="primary"
            size="small"
            @click="handleSubmitComment"
            :disabled="!commentText.trim()"
            class="submit-btn"
          >
            发表
          </van-button>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
          <div
            v-for="comment in comments"
            :key="comment.id"
            class="comment-item"
          >
            <div class="comment-avatar">
              <img v-if="comment.avatar" :src="comment.avatar" :alt="comment.author" />
              <div v-else class="avatar-placeholder">
                <span>{{ comment.author.charAt(0) }}</span>
              </div>
            </div>
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author }}</span>
                <span class="comment-date">{{ comment.date }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
              <div class="comment-actions">
                <span class="comment-like" @click="handleCommentLike(comment)">
                  <van-icon :name="comment.isLiked ? 'like' : 'like-o'" :color="comment.isLiked ? '#ff6b6b' : '#999'" size="14" />
                  {{ comment.likeCount || '' }}
                </span>
                <span class="comment-reply" @click="handleCommentReply(comment)">回复</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <van-empty v-if="comments.length === 0" description="暂无评论，快来抢沙发吧~" />
      </div>
    </div>
  </div>
</template>

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

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

const commentText = ref('')

// 文章数据
const article = ref({
  id: 1,
  title: '三坛大戒传戒法会圆满举行',
  content: `
    <p>2024年春季三坛大戒传戒法会于今日在本寺圆满举行。此次法会历时21天，共有来自全国各地的68位戒子参加，在诸位戒师的慈悲教导下，圆满受持三坛大戒。</p>
    
    <p>三坛大戒是佛教出家众必须受持的重要戒律，包括沙弥戒、比丘戒和菩萨戒三个层次。通过严格的戒律学习和实践，戒子们不仅在戒律知识上有了深入的理解，更在修行品格上得到了显著提升。</p>
    
    <p>在传戒期间，戒子们每日早起晚睡，精进修学。从戒律理论的学习到实际生活中的践行，从个人修持到集体共修，每一个环节都体现了佛教戒律的庄严与神圣。</p>
    
    <p>本次传戒法会得到了十方善信的大力护持，义工菩萨们日夜辛劳，为法会的顺利进行提供了有力保障。在此向所有护持法会的善信表示衷心感谢。</p>
    
    <p>愿诸位新戒比丘能够严持净戒，精进修行，早证菩提，广度众生。愿佛法久住，法轮常转，众生离苦得乐。</p>
  `,
  author: '释智慧法师',
  publishDate: '2024-01-15',
  viewCount: 1256,
  likeCount: 89,
  isLiked: false,
  isCollected: false,
  coverImage: null,
  tags: ['三坛大戒', '传戒法会', '戒律', '修行']
})

// 相关文章
const relatedArticles = ref([
  {
    id: 2,
    title: '戒律学习的重要性与方法',
    publishDate: '2024-01-10',
    viewCount: 856,
    coverImage: null
  },
  {
    id: 3,
    title: '沙弥戒的基本要求与实践',
    publishDate: '2024-01-08',
    viewCount: 642,
    coverImage: null
  },
  {
    id: 4,
    title: '比丘戒的深层含义解析',
    publishDate: '2024-01-05',
    viewCount: 789,
    coverImage: null
  }
])

// 评论数据
const comments = ref([
  {
    id: 1,
    author: '慧心居士',
    content: '随喜赞叹！三坛大戒的传承是佛教的重要传统，愿新戒比丘们都能严持净戒，精进修行。',
    date: '2024-01-15 14:30',
    likeCount: 12,
    isLiked: false,
    avatar: null
  },
  {
    id: 2,
    author: '觉悟行者',
    content: '感恩诸位法师的慈悲教导，戒律是修行的基础，希望能有更多这样的法会。',
    date: '2024-01-15 15:45',
    likeCount: 8,
    isLiked: false,
    avatar: null
  },
  {
    id: 3,
    author: '清净莲花',
    content: '阿弥陀佛！看到这样的法会真是法喜充满，愿佛法久住世间。',
    date: '2024-01-15 16:20',
    likeCount: 5,
    isLiked: false,
    avatar: null
  }
])

// 处理点赞
const handleLike = () => {
  article.value.isLiked = !article.value.isLiked
  if (article.value.isLiked) {
    article.value.likeCount++
    Toast('点赞成功')
  } else {
    article.value.likeCount--
    Toast('取消点赞')
  }
}

// 处理收藏
const handleCollect = () => {
  article.value.isCollected = !article.value.isCollected
  if (article.value.isCollected) {
    Toast('收藏成功')
  } else {
    Toast('取消收藏')
  }
}

// 处理分享
const handleShare = () => {
  Toast('分享功能开发中...')
}

// 处理评论
const handleComment = () => {
  document.querySelector('.comment-input').scrollIntoView({ behavior: 'smooth' })
}

// 处理相关文章点击
const handleRelatedClick = (related) => {
  router.push(`/news/${related.id}`)
}

// 提交评论
const handleSubmitComment = () => {
  if (!commentText.value.trim()) {
    Toast('请输入评论内容')
    return
  }
  
  const newComment = {
    id: Date.now(),
    author: '当前用户',
    content: commentText.value.trim(),
    date: new Date().toLocaleString('zh-CN'),
    likeCount: 0,
    isLiked: false,
    avatar: null
  }
  
  comments.value.unshift(newComment)
  commentText.value = ''
  Toast('评论发表成功')
}

// 处理评论点赞
const handleCommentLike = (comment) => {
  comment.isLiked = !comment.isLiked
  if (comment.isLiked) {
    comment.likeCount = (comment.likeCount || 0) + 1
  } else {
    comment.likeCount = Math.max(0, (comment.likeCount || 0) - 1)
  }
}

// 处理评论回复
const handleCommentReply = (comment) => {
  Toast('回复功能开发中...')
}

// 组件挂载时加载数据
onMounted(() => {
  const articleId = route.params.id
  console.log('Loading article data for ID:', articleId)
  // 这里可以根据ID加载具体的文章数据
})
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #fafafa;
}

.custom-nav {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

.custom-nav :deep(.van-nav-bar__title) {
  color: white;
  font-weight: 600;
}

.custom-nav :deep(.van-icon) {
  color: white;
}

.content-container {
  padding-top: 46px;
}

.article-header {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
}

.article-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin: 0 0 16px 0;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

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

.publish-date,
.author {
  font-size: 14px;
  color: #666;
}

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

.view-count,
.like-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.article-tag {
  background: #e0f2fe !important;
  color: #0277bd !important;
  border: 1px solid #81d4fa !important;
}

.article-cover {
  background: white;
  padding: 0 20px 20px;
  margin-bottom: 12px;
}

.article-cover img {
  width: 100%;
  border-radius: 8px;
}

.article-content {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
}

.content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

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

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

.article-footer {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
  border-top: 1px solid #eee;
}

.footer-actions {
  display: flex;
  justify-content: space-around;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.action-item:active {
  background: #f5f5f5;
}

.action-item span {
  font-size: 12px;
  color: #666;
}

.related-articles {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  padding-left: 4px;
  border-left: 4px solid #3b82f6;
}

.related-list {
  space-y: 12px;
}

.related-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 12px;
}

.related-item:active {
  background: #f5f5f5;
}

.related-cover {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f5;
}

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

.cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.related-info {
  flex: 1;
}

.related-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-meta {
  display: flex;
  gap: 12px;
}

.related-date,
.related-views {
  font-size: 12px;
  color: #999;
}

.comments-section {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
}

.comment-input {
  margin-bottom: 20px;
  position: relative;
}

.submit-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.comments-list {
  space-y: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

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

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.comment-date {
  font-size: 12px;
  color: #999;
}

.comment-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.comment-like,
.comment-reply {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}

.comment-reply:hover {
  color: #3b82f6;
}
</style>