<script setup lang="ts">
import { NSkeleton, NResult, NButton, NIcon } from 'naive-ui'
import { RefreshOutline } from '@vicons/ionicons5'

defineProps<{
  loading: boolean
  error?: string | null
}>()

const emit = defineEmits<{
  retry: []
}>()
</script>

<template>
  <!-- 首次加载无结果 → 骨架 -->
  <div v-if="loading" class="skeleton-list">
    <div v-for="i in 5" :key="i" class="skeleton-card">
      <NSkeleton class="s-title" :sharp="false" />
      <NSkeleton class="s-meta" :sharp="false" />
      <NSkeleton class="s-meta-short" :sharp="false" />
    </div>
  </div>

  <NResult
    v-else-if="error"
    status="error"
    :title="error"
    size="small"
  >
    <template #footer>
      <NButton class="sky-btn" @click="emit('retry')"><template #icon><NIcon size="14"><RefreshOutline /></NIcon></template>重试</NButton>
    </template>
  </NResult>

  <slot v-else />
</template>

<style scoped>
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
}
.s-title { height: 22px; margin-bottom: 8px; width: 75%; }
.s-meta { height: 14px; margin-bottom: 6px; width: 60%; }
.s-meta-short { height: 14px; width: 35%; }
</style>
