<script setup lang="ts">
/**
 * 专辑详情：展示封面/简介 + 专辑内视频列表。
 */
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import ContentPageHeader from '../../components/ContentPageHeader.vue'
import { getVideoAlbum, getAlbumVideos, type VideoAlbum, type VideoItem } from '@/api'
import { resolveMediaUrl } from '@/utils/request'

const albumId = ref('')
const album = ref<VideoAlbum | null>(null)
const list = ref<VideoItem[]>([])
const loading = ref(false)

/** 拉专辑信息与视频列表 */
async function loadDetail() {
  if (!albumId.value) return
  loading.value = true
  try {
    const [a, videos] = await Promise.all([
      getVideoAlbum(albumId.value).catch(() => null),
      getAlbumVideos(albumId.value),
    ])
    album.value = a
    list.value = videos || []
  }
  catch (e: unknown) {
    uni.showToast({ title: e instanceof Error ? e.message : '加载失败', icon: 'none' })
  }
  finally {
    loading.value = false
  }
}

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

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

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

<template>
  <AppPageShell>
    <AppNavbar :title="album?.name || '专辑'" show-back />
    <view class="page-pad">
      <image
        v-if="album?.cover"
        class="hero"
        :src="resolveMediaUrl(String(album.cover))"
        mode="aspectFill"
      />
      <ContentPageHeader
        eyebrow="Album"
        :title="album?.name || '专辑视频'"
        :desc="album?.description || ''"
      />
      <text v-if="album?.videoCount != null" class="count font-mono-label text-art-muted">
        {{ album.videoCount }} 集
        <text v-if="album.categoryName"> · {{ album.categoryName }}</text>
      </text>

      <view
        v-for="item in list"
        :key="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>
        </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 80rpx; }
.hero {
  width: 100%;
  height: 320rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}
.count { display: block; margin: -24rpx 0 28rpx; font-size: 22rpx; }
.card { margin-bottom: 24rpx; overflow: hidden; }
.cover { width: 100%; height: 240rpx; display: block; }
.body { padding: 24rpx 28rpx; display: flex; flex-direction: column; gap: 8rpx; }
.title { font-size: 32rpx; color: rgb(var(--art-text)); }
.desc { font-size: 24rpx; line-height: 1.5; }
</style>
