<template>
  <div class="list-panel">
    <div
        v-for="item in episodes"
        :key="item.id"
        class="episode-item"
        :class="{ active: currentEpisodeId === item.id }"
        @click="$emit('select', item)"
    >
      <img :src="item.coverUrl" alt="" loading="lazy" />
      <div class="episode-text">
        <div class="title">{{ item.title }}</div>
        <div class="meta">{{ formatDate(item.releasedAt) }}</div>
      </div>
    </div>

    <div class="load-more-wrap" v-if="hasMore">
      <button class="load-more-btn" :disabled="loadingMore" @click="$emit('loadMore')">
        {{ loadingMore ? '加载中...' : '加载更多' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { EpisodeData } from '@/api/qishier'

defineProps<{
  episodes: EpisodeData[]
  currentEpisodeId: string
  hasMore: boolean
  loadingMore: boolean
}>()

defineEmits<{
  select: [episode: EpisodeData]
  loadMore: []
}>()

function formatDate(timestamp: number): string {
  if (!timestamp) return '--'
  const d = new Date(timestamp)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}
</script>

<style scoped>
.list-panel {
  max-height: 80vh;
  overflow-y: auto;
  padding: 12px;
  background: #1b1b1b;
  border-radius: 12px;
}

.episode-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: 0.2s;
}

.episode-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.episode-item.active {
  background: rgba(255, 193, 7, 0.16);
}

.episode-item img {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.episode-text {
  flex: 1;
  min-width: 0;
}

.title {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
  font-weight: 600;
  color: #fff;
}

.meta {
  font-size: 13px;
  color: #999;
}

.load-more-wrap {
  padding: 12px 0 4px;
  text-align: center;
}

.load-more-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #333;
  color: #fff;
  cursor: pointer;
}

.load-more-btn:hover {
  background: #444;
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
