<template>
  <div class="loading-state">
    <!-- 加载中 -->
    <div v-if="status === 'loading'" class="loading-state__content">
      <div class="loading-state__spinner">
        <div class="spinner-ring"></div>
      </div>
      <p class="loading-state__text">{{ loadingText }}</p>
    </div>

    <!-- 加载出错 -->
    <div v-else-if="status === 'error'" class="loading-state__content">
      <img :src="emptySvg" class="loading-state__img" alt="error" />
      <p class="loading-state__text loading-state__text--error">{{ errorText }}</p>
      <slot name="error-action">
        <button
          v-if="showRetry"
          class="loading-state__retry-btn lx-btn lx-btn--sm lx-btn--primary"
          type="button"
          @click="$emit('retry')"
        >
          重新加载
        </button>
      </slot>
    </div>

    <!-- 暂无数据 -->
    <div v-else-if="status === 'empty'" class="loading-state__content">
      <img :src="emptySvg" class="loading-state__img" alt="empty" />
      <p class="loading-state__text">{{ emptyText }}</p>
      <slot name="empty-action" />
    </div>
  </div>
</template>

<script setup lang="ts">
import emptySvg from '../../assets/loading/empty.svg'

withDefaults(
  defineProps<{
    /** 当前状态：loading | error | empty */
    status: 'loading' | 'error' | 'empty'
    /** 加载中文字 */
    loadingText?: string
    /** 出错文字 */
    errorText?: string
    /** 空数据文字 */
    emptyText?: string
    /** 出错时是否显示重试按钮 */
    showRetry?: boolean
  }>(),
  {
    loadingText: '加载中...',
    errorText: '加载失败，请稍后重试',
    emptyText: '暂无数据',
    showRetry: true,
  },
)

defineEmits<{
  (e: 'retry'): void
}>()
</script>

<style scoped lang="scss">
@use '@/styles/variate.scss' as *;

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  align-self: stretch;
  box-sizing: border-box;

  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  &__img {
    width: 160px;
    height: auto;
    opacity: 0.85;
    user-select: none;
    pointer-events: none;
  }

  &__text {
    font-size: 14px;
    color: $font-minor-color;
    line-height: 1.6;
    text-align: center;
    margin: 0;

    &--error {
      color: $error-color;
    }
  }

  &__retry-btn {
    margin-top: 4px;
  }

  // 加载中旋转动画
  &__spinner {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.spinner-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #f0f0f0;
  border-top-color: $theme-color;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
