<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import { getColumns, type Column } from '@/api'
import { resolveMediaUrl } from '@/utils/request'

const loading = ref(false)
const list = ref<Column[]>([])

async function load() {
  loading.value = true
  try {
    list.value = await getColumns() || []
  }
  catch (e: unknown) {
    uni.showToast({ title: e instanceof Error ? e.message : '加载失败', icon: 'none' })
  }
  finally {
    loading.value = false
  }
}

onShow(load)

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

<template>
  <AppPageShell>
    <AppNavbar title="专栏" show-back />
    <view class="page-pad">
      <view class="hero-eyebrow">Columns</view>
      <view class="section-title" style="margin-bottom: 32rpx;">专栏</view>
      <view
        v-for="item in list"
        :key="String(item.id)"
        class="art-card art-card-press card"
        @click="open(item.id)"
      >
        <image
          v-if="item.cover"
          class="cover"
          :src="resolveMediaUrl(String(item.cover))"
          mode="aspectFill"
        />
        <view class="body">
          <text class="title">{{ item.title }}</text>
          <text v-if="item.description" class="desc text-art-muted">{{ item.description }}</text>
          <text v-if="item.postCount != null" class="font-mono-label text-art-muted">{{ item.postCount }} 篇</text>
        </view>
      </view>
      <wd-loading v-if="loading" />
      <wd-empty v-if="!loading && !list.length" description="暂无专栏" />
    </view>
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 48rpx; }
.card { margin-bottom: 24rpx; overflow: hidden; }
.cover { width: 100%; height: 240rpx; display: block; }
.body { padding: 28rpx 32rpx; display: flex; flex-direction: column; gap: 12rpx; }
.title { font-size: 36rpx; color: rgb(var(--art-text)); font-family: 'Playfair Display', serif; }
.desc { font-size: 26rpx; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
</style>
