<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space>
            <el-button text @click="$router.back()">← 返回</el-button>
            <span>{{ detail.title || '文章详情' }}</span>
          </el-space>
        </div>
      </template>

      <div v-loading="loading">
        <template v-if="detail.aid">
          <div v-if="detail.subtitle" style="text-align:center;color:#606266;font-size:14px;margin-bottom:8px">
            {{ detail.subtitle }}
          </div>
          <div class="article-meta">
            <span>作者：{{ detail.pubUser || '-' }}</span>
            <span>分类：{{ detail.cateId }}</span>
            <span>发布日期：{{ detail.pubDate || '-' }}</span>
            <span>点击量：{{ detail.viewCount || 0 }}</span>
          </div>
          <div style="margin:12px 0">
            <el-tag size="small" :type="detail.status === '1' ? 'success' : 'info'" style="margin-right:8px">
              {{ statusLabel(detail.status) }}
            </el-tag>
            <el-tag size="small" :type="detail.pubPlatform === 'weixin' ? 'success' : 'info'" style="margin-right:8px">
              {{ detail.pubPlatform === 'weixin' ? '微信' : 'PC' }}
            </el-tag>
            <el-tag size="small" :type="detail.type === 'link' ? 'warning' : ''">
              {{ detail.type === 'link' ? '链接' : '图文' }}
            </el-tag>
          </div>
          <div v-if="detail.keyword" style="color:#909399;font-size:13px;margin-bottom:12px">
            关键字：{{ detail.keyword }}
          </div>
          <div v-if="detail.thumbnail" style="margin-bottom:16px">
            <img :src="detail.thumbnail" style="max-width:100%;max-height:300px;border-radius:4px" />
          </div>
          <el-divider />
          <div class="article-content" v-html="detail.content || '文章内容加载中...'"></div>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script setup name="CmsDetail">
import { getArticleDetail } from '@/api/slgc/cms/index'

const route = useRoute()
const loading = ref(true)
const detail = ref({})

function statusLabel(status) {
  const map = { '0': '草稿', '1': '已发布', '2': '已撤回', '3': '已删除' }
  return map[status] || '未知'
}

onMounted(() => {
  const id = route.query.id
  if (id) {
    loading.value = true
    getArticleDetail(id).then(res => {
      detail.value = res.data || {}
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  } else {
    loading.value = false
  }
})
</script>

<style scoped>
.card-header { font-weight: 600; font-size: 16px; }
.article-meta { display: flex; gap: 24px; color: #999; font-size: 14px; }
.article-content { font-size: 15px; line-height: 1.8; color: #333; }
</style>
