<template>
  <view class="store-skeleton">
    <!-- 顶部导航栏 -->
    <view class="fixed top-0 left-0 z-9 w-full pt-6rpx">
      <status-bar />
      <view class="nav-bar">
        <view class="nav-btn skeleton-item"></view>
        <view class="nav-btn skeleton-item"></view>
      </view>
    </view>

    <!-- 占位 -->
    <status-bar />
    <view class="h-88rpx"></view>

    <!-- 店铺 Logo -->
    <view class="flex justify-center pt-20rpx">
      <view class="logo-skeleton skeleton-item"></view>
    </view>

    <!-- 店铺信息区域 -->
    <view class="px-30rpx pt-24rpx pb-30rpx">
      <view class="flex flex-col items-center">
        <!-- 店铺名称 -->
        <view class="name-skeleton skeleton-item mb-16rpx"></view>
        <!-- 评分 + CHEFLINK -->
        <view class="flex items-center mb-12rpx">
          <view class="rating-skeleton skeleton-item mr-16rpx"></view>
          <view class="cheflink-skeleton skeleton-item"></view>
        </view>
        <!-- 总销量 -->
        <view class="sales-text-skeleton skeleton-item"></view>
      </view>

      <!-- 配送信息卡片 -->
      <view class="delivery-card-skeleton skeleton-item mt-30rpx"></view>

      <!-- 优惠券标签行（占位） -->
      <view class="flex items-center mt-24rpx">
        <view class="coupon-tag-skeleton skeleton-item mr-16rpx"></view>
        <view class="coupon-tag-skeleton skeleton-item mr-16rpx"></view>
        <view class="coupon-tag-skeleton skeleton-item"></view>
        <view class="flex-1"></view>
        <view class="claim-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- 分类胶囊标签 -->
    <view class="flex items-center px-30rpx pb-24rpx">
      <view
        v-for="i in 4"
        :key="i"
        class="tab-chip-skeleton skeleton-item"
      ></view>
    </view>

    <!-- 商品列表 -->
    <view class="px-30rpx">
      <view class="grid grid-cols-2 gap-24rpx">
        <view
          v-for="i in 4"
          :key="i"
          class="product-skeleton"
        >
          <!-- 商品图片 -->
          <view class="product-img-skeleton skeleton-item"></view>
          <!-- 价格 + 销量 -->
          <view class="flex items-center justify-between mt-16rpx">
            <view class="price-skeleton skeleton-item"></view>
            <view class="sales-skeleton skeleton-item"></view>
          </view>
          <!-- 商品名称 -->
          <view class="product-name-skeleton skeleton-item mt-8rpx"></view>
          <!-- 会员价 + 加购按钮 -->
          <view class="flex items-center justify-between mt-12rpx">
            <view class="member-skeleton skeleton-item"></view>
            <view class="add-btn-skeleton skeleton-item"></view>
          </view>
        </view>
      </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; }
}

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

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 88rpx;
}

.nav-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
}

/* 店铺 Logo */
.logo-skeleton {
  width: 128rpx;
  height: 128rpx;
  border-radius: 24rpx;
}

/* 店铺信息 */
.name-skeleton {
  width: 360rpx;
  height: 44rpx;
  border-radius: 8rpx;
}

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

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

.sales-text-skeleton {
  width: 140rpx;
  height: 24rpx;
  border-radius: 6rpx;
}

/* 配送信息卡片 */
.delivery-card-skeleton {
  width: 100%;
  height: 140rpx;
  border-radius: 20rpx;
}

/* 优惠券标签 */
.coupon-tag-skeleton {
  width: 120rpx;
  height: 52rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.claim-skeleton {
  width: 100rpx;
  height: 28rpx;
  border-radius: 6rpx;
  flex-shrink: 0;
}

/* 胶囊标签 */
.tab-chip-skeleton {
  width: 100rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
  flex-shrink: 0;

  &:last-child {
    margin-right: 0;
  }
}

/* 商品卡片 */
.product-skeleton {
  margin-bottom: 24rpx;
}

.product-img-skeleton {
  width: 100%;
  height: 248rpx;
  border-radius: 24rpx;
}

.price-skeleton {
  width: 120rpx;
  height: 36rpx;
  border-radius: 6rpx;
}

.sales-skeleton {
  width: 80rpx;
  height: 22rpx;
  border-radius: 6rpx;
}

.product-name-skeleton {
  width: 85%;
  height: 34rpx;
  border-radius: 6rpx;
}

.member-skeleton {
  width: 160rpx;
  height: 42rpx;
  border-radius: 8rpx;
}

.add-btn-skeleton {
  width: 52rpx;
  height: 52rpx;
  border-radius: 26rpx;
}
</style>
