<template>
  <view class="cart-skeleton">
    <!-- 购物车列表 -->
    <view class="cart-list-section">
      <template v-for="i in 3" :key="i">
        <view class="cart-store-skeleton">
          <!-- 店铺信息 -->
          <view class="store-info">
            <!-- 店铺图片 -->
            <view class="store-image-skeleton skeleton-item"></view>
            
            <!-- 店铺详情 -->
            <view class="store-details">
              <view class="store-name-skeleton skeleton-item"></view>
              <view class="store-items-skeleton skeleton-item"></view>
              <view class="store-address-skeleton skeleton-item"></view>
            </view>
            
            <!-- 删除按钮 -->
            <view class="delete-btn-skeleton skeleton-item"></view>
          </view>
          
          <!-- 查看购物车按钮 -->
          <view class="view-cart-btn-skeleton skeleton-item"></view>
          
          <!-- 查看店铺按钮 -->
          <view class="view-store-btn-skeleton skeleton-item"></view>
        </view>
      </template>
    </view>
    
    <!-- 空购物车状态 -->
    <view class="empty-cart-section" style="display: none;">
      <view class="empty-image-skeleton skeleton-item"></view>
      <view class="empty-text-skeleton skeleton-item"></view>
      <view class="explore-btn-skeleton skeleton-item"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 骨架屏组件
</script>

<style scoped lang="scss">
// 通用骨架屏样式
.skeleton-item {
  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;
  }
}

// 导航栏区域
.navbar-skeleton {
  height: 88rpx;
  width: 100%;
}

// 标题区域
.title-section {
  padding: 20rpx 30rpx 0;
  
  .title-skeleton {
    width: 120rpx;
    height: 46rpx;
    border-radius: 8rpx;
  }
}

// 购物车列表
.cart-list-section {
  padding: 54rpx 30rpx 0;
  
  .cart-store-skeleton {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    border: 2rpx solid #E8E8E8;
    overflow: hidden;
    
    // 店铺信息
    .store-info {
      padding: 30rpx;
      display: flex;
      
      // 店铺图片
      .store-image-skeleton {
        width: 118rpx;
        height: 118rpx;
        border-radius: 59rpx;
        flex-shrink: 0;
      }
      
      // 店铺详情
      .store-details {
        margin-left: 30rpx;
        flex: 1;
        
        .store-name-skeleton {
          width: 200rpx;
          height: 30rpx;
          border-radius: 6rpx;
          margin-bottom: 10rpx;
        }
        
        .store-items-skeleton {
          width: 150rpx;
          height: 28rpx;
          border-radius: 6rpx;
          margin-bottom: 10rpx;
        }
        
        .store-address-skeleton {
          width: 250rpx;
          height: 28rpx;
          border-radius: 6rpx;
        }
      }
      
      // 删除按钮
      .delete-btn-skeleton {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
      }
    }
    
    // 查看购物车按钮
    .view-cart-btn-skeleton {
      height: 88rpx;
      margin: 0 30rpx 20rpx;
      border-radius: 16rpx;
    }
    
    // 查看店铺按钮
    .view-store-btn-skeleton {
      height: 88rpx;
      margin: 0 30rpx 30rpx;
      border-radius: 16rpx;
    }
  }
}

// 空购物车状态
.empty-cart-section {
  padding: 100rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .empty-image-skeleton {
    width: 318rpx;
    height: 318rpx;
    border-radius: 159rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text-skeleton {
    width: 200rpx;
    height: 32rpx;
    border-radius: 6rpx;
    margin-bottom: 60rpx;
  }
  
  .explore-btn-skeleton {
    width: 400rpx;
    height: 88rpx;
    border-radius: 16rpx;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .cart-list-section {
    padding-bottom: 20rpx;
  }
}
</style>