<template>
  <view class="store-skeleton">
    <!-- 顶部图片区域 -->
    <view class="relative h-562rpx">
      <!-- 状态栏 -->
      <view class="fixed top-0 left-0 z-9 w-full pt-6rpx">
        <view class="flex-center-sb px-30rpx">
          <view class="back-button-skeleton skeleton-item"></view>
          <view class="flex">
            <view class="action-button-skeleton skeleton-item mr-20rpx"></view>
            <view class="action-button-skeleton skeleton-item mr-20rpx"></view>
            <view class="action-button-skeleton skeleton-item"></view>
          </view>
        </view>
      </view>
      
      <!-- 主图骨架 -->
      <view class="main-image-skeleton skeleton-item w-750rpx h-562rpx absolute top-0 left-0"></view>
    </view>

    <!-- 店铺信息区域 -->
    <view class="px-30rpx pt-40rpx pb-42rpx">
      <!-- 店铺名称 -->
      <view class="text-center">
        <view class="store-name-skeleton skeleton-item mx-auto mb-16rpx"></view>
        
        <!-- 评分和信息 -->
        <view class="center mb-16rpx">
          <view class="rating-skeleton skeleton-item mr-20rpx"></view>
          <view class="chef-link-skeleton skeleton-item mr-20rpx"></view>
          <view class="distance-skeleton skeleton-item"></view>
        </view>
        
        <!-- 描述信息 -->
        <view class="description-skeleton skeleton-item mx-auto mb-16rpx"></view>
        <view class="description-skeleton skeleton-item mx-auto mb-16rpx"></view>
        
        <!-- 标签 -->
        <view class="tag-skeleton skeleton-item mx-auto"></view>
      </view>

      <!-- 配送方式切换 -->
      <view class="delivery-switch-skeleton skeleton-item mt-40rpx"></view>
      
      <!-- 配送信息卡片 -->
      <view class="delivery-info-skeleton skeleton-item mt-36rpx"></view>
    </view>

    <!-- 标签页导航 -->
    <view class="tabs-skeleton">
      <view class="flex">
        <view 
          v-for="i in 5" 
          :key="i" 
          class="tab-item-skeleton skeleton-item mr-40rpx"
        ></view>
      </view>
      <view class="tabs-divider skeleton-item"></view>
    </view>

    <!-- 商品列表区域 -->
    <view class="px-30rpx">
      <!-- 分类标题 -->
      <view class="section-title-skeleton skeleton-item my-36rpx"></view>
      
      <!-- 商品网格 -->
      <view class="grid grid-cols-2 gap-30rpx">
        <view 
          v-for="i in 6" 
          :key="i" 
          class="product-item-skeleton"
        >
          <!-- 商品图片 -->
          <view class="product-image-skeleton skeleton-item mb-28rpx"></view>
          
          <!-- 商品名称 -->
          <view class="product-name-skeleton skeleton-item mb-12rpx"></view>
          
          <!-- 价格行 -->
          <view class="flex-center-sb mb-12rpx">
            <view class="price-skeleton skeleton-item"></view>
            <view class="member-price-skeleton skeleton-item"></view>
          </view>
          
          <!-- 原价和销量 -->
          <view class="flex-center-sb">
            <view>
              <view class="original-price-skeleton skeleton-item mb-8rpx"></view>
              <view class="sales-skeleton skeleton-item"></view>
            </view>
            <view class="add-button-skeleton skeleton-item"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// Store页面骨架屏组件
</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;
  }
}

.store-skeleton {
  background-color: #fff;
  min-height: 100vh;
}

// 通用布局类
.flex-center-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 状态栏区域
.status-bar-skeleton {
  width: 100%;
  height: 44rpx;
  margin-bottom: 20rpx;
}

.back-button-skeleton {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
}

.action-button-skeleton {
  width: 68rpx;
  height: 68rpx;
  border-radius: 34rpx;
}

// 主图区域
.main-image-skeleton {
  border-radius: 0;
}

// 店铺信息区域
.store-name-skeleton {
  width: 400rpx;
  height: 40rpx;
  border-radius: 8rpx;
}

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

.chef-link-skeleton {
  width: 100rpx;
  height: 24rpx;
  border-radius: 6rpx;
}

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

.description-skeleton {
  width: 500rpx;
  height: 24rpx;
  border-radius: 6rpx;
}

.tag-skeleton {
  width: 300rpx;
  height: 48rpx;
  border-radius: 8rpx;
}

// 配送方式
.delivery-switch-skeleton {
  width: 318rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

.delivery-info-skeleton {
  width: 100%;
  height: 164rpx;
  border-radius: 20rpx;
}

// 标签页导航
.tabs-skeleton {
  padding: 0 30rpx;
  
  .tab-item-skeleton {
    width: 120rpx;
    height: 30rpx;
    border-radius: 6rpx;
  }
  
  .tabs-divider {
    width: 100%;
    height: 10rpx;
    margin-top: 32rpx;
    border-radius: 0;
  }
}

// 分类标题
.section-title-skeleton {
  width: 200rpx;
  height: 40rpx;
  border-radius: 8rpx;
}

// 商品项
.product-item-skeleton {
  .product-image-skeleton {
    width: 100%;
    height: 248rpx;
    border-radius: 24rpx;
  }
  
  .product-name-skeleton {
    width: 80%;
    height: 30rpx;
    border-radius: 6rpx;
  }
  
  .price-skeleton {
    width: 100rpx;
    height: 30rpx;
    border-radius: 6rpx;
  }
  
  .member-price-skeleton {
    width: 170rpx;
    height: 28rpx;
    border-radius: 14rpx;
  }
  
  .original-price-skeleton {
    width: 80rpx;
    height: 28rpx;
    border-radius: 6rpx;
  }
  
  .sales-skeleton {
    width: 100rpx;
    height: 28rpx;
    border-radius: 6rpx;
  }
  
  .add-button-skeleton {
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
  }
}

// 分隔线
.divider-skeleton {
  width: 100%;
  height: 10rpx;
  border-radius: 0;
}

// 底部提示
.bottom-tip-skeleton {
  height: 96rpx;
  border-radius: 0;
}

// 响应式设计
@media (max-width: 750rpx) {
  .grid {
    gap: 20rpx;
  }
  
  .product-item-skeleton {
    .product-image-skeleton {
      height: 200rpx;
    }
  }
}
</style>