<template>
  <view class="order-detail-skeleton">
    <!-- 页面标题和时间信息骨架 -->
    <view class="px-30rpx pt-20rpx pb-50rpx">
      <view class="delivery-time-skeleton skeleton-item mb-26rpx"></view>
      <view class="order-time-skeleton skeleton-item mb-16rpx"></view>
      <view class="cancel-time-skeleton skeleton-item"></view>
    </view>

    <!-- 订单进度骨架 -->
    <view class="mb-52rpx px-30rpx">
      <view class="progress-container">
        <!-- 进度条背景 -->
        <view class="progress-bg-skeleton skeleton-item"></view>
        
        <!-- 进度步骤 -->
        <view class="flex justify-between items-center">
          <view v-for="i in 5" :key="i" class="flex flex-col items-center">
            <!-- 步骤圆点 -->
            <view class="progress-dot-skeleton skeleton-item mb-16rpx"></view>
            <!-- 步骤标签 -->
            <view class="progress-label-skeleton skeleton-item"></view>
          </view>
        </view>
      </view>
    </view>

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

    <!-- 商品列表骨架 -->
    <view class="px-30rpx py-36rpx">
      <!-- 商家信息骨架 -->
      <view class="flex-center-sb h-80rpx mb-36rpx">
        <view class="flex items-center">
          <view class="store-avatar-skeleton skeleton-item mr-24rpx"></view>
          <view class="store-name-skeleton skeleton-item"></view>
          <view class="store-icon-skeleton skeleton-item ml-10rpx"></view>
        </view>
        <view class="collection-skeleton skeleton-item"></view>
      </view>

      <!-- 商品项骨架 -->
      <view v-for="i in 3" :key="i" class="flex items-start mb-32rpx last:mb-0">
        <!-- 商品图片 -->
        <view class="product-image-skeleton skeleton-item mr-20rpx"></view>
        
        <!-- 商品信息 -->
        <view class="flex-1">
          <view class="product-name-skeleton skeleton-item mb-20rpx"></view>
          <view class="flex-center-sb mb-24rpx">
            <view class="product-specs-skeleton skeleton-item"></view>
            <view class="product-quantity-skeleton skeleton-item"></view>
          </view>
          <view class="product-price-skeleton skeleton-item"></view>
        </view>
      </view>
    </view>

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

    <!-- 配送地址骨架 -->
    <view class="pt-36rpx">
      <view class="address-title-skeleton skeleton-item pl-30rpx mb-4rpx"></view>

      <!-- 地址信息项 -->
      <view v-for="i in 3" :key="i" class="flex items-center py-36rpx px-30rpx border-bottom">
        <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"></view>
        </view>
      </view>
    </view>

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

    <!-- 订单信息骨架 -->
    <view class="border-bottom px-30rpx py-36rpx">
      <view class="order-info-title-skeleton skeleton-item mb-40rpx"></view>
      
      <!-- 订单信息项 -->
      <view v-for="i in 5" :key="i" class="flex-center-sb mb-40rpx last:mb-0">
        <view class="order-info-label-skeleton skeleton-item"></view>
        <view class="order-info-value-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- 费用明细骨架 -->
    <view class="border-bottom px-30rpx py-32rpx">
      <!-- 费用项 -->
      <view v-for="i in 3" :key="i" class="flex-center-sb mb-40rpx last:mb-0">
        <view class="cost-label-skeleton skeleton-item"></view>
        <view class="cost-value-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-bottom-skeleton"></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;
  }
}

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

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

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

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

// 页面标题和时间信息骨架
.delivery-time-skeleton {
  width: 500rpx;
  height: 40rpx;
  border-radius: 8rpx;
}

.order-time-skeleton {
  width: 300rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

.cancel-time-skeleton {
  width: 400rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

// 订单进度骨架
.progress-container {
  position: relative;
}

.progress-bg-skeleton {
  width: 100%;
  height: 12rpx;
  border-radius: 10rpx;
  margin: 18rpx 0;
}

.progress-dot-skeleton {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
}

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

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

// 商家信息骨架
.store-avatar-skeleton {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

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

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

.collection-skeleton {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

// 商品信息骨架
.product-image-skeleton {
  width: 136rpx;
  height: 136rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.product-name-skeleton {
  width: 400rpx;
  height: 30rpx;
  border-radius: 8rpx;
}

.product-specs-skeleton {
  width: 250rpx;
  height: 24rpx;
  border-radius: 6rpx;
}

.product-quantity-skeleton {
  width: 60rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

.product-price-skeleton {
  width: 100rpx;
  height: 30rpx;
  border-radius: 8rpx;
}

// 地址信息骨架
.address-title-skeleton {
  width: 200rpx;
  height: 36rpx;
  border-radius: 8rpx;
}

.address-icon-skeleton {
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
}

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

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

// 订单信息骨架
.order-info-title-skeleton {
  width: 250rpx;
  height: 36rpx;
  border-radius: 8rpx;
}

.order-info-label-skeleton {
  width: 150rpx;
  height: 30rpx;
  border-radius: 8rpx;
}

.order-info-value-skeleton {
  width: 200rpx;
  height: 30rpx;
  border-radius: 8rpx;
}

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

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

// 底部安全区域
.safe-bottom-skeleton {
  height: 100rpx;
}

// 响应式设计
@media (max-width: 750rpx) {
  .delivery-time-skeleton {
    width: 400rpx;
  }
  
  .product-name-skeleton {
    width: 300rpx;
  }
  
  .address-text-skeleton {
    width: 280rpx;
  }
  
  .order-info-value-skeleton {
    width: 150rpx;
  }
}
</style>