<template>
  <view class="skeleton">
    <view v-if="type === 'home'" class="skeleton-home">
      <!-- 顶部用户信息骨架 -->
      <view class="px-4 pt-4">
        <view class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] px-4 py-4">
          <view class="flex items-center">
            <view class="skeleton-circle w-56px h-56px mr-4" />
            <view class="flex-1">
              <view class="skeleton-block h-5 w-32 mb-2" />
              <view class="skeleton-block h-3 w-16 mb-2" />
              <view class="skeleton-block h-3 w-24" />
            </view>
          </view>
        </view>
      </view>

      <!-- 数据卡片骨架 -->
      <view class="px-4 pt-4">
        <view class="skeleton-block h-5 w-24 mb-3" />
        <view class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4">
          <view class="flex justify-between">
            <view>
              <view class="skeleton-block h-3 w-20 mb-1" />
              <view class="skeleton-block h-5 w-24" />
            </view>
            <view>
              <view class="skeleton-block h-3 w-16 mb-1" />
              <view class="skeleton-block h-5 w-20" />
            </view>
            <view class="text-right">
              <view class="skeleton-block h-3 w-20 mb-1" />
              <view class="skeleton-block h-5 w-24" />
            </view>
          </view>
        </view>
      </view>

      <!-- 快捷功能骨架 -->
      <view class="px-4 pt-6 pb-4">
        <view class="skeleton-block h-5 w-24 mb-3" />
        <view class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden">
          <view v-for="i in 5" :key="i" class="flex items-center px-4 py-4" :class="{ 'border-t border-[#f1f5f9]': i > 1 }">
            <view class="skeleton-circle w-10 h-10 mr-3" />
            <view class="flex-1">
              <view class="skeleton-block h-4 w-20 mb-1" />
              <view class="skeleton-block h-3 w-32" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else-if="type === 'list'" class="skeleton-list">
      <view class="px-4 pt-4">
        <view v-for="i in 3" :key="i" class="bg-white rounded-2xl p-4 mb-3">
          <view class="flex items-start justify-between mb-3">
            <view class="flex-1">
              <view class="skeleton-block h-4 w-40 mb-2" />
              <view class="skeleton-block h-3 w-48" />
            </view>
            <view class="skeleton-block h-5 w-12 rounded-full" />
          </view>
          <view class="flex items-center justify-between pt-3 border-t border-[#f1f5f9]">
            <view class="skeleton-block h-3 w-16" />
            <view class="skeleton-block h-4 w-4" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  type?: 'home' | 'list'
}>()
</script>

<style scoped>
.skeleton-block {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-circle {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 50%;
}

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