<template>
  <view class="container">
    <!-- 加载中 -->
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>

    <block v-else-if="article">
      <!-- 封面图 -->
      <image v-if="article.image" :src="article.image" class="cover-image" mode="aspectFill" />

      <!-- 内容区 -->
      <view class="content-wrap">
        <text class="article-title">{{ article.title }}</text>

        <view class="meta-row">
          <text class="meta-text">{{ article.author || '健康科普' }}</text>
          <text class="meta-dot">·</text>
          <text class="meta-text">{{ article.create_time }}</text>
          <text class="meta-dot">·</text>
          <text class="meta-text">{{ article.click }} 阅读</text>
        </view>

        <!-- 富文本内容 -->
        <rich-text :nodes="article.content" class="article-content" />
      </view>
    </block>

    <!-- 加载失败 -->
    <view v-else class="empty-wrap">
      <text class="empty-text">文章不存在或已下架</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const article = ref(null)
const loading = ref(false)

const fetchDetail = async (id) => {
  loading.value = true
  try {
    const response = await proxy.apiUrl({
      url: '/api/article/detail',
      method: 'GET',
      data: { id }
    })
    if (response && response.code === 1) {
      article.value = response.data
    }
  } catch (error) {
    console.error('获取文章详情失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const id = currentPage?.options?.id
  if (id) fetchDetail(id)
})
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

.loading-wrap, .empty-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 200rpx;
}

.loading-text, .empty-text {
  font-size: 28rpx;
  color: #999;
}

.cover-image {
  width: 100%;
  height: 420rpx;
  display: block;
}

.content-wrap {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  margin-top: -24rpx;
  padding: 40rpx 32rpx 60rpx;
  min-height: calc(100vh - 396rpx);
}

.article-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 1.5;
  display: block;
  margin-bottom: 24rpx;
}

.meta-row {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.meta-text {
  font-size: 24rpx;
  color: #999;
}

.meta-dot {
  font-size: 24rpx;
  color: #ccc;
  margin: 0 12rpx;
}

.article-content {
  font-size: 30rpx;
  color: #333;
  line-height: 1.8;
}
</style>
