<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import { useTheme } from '@/composables/useTheme'
import { getColumn, getColumnPosts, type Column, type Post } from '@/api'
import { resolveMediaUrl } from '@/utils/request'

const { isDark } = useTheme()
const rootClass = computed(() => ['page-root', isDark.value ? 'theme-dark' : ''])

const id = ref('')
const column = ref<Column | null>(null)
const posts = ref<Post[]>([])
const loading = ref(false)

/** 拉专栏信息与文章列表 */
async function loadDetail() {
  if (!id.value) return
  loading.value = true
  try {
    const [col, postList] = await Promise.all([
      getColumn(id.value),
      getColumnPosts(id.value),
    ])
    column.value = col
    posts.value = postList || []
  }
  catch (e: unknown) {
    uni.showToast({ title: e instanceof Error ? e.message : '加载失败', icon: 'none' })
  }
  finally {
    loading.value = false
  }
}

onLoad((q) => {
  id.value = String(q?.id || '')
  loadDetail()
})

onPullDownRefresh(async () => {
  try {
    await loadDetail()
  }
  finally {
    uni.stopPullDownRefresh()
  }
})

const openPost = (pid: string | number) => uni.navigateTo({ url: `/subPackages/content/pages/blog/detail?id=${pid}` })
</script>

<template>
  <view :class="rootClass">
    <AppNavbar :title="column?.title || '专栏详情'" show-back />
    <view v-if="column" class="page-pad">
      <image
        v-if="column.cover"
        class="hero"
        :src="resolveMediaUrl(String(column.cover))"
        mode="aspectFill"
      />
      <view class="hero-eyebrow">Column</view>
      <view class="section-title" style="margin-bottom: 16rpx;">{{ column.title }}</view>
      <text v-if="column.description" class="desc text-art-muted">{{ column.description }}</text>
      <view class="section-head">
        <text class="section-title" style="font-size: 34rpx;">文章列表</text>
        <text class="font-mono-label text-art-muted">{{ posts.length }} 篇</text>
      </view>
      <view
        v-for="item in posts"
        :key="String(item.id)"
        class="art-card art-card-press card"
        @click="openPost(item.id)"
      >
        <text class="font-mono-label text-art-muted">{{ item.date || item.categoryName }}</text>
        <text class="title">{{ item.title }}</text>
        <text v-if="item.summary" class="summary text-art-muted">{{ item.summary }}</text>
      </view>
      <wd-empty v-if="!loading && !posts.length" description="暂无文章" />
    </view>
    <wd-loading v-if="loading" />
    <wd-toast />
    <wd-dialog />
  </view>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 48rpx; }
.hero { width: 100%; height: 320rpx; border-radius: 16rpx; margin-bottom: 24rpx; }
.desc { font-size: 28rpx; line-height: 1.7; display: block; margin-bottom: 32rpx; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--art-border);
  padding-bottom: 16rpx;
  margin-bottom: 24rpx;
}
.card { padding: 28rpx 32rpx; margin-bottom: 20rpx; display: flex; flex-direction: column; gap: 10rpx; }
.title { font-size: 32rpx; color: rgb(var(--art-text)); }
.summary { font-size: 26rpx; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
</style>
