<template>
  <div class="hero">
    <h1>{{ library?.name || '所有歌曲' }}</h1>
    <p>{{ songs.length }} 首歌曲</p>
  </div>
  <div class="song-list">
    <div v-for="s in songs" :key="s.id" class="song-item">
      <span class="song-id">{{ s.id }}</span>
      <div class="song-textbox">
        <span class="song-title">{{ s.title }}</span>
        <span class="song-artist">{{ s.artist }}</span>
        <span class="song-album">{{ s.album }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useButterfliuStore } from '@/stores/butterfliu'

const route = useRoute()
const butterfliu = useButterfliuStore()
const songs = ref([])

const libraries = computed(() => butterfliu.libraries)
const library = computed(() => {
  const libId = parseInt(route.params.id)
  return libraries.value.find(l => l.id === libId)
})

async function loadSongs() {
  const libId = route.params.id
  if (libId) {
    songs.value = await butterfliu.fetchLibrarySongs(libId)
  } else {
    songs.value = await butterfliu.fetchAllSongs()
  }
}

watch(() => route.params.id, () => {
  loadSongs()
})

onMounted(() => {
  butterfliu.fetchLibraries()
  loadSongs()
})
</script>

<style scoped>
.song-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}
.song-item {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  padding: var(--size-1);
  &:hover {
    background-color: var(--stone-1);
    box-shadow: var(--shadow-1);
  }
}

.song-id {
  text-align: center;
  inline-size: var(--size-8);
  line-height: var(--size-8);
  aspect-ratio: var(--ratio-square);
  font-family: var(--font-classical-humanist);
}

.song-textbox {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.song-title {
  font-weight: bold;
  font-size: var(--font-size-2);
}

.song-artist {
  color: var(--stone-6);
  font-size: var(--font-size-1);
}

.song-album {
  color: var(--stone-5);
  font-size: var(--font-size-0);
}
</style>
