<template>
  <view class="loading-state" :class="{ 'loading-state-small': size === 'small' }">
    <!-- 骨架屏模式 -->
    <view v-if="type === 'skeleton'" class="skeleton-container">
      <slot name="skeleton">
        <!-- 默认骨架屏 -->
        <view class="skeleton-item skeleton-avatar"></view>
        <view class="skeleton-item skeleton-title"></view>
        <view class="skeleton-item skeleton-text"></view>
        <view class="skeleton-item skeleton-text short"></view>
      </slot>
    </view>

    <!-- 加载动画模式 -->
    <view v-else class="loading-spinner">
      <!-- 加载图标 -->
      <view class="spinner-icon">
        <u-loading-icon :show="true" :size="iconSize" :color="iconColor"></u-loading-icon>
      </view>

      <!-- 加载文字 -->
      <view v-if="text" class="loading-text">{{ text }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  type?: 'spinner' | 'skeleton'  // 加载类型
  text?: string                   // 加载文字
  size?: 'normal' | 'small'       // 尺寸
  color?: string                  // 图标颜色
}

const props = withDefaults(defineProps<Props>(), {
  type: 'spinner',
  text: '加载中...',
  size: 'normal',
  color: ''
})

// 图标尺寸
const iconSize = computed(() => {
  return props.size === 'small' ? 32 : 40
})

// 图标颜色
const iconColor = computed(() => {
  return props.color || '#FF6B35'
})
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  min-height: 300rpx;
}

.loading-state-small {
  padding: 48rpx 0;
  min-height: 200rpx;
}

/* ========== 加载动画模式 ========== */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spinner-icon {
  margin-bottom: $spacing-md;
}

.loading-text {
  font-size: $font-base;
  color: $text-tertiary;
  margin-top: $spacing-sm;
}

.loading-state-small .loading-text {
  font-size: $font-sm;
}

/* ========== 骨架屏模式 ========== */
.skeleton-container {
  width: 100%;
  padding: $spacing-xl;
}

.skeleton-item {
  background: linear-gradient(90deg, $gray-100 25%, $gray-50 50%, $gray-100 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: $radius-sm;
  margin-bottom: $spacing-md;
}

.skeleton-avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
}

.skeleton-title {
  width: 60%;
  height: 40rpx;
}

.skeleton-text {
  width: 100%;
  height: 32rpx;
}

.skeleton-text.short {
  width: 80%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 骨架屏预设布局 */
.skeleton-card {
  display: flex;
  gap: $spacing-md;
  margin-bottom: $spacing-xl;

  .skeleton-image {
    width: 200rpx;
    height: 150rpx;
    flex-shrink: 0;
  }

  .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;

    .skeleton-title {
      width: 100%;
      height: 36rpx;
    }

    .skeleton-text {
      width: 80%;
      height: 28rpx;
    }

    .skeleton-price {
      width: 40%;
      height: 32rpx;
      margin-top: auto;
    }
  }
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  padding: $spacing-md 0;
  border-bottom: 1rpx solid $border-light;

  .skeleton-avatar {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
  }

  .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;

    .skeleton-title {
      width: 60%;
      height: 32rpx;
    }

    .skeleton-text {
      width: 40%;
      height: 24rpx;
    }
  }
}
</style>
