<!-- components/Skeleton/MemberCenterSkeleton.vue -->
<template>
  <SkeletonBase>
    <!-- 头像和个人信息 -->
    <view class="skeleton-header">
      <view class="skeleton-avatar skeleton-shimmer"></view>
      <view class="skeleton-header-info">
        <view class="skeleton-name skeleton-shimmer"></view>
        <view class="skeleton-level skeleton-shimmer"></view>
      </view>
    </view>
    <!-- 统计数据 -->
    <view class="skeleton-stats">
      <view v-for="i in 3" :key="i" class="skeleton-stat-item">
        <view class="skeleton-stat-num skeleton-shimmer"></view>
        <view class="skeleton-stat-label skeleton-shimmer"></view>
      </view>
    </view>
    <!-- 会员卡 -->
    <view class="skeleton-card">
      <view class="skeleton-card-title skeleton-shimmer"></view>
      <view class="skeleton-card-body">
        <view class="skeleton-card-line skeleton-shimmer"></view>
        <view class="skeleton-card-line skeleton-shimmer short"></view>
        <view class="skeleton-card-btn skeleton-shimmer"></view>
      </view>
    </view>
    <!-- 快捷入口 -->
    <view class="skeleton-entry">
      <view v-for="i in 4" :key="i" class="skeleton-entry-item">
        <view class="skeleton-entry-icon skeleton-shimmer"></view>
        <view class="skeleton-entry-label skeleton-shimmer"></view>
      </view>
    </view>
    <!-- 底部占位 -->
    <view class="skeleton-spacer"></view>
  </SkeletonBase>
</template>

<script setup>
import SkeletonBase from './SkeletonBase.vue'
</script>

<style lang="scss" scoped>
.skeleton-header {
  display: flex;
  align-items: center;
  padding: 40rpx 32rpx 24rpx;
}

.skeleton-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-header-info {
  margin-left: 24rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.skeleton-name {
  height: 36rpx;
  width: 160rpx;
  border-radius: 8rpx;
}

.skeleton-level {
  height: 28rpx;
  width: 120rpx;
  border-radius: 8rpx;
}

.skeleton-stats {
  display: flex;
  justify-content: space-around;
  padding: 24rpx 32rpx;
}

.skeleton-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.skeleton-stat-num {
  height: 40rpx;
  width: 80rpx;
  border-radius: 8rpx;
}

.skeleton-stat-label {
  height: 24rpx;
  width: 60rpx;
  border-radius: 8rpx;
}

.skeleton-card {
  margin: 0 24rpx 24rpx;
  padding: 32rpx;
  background: #fff;
  border-radius: 20rpx;
}

.skeleton-card-title {
  height: 32rpx;
  width: 140rpx;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}

.skeleton-card-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.skeleton-card-line {
  height: 28rpx;
  width: 70%;
  border-radius: 8rpx;

  &.short {
    width: 45%;
  }
}

.skeleton-card-btn {
  height: 56rpx;
  width: 160rpx;
  border-radius: 12rpx;
  margin-top: 8rpx;
}

.skeleton-entry {
  display: flex;
  justify-content: space-around;
  padding: 24rpx 32rpx;
}

.skeleton-entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.skeleton-entry-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
}

.skeleton-entry-label {
  height: 24rpx;
  width: 60rpx;
  border-radius: 8rpx;
}

.skeleton-spacer {
  height: 200rpx;
}

:deep(.skeleton-shimmer) {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>
