<script setup lang="ts">
/**
 * C 端文章卡片：对齐 PC Blog 列表信息结构（分类/日期、标题、摘要、作者头像、标签、CTA）。
 */
import { computed } from 'vue'
import type { Post } from '@/api'
import { resolveMediaUrl } from '@/utils/request'

const props = defineProps<{
  post: Post
}>()

const emit = defineEmits<{
  click: []
}>()

const DEFAULT_AVATAR = '/static/default-avatar.svg'

const avatarSrc = computed(() => {
  const raw = props.post.userAvatar
  if (!raw) return DEFAULT_AVATAR
  return resolveMediaUrl(String(raw)) || DEFAULT_AVATAR
})

const summaryText = computed(() =>
  String(props.post.summary || props.post.excerpt || '').trim(),
)

const metaLine = computed(() => {
  const cat = props.post.categoryName || ''
  const date = props.post.date || ''
  if (cat && date) return `${cat} · ${date}`
  return cat || date || ''
})

const tagNames = computed(() => {
  const tags = props.post.tags
  if (!Array.isArray(tags)) return [] as string[]
  return tags.map(t => (typeof t === 'string' ? t : t?.name)).filter(Boolean) as string[]
})
</script>

<template>
  <view class="art-card art-card-press card" @click="emit('click')">
    <text v-if="metaLine" class="font-mono-label text-art-muted">{{ metaLine }}</text>
    <text class="title">{{ post.title }}</text>
    <text v-if="summaryText" class="summary text-art-muted">{{ summaryText }}</text>
    <view v-if="post.userName" class="author">
      <image class="avatar" :src="avatarSrc" mode="aspectFill" />
      <text class="name">{{ post.userName }}</text>
    </view>
    <view v-if="tagNames.length" class="tags">
      <text v-for="t in tagNames" :key="t" class="tag text-art-muted">#{{ t }}</text>
    </view>
    <text class="cta text-art-accent">阅读全文 →</text>
  </view>
</template>

<style scoped lang="scss">
.card {
  padding: 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}
.title {
  font-size: 36rpx;
  color: rgb(var(--art-text));
  font-family: 'Playfair Display', serif;
  line-height: 1.35;
}
.summary {
  font-size: 26rpx;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.author {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 4rpx;
}
.avatar {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.15);
}
.name { font-size: 24rpx; color: rgb(var(--art-text)); }
.tags { display: flex; flex-wrap: wrap; gap: 12rpx; }
.tag { font-size: 22rpx; font-family: 'JetBrains Mono', monospace; }
.cta { font-size: 24rpx; margin-top: 4rpx; }
</style>
