<!-- components/Skeleton/ListSkeleton.vue -->
<template>
  <SkeletonBase>
    <!-- Tab区域 -->
    <view v-if="showTabs" class="skeleton-tabs">
      <view v-for="i in tabCount" :key="i" class="skeleton-tab skeleton-shimmer"></view>
    </view>
    <!-- 列表项 -->
    <view class="skeleton-list" :style="{ padding: listPadding }">
      <view v-for="i in count" :key="i" class="skeleton-item">
        <!-- 卡片式布局（默认） -->
        <template v-if="layout === 'card'">
          <view class="skeleton-card-item">
            <view class="skeleton-card-icon skeleton-shimmer"></view>
            <view class="skeleton-card-body">
              <view class="skeleton-card-title skeleton-shimmer"></view>
              <view class="skeleton-card-desc skeleton-shimmer"></view>
              <view class="skeleton-card-footer">
                <view class="skeleton-card-tag skeleton-shimmer"></view>
                <view class="skeleton-card-time skeleton-shimmer"></view>
              </view>
            </view>
          </view>
        </template>
        <!-- 简洁列表布局 -->
        <template v-else-if="layout === 'simple'">
          <view class="skeleton-simple-item">
            <view class="skeleton-simple-title skeleton-shimmer"></view>
            <view class="skeleton-simple-meta">
              <view class="skeleton-simple-line skeleton-shimmer"></view>
              <view class="skeleton-simple-line skeleton-shimmer short"></view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </SkeletonBase>
</template>

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

defineProps({
  count: { type: Number, default: 6 },
  layout: { type: String, default: 'card' },
  showTabs: { type: Boolean, default: false },
  tabCount: { type: Number, default: 3 },
  listPadding: { type: String, default: '0 24rpx' }
})
</script>

<style lang="scss" scoped>
.skeleton-tabs {
  display: flex;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.skeleton-tab {
  height: 60rpx;
  width: 140rpx;
  border-radius: 12rpx;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding-top: 16rpx;
}

/* 卡片式 */
.skeleton-card-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  background: #fff;
  border-radius: 16rpx;
  gap: 20rpx;
}

.skeleton-card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.skeleton-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  min-width: 0;
}

.skeleton-card-title {
  height: 32rpx;
  width: 60%;
  border-radius: 8rpx;
}

.skeleton-card-desc {
  height: 28rpx;
  width: 80%;
  border-radius: 8rpx;
}

.skeleton-card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 4rpx;
}

.skeleton-card-tag {
  height: 24rpx;
  width: 80rpx;
  border-radius: 6rpx;
}

.skeleton-card-time {
  height: 24rpx;
  width: 120rpx;
  border-radius: 6rpx;
}

/* 简洁式 */
.skeleton-simple-item {
  padding: 28rpx 24rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.skeleton-simple-title {
  height: 34rpx;
  width: 55%;
  border-radius: 8rpx;
}

.skeleton-simple-meta {
  display: flex;
  gap: 24rpx;
}

.skeleton-simple-line {
  height: 26rpx;
  width: 180rpx;
  border-radius: 6rpx;

  &.short {
    width: 100rpx;
  }
}

: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>
