<template>
  <div class="article-detail-page">
    <BackNav />
    <div v-if="article" class="detail-card">
      <div class="article-meta">
        <el-tag v-if="article.is_pinned" type="danger" size="small">置顶</el-tag>
        <span class="article-time">{{ formatDate(article.created_at) }}</span>
      </div>
      <h1 class="article-title">{{ article.title }}</h1>
      <div class="article-content" v-html="article.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { articleApi } from '../../api'
import BackNav from '../../components/BackNav.vue'

const route = useRoute()
const article = ref<any>(null)

function formatDate(date: string) {
  if (!date) return '-'
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(async () => {
  const res: any = await articleApi.getById(Number(route.params.id))
  article.value = res.data
})
</script>

<style scoped lang="scss">
.article-detail-page { padding: 0; }
.article-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.article-time { color: rgba(255, 255, 255, 0.4); font-size: 14px; }
.article-title { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1.4; }
.detail-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 24px; }
.article-content { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, 0.8); }
</style>
