<template>
  <view class="checkout-skeleton">
    <!-- 页面标题骨架 -->
    <view class="px-30rpx pt-20rpx">
      <view class="page-title-skeleton skeleton-item mb-52rpx"></view>
      
      <!-- 配送方式选择骨架 -->
      <view class="delivery-method-skeleton skeleton-item mb-40rpx"></view>
    </view>

    <!-- 地址信息区域骨架 -->
    <view class="mt-4rpx">
      <!-- 地址信息项 -->
      <view v-for="i in 3" :key="i" class="address-item-skeleton flex-center-sb border-bottom py-36rpx px-30rpx">
        <view class="flex items-center">
          <view class="address-icon-skeleton skeleton-item mr-28rpx"></view>
          <view class="flex-1">
            <view class="address-text-skeleton skeleton-item mb-8rpx"></view>
            <view class="address-subtext-skeleton skeleton-item w-60%"></view>
          </view>
        </view>
        <view class="arrow-icon-skeleton skeleton-item"></view>
      </view>

      <!-- 配送时间选择骨架 -->
      <view class="flex-center-sb py-36rpx px-30rpx gap-22rpx">
        <view class="delivery-time-card-skeleton skeleton-item"></view>
        <view class="delivery-time-card-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- 分隔线 -->
    <view class="divider-skeleton skeleton-item"></view>

    <!-- 订单信息摘要骨架 -->
    <view class="pt-36rpx pb-36rpx">
      <view class="px-30rpx">
        <view class="order-summary-title-skeleton skeleton-item mb-10rpx"></view>
      </view>

      <!-- 折叠面板骨架 -->
      <view class="collapse-skeleton px-30rpx">
        <view class="collapse-header-skeleton flex-center-sb py-30rpx">
          <view class="flex items-center">
            <view class="store-avatar-skeleton skeleton-item mr-24rpx"></view>
            <view>
              <view class="store-name-skeleton skeleton-item mb-16rpx"></view>
              <view class="store-items-skeleton skeleton-item"></view>
            </view>
          </view>
          <view class="collapse-arrow-skeleton skeleton-item"></view>
        </view>
        
        <!-- 商品列表骨架 -->
        <view v-for="i in 2" :key="i" class="order-item-skeleton flex-center-sb pl-46rpx pr-30rpx py-30rpx">
          <view class="flex items-center">
            <view class="item-quantity-skeleton skeleton-item mr-40rpx"></view>
            <view>
              <view class="item-name-skeleton skeleton-item mb-12rpx"></view>
              <view class="item-options-skeleton skeleton-item"></view>
            </view>
          </view>
          <view class="item-price-skeleton skeleton-item"></view>
        </view>
      </view>
    </view>

    <!-- 底部按钮区域骨架 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white">
      <view class="membership-banner-skeleton skeleton-item"></view>
      <view class="px-30rpx py-18rpx">
        <view class="checkout-button-skeleton skeleton-item"></view>
      </view>
      <view class="safe-bottom-skeleton"></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;
  }
}

.checkout-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;
}

.border-bottom {
  border-bottom: 1rpx solid #f0f0f0;
}

// 导航栏骨架
.navbar-skeleton {
  width: 100%;
  height: 88rpx;
  border-radius: 0;
}

// 页面标题骨架
.page-title-skeleton {
  width: 200rpx;
  height: 46rpx;
  border-radius: 8rpx;
}

// 配送方式选择骨架
.delivery-method-skeleton {
  width: 100%;
  height: 98rpx;
  border-radius: 49rpx;
}

// 地址信息骨架
.address-icon-skeleton {
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
}

.address-text-skeleton {
  width: 300rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.address-subtext-skeleton {
  width: 150rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

.arrow-icon-skeleton {
  width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
}

// 配送时间卡片骨架
.delivery-time-card-skeleton {
  width: 100%;
  height: 152rpx;
  border-radius: 20rpx;
}

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

// 订单摘要标题骨架
.order-summary-title-skeleton {
  width: 350rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

// 折叠面板骨架
.store-avatar-skeleton {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.store-name-skeleton {
  width: 200rpx;
  height: 30rpx;
  border-radius: 8rpx;
}

.store-items-skeleton {
  width: 100rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

.collapse-arrow-skeleton {
  width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
}

// 订单项骨架
.item-quantity-skeleton {
  width: 48rpx;
  height: 48rpx;
  border-radius: 8rpx;
}

.item-name-skeleton {
  width: 250rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.item-options-skeleton {
  width: 120rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

.item-price-skeleton {
  width: 100rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

// 优惠券骨架
.coupon-icon-skeleton {
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
}

.coupon-text-skeleton {
  width: 150rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

// 小费选择骨架
.tip-icon-skeleton {
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
}

.tip-title-skeleton {
  width: 150rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.tip-option-skeleton {
  width: 100%;
  height: 72rpx;
  border-radius: 20rpx;
}

// 配送周卡骨架
.weekly-title-skeleton {
  width: 300rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.radio-option-skeleton {
  width: 80rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.weekly-description-skeleton {
  width: 100%;
  height: 28rpx;
  border-radius: 6rpx;
}

// 费用明细骨架
.cost-label-skeleton {
  width: 150rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.cost-value-skeleton {
  width: 100rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.total-label-skeleton {
  width: 80rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.total-value-skeleton {
  width: 120rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

// 支付方式骨架
.payment-icon-skeleton {
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
}

.payment-text-skeleton {
  width: 150rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.payment-type-skeleton {
  width: 100rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

// 底部区域骨架
.membership-banner-skeleton {
  width: 100%;
  height: 76rpx;
  border-radius: 0;
}

.checkout-button-skeleton {
  width: 100%;
  height: 92rpx;
  border-radius: 16rpx;
}

.safe-bottom-skeleton {
  height: 34rpx;
}

// 响应式设计
@media (max-width: 750rpx) {
  .page-title-skeleton {
    width: 150rpx;
  }
  
  .order-summary-title-skeleton {
    width: 280rpx;
  }
  
  .weekly-title-skeleton {
    width: 250rpx;
  }
}
</style>