<template>
  <div class="articles-page">
    <BackNav />
    <div class="article-list">
      <div v-for="a in articles" :key="a.id" class="article-card" @click="$router.push(`/articles/${a.id}`)">
        <div class="article-cover" v-if="a.cover_image">
          <img :src="getImageUrl(a.cover_image)" alt="" />
        </div>
        <div class="article-body">
          <div class="article-header">
            <el-tag v-if="a.is_pinned" type="danger" size="small">置顶</el-tag>
            <h3>{{ a.title }}</h3>
          </div>
          <p class="article-summary">{{ a.summary || a.content?.slice(0, 100) }}</p>
          <span class="article-time">{{ formatDate(a.created_at) }}</span>
        </div>
      </div>
    </div>
    <el-empty v-if="!articles.length && !loading" />
    <div class="pagination-wrap" v-if="total > pageSize">
      <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next" @current-change="fetchArticles" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { articleApi } from '../../api'
import { getImageUrl } from '../../utils/image'
import BackNav from '../../components/BackNav.vue'

const articles = ref<any[]>([])
const page = ref(1)
const pageSize = 10
const total = ref(0)
const loading = ref(false)

async function fetchArticles() {
  loading.value = true
  const res: any = await articleApi.list({ page: page.value, page_size: pageSize })
  articles.value = res.data || []
  total.value = res.pagination?.total || 0
  loading.value = false
}

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(fetchArticles)
</script>

<style scoped lang="scss">
.articles-page { padding: 0; }
.article-list { display: flex; flex-direction: column; gap: 16px; }
.article-card {
  background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s; display: flex;
  &:hover { transform: translateY(-2px); border-color: rgba(78, 110, 242, 0.3); }
}
.article-cover { width: 200px; min-height: 140px; background: rgba(255, 255, 255, 0.04); img { width: 100%; height: 100%; object-fit: cover; } }
.article-body { flex: 1; padding: 20px; }
.article-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; h3 { font-size: 18px; font-weight: 600; color: #fff; } }
.article-summary { color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.article-time { color: rgba(255, 255, 255, 0.3); font-size: 13px; }
.pagination-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.pagination-wrap :deep(.el-pagination) {
  --el-pagination-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-text-color: rgba(255, 255, 255, 0.6);
  --el-pagination-button-disabled-bg-color: rgba(255, 255, 255, 0.04);
  --el-pagination-button-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-hover-color: #4e6ef2;
}

.pagination-wrap :deep(.el-pagination .el-pager li) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  margin: 0 4px;
}

.pagination-wrap :deep(.el-pagination .el-pager li:hover),
.pagination-wrap :deep(.el-pagination .el-pager li.is-active) {
  background: #4e6ef2;
  color: #fff;
}

.pagination-wrap :deep(.el-pagination .btn-prev),
.pagination-wrap :deep(.el-pagination .btn-next) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.pagination-wrap :deep(.el-pagination .btn-prev:hover),
.pagination-wrap :deep(.el-pagination .btn-next:hover) {
  background: rgba(78, 110, 242, 0.2);
  color: #4e6ef2;
}
</style>
