<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">
          <!-- 文章标题 -->
          <h1 v-if="detail.title" class="article-title" :style="{ color: detail.titleColor || '#303133' }">
            {{ detail.title }}
          </h1>

          <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>分类：{{ getCateName(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="platformTagType(detail.pubPlatform)" style="margin-right:8px">
              {{ platformLabel(detail.pubPlatform) }}
            </el-tag>
            <el-tag size="small" :type="detail.type === 'link' ? 'warning' : ''">
              {{ detail.type === 'link' ? '链接' : '图文' }}
            </el-tag>
          </div>

          <!-- 工具栏：字号切换 + 打印 + 分享 -->
          <div class="article-toolbar">
            <el-space>
              <span style="color:#909399;font-size:13px">字号：</span>
              <el-button size="small" :type="fontSize === 'small' ? 'primary' : 'info'" text @click="fontSize = 'small'">小</el-button>
              <el-button size="small" :type="fontSize === 'medium' ? 'primary' : 'info'" text @click="fontSize = 'medium'">中</el-button>
              <el-button size="small" :type="fontSize === 'large' ? 'primary' : 'info'" text @click="fontSize = 'large'">大</el-button>
            </el-space>
            <el-space>
              <el-button size="small" @click="handlePrint">
                <el-icon><Printer /></el-icon> 打印
              </el-button>
              <el-button size="small" @click="shareToWeibo">微博</el-button>
              <el-button size="small" @click="shareToWechat">微信</el-button>
              <el-button size="small" @click="shareToQQ">QQ</el-button>
            </el-space>
          </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" :class="'fs-' + fontSize" v-html="detail.content || '文章内容加载中...'"></div>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script setup name="CmsDetail">
import { getArticleDetail, getCateTree } from '@/api/slgc/cms/index'
import { Printer } from '@element-plus/icons-vue'

const route = useRoute()
const loading = ref(true)
const detail = ref({})
const cateTreeData = ref([])
const fontSize = ref('medium')

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

function platformLabel(val) {
  const map = { '1': 'PC', '2': '微信', '3': 'PC + 微信' }
  return map[val] || val || '-'
}

function platformTagType(val) {
  const map = { '1': 'info', '2': 'success', '3': '' }
  return map[val] || 'info'
}

/** 获取分类名称（从树形数据中查找） */
function getCateName(cateId) {
  if (!cateId) return '-'
  const flatMap = {}
  function walk(nodes) {
    if (!nodes) return
    for (const n of nodes) {
      flatMap[n.cateId] = n.cateName
      if (n.children) walk(n.children)
    }
  }
  walk(cateTreeData.value)
  return flatMap[cateId] || cateId
}

function handlePrint() {
  window.print()
}

function shareToWeibo() {
  const url = encodeURIComponent(window.location.href)
  const title = encodeURIComponent(detail.value.title || '')
  window.open(`https://service.weibo.com/share/share.php?url=${url}&title=${title}`, '_blank')
}

function shareToWechat() {
  // 微信分享通常通过二维码，这里弹出提示
  ElMessage.info('请使用微信扫描页面二维码分享')
}

function shareToQQ() {
  const url = encodeURIComponent(window.location.href)
  const title = encodeURIComponent(detail.value.title || '')
  window.open(`https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}`, '_blank')
}

onMounted(() => {
  // 加载分类树
  getCateTree().then(res => {
    cateTreeData.value = res.data || []
  })

  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-title { font-size: 22px; font-weight: 600; margin: 0 0 12px; text-align: center; }
.article-meta { display: flex; gap: 24px; color: #999; font-size: 14px; }
.article-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 4px;
}
.article-content { font-size: 15px; line-height: 1.8; color: #333; }
.article-content.fs-small { font-size: 13px; }
.article-content.fs-medium { font-size: 15px; }
.article-content.fs-large { font-size: 18px; }
</style>
