<template>
  <view class="order-skeleton bg-#F6F6F6">
    <view class="px-30rpx py-32rpx">
      <!-- 订单状态骨架屏 -->
      <view class="mb-20rpx">
        <view class="flex items-center mb-18rpx">
          <view class="w-42rpx h-42rpx rounded-full mr-12rpx skeleton-item"></view>
          <view class="w-150rpx h-36rpx skeleton-item"></view>
        </view>
        <view class="w-200rpx h-24rpx skeleton-item"></view>
      </view>

      <!-- 警告提示框骨架屏 -->
      <view class="bg-white rounded-16rpx p-24rpx mb-20rpx">
        <view class="w-100rpx h-28rpx mb-10rpx skeleton-item"></view>
        <view class="w-full h-20rpx skeleton-item"></view>
      </view>

      <!-- 配送地址卡片骨架屏 -->
      <view class="bg-white rounded-16rpx pt-34rpx mb-20rpx">
        <view class="px-24rpx border-bottom pb-36rpx">
          <!-- 配送地址标题 -->
          <view class="w-120rpx h-28rpx mb-22rpx skeleton-item"></view>

          <!-- 地址信息区域 -->
          <view class="flex items-center mb-6rpx">
            <view class="w-40rpx h-40rpx rounded-full mr-10rpx skeleton-item"></view>
            <view class="w-250rpx h-28rpx skeleton-item"></view>
          </view>

          <!-- 地址详情 -->
          <view class="w-full h-26rpx skeleton-item"></view>
        </view>

        <!-- 操作按钮区域 -->
        <view class="flex justify-between h-90rpx">
          <view class="center h-full w-full border-r-1rpx border-r-solid border-r-#DEDEDE">
            <view class="w-40rpx h-40rpx rounded-full mr-16rpx skeleton-item"></view>
            <view class="w-80rpx h-24rpx skeleton-item"></view>
          </view>
          <view class="center w-full">
            <view class="w-40rpx h-40rpx rounded-full mr-16rpx skeleton-item"></view>
            <view class="w-60rpx h-24rpx skeleton-item"></view>
          </view>
        </view>
      </view>

      <!-- 送达时间骨架屏 -->
      <view class="mb-20rpx bg-white px-24rpx h-160rpx rounded-16rpx flex flex-col justify-center">
        <view class="w-120rpx h-28rpx mb-32rpx skeleton-item"></view>
        <view class="w-300rpx h-28rpx skeleton-item"></view>
      </view>

      <!-- 商品信息卡片骨架屏 -->
      <view class="w-690rpx bg-white rounded-16rpx p-24rpx mb-30rpx">
        <!-- 商品信息标题 -->
        <view class="w-120rpx h-28rpx mb-34rpx skeleton-item"></view>

        <!-- 商品列表骨架屏 -->
        <template v-for="item in 3" :key="item">
          <view class="flex items-center gap-24rpx mb-34rpx last:mb-0">
            <view class="w-120rpx h-120rpx rounded-16rpx shrink-0 skeleton-item"></view>
            <view class="flex-1 h-120rpx flex flex-col justify-between">
              <view class="w-200rpx h-28rpx skeleton-item"></view>
              <view class="w-150rpx h-24rpx skeleton-item"></view>
              <view class="flex justify-between items-center">
                <view class="w-80rpx h-30rpx skeleton-item"></view>
                <view class="w-60rpx h-28rpx skeleton-item"></view>
              </view>
            </view>
          </view>
        </template>

        <!-- 展开收起按钮骨架屏 -->
        <view class="mt-34rpx center">
          <view class="w-262rpx h-50rpx rounded-4rpx skeleton-item"></view>
        </view>

        <!-- 订单总计骨架屏 -->
        <view class="mt-32rpx border-t-1rpx pt-16rpx">
          <view class="flex justify-between mb-16rpx">
            <view class="w-80rpx h-30rpx skeleton-item"></view>
            <view class="w-100rpx h-30rpx skeleton-item"></view>
          </view>
          <view class="flex justify-between mb-16rpx">
            <view class="flex items-center">
              <view class="w-120rpx h-30rpx skeleton-item"></view>
              <view class="w-28rpx h-28rpx ml-10rpx skeleton-item"></view>
            </view>
            <view class="w-80rpx h-30rpx skeleton-item"></view>
          </view>
          <view class="flex justify-between">
            <view class="w-60rpx h-30rpx skeleton-item"></view>
            <view class="w-100rpx h-30rpx skeleton-item"></view>
          </view>
        </view>
      </view>

      <!-- 订单信息卡片骨架屏 -->
      <view class="bg-white rounded-16rpx pt-32rpx mb-30rpx">
        <!-- 订单信息标题 -->
        <view class="flex items-center mb-30rpx">
          <view class="bg-#FF7112 w-10rpx h-30rpx mr-14rpx"></view>
          <view class="w-120rpx h-28rpx skeleton-item"></view>
        </view>

        <!-- 订单详情骨架屏 -->
        <view class="px-24rpx">
          <template v-for="item in 4" :key="item">
            <view class="flex justify-between items-center h-88rpx border-bottom">
              <view class="w-120rpx h-28rpx skeleton-item"></view>
              <view class="w-180rpx h-28rpx skeleton-item"></view>
            </view>
          </template>
        </view>
      </view>
    </view>

    <!-- 底部按钮区域骨架屏 -->
    <view class="fixed bottom-0 left-0 right-0 z-1 bg-white shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)]">
      <view class="h-118rpx p-[10rpx+30rpx] box-border flex gap-22rpx">
        <view class="w-full h-98rpx rounded-20rpx skeleton-item"></view>
        <view class="w-full h-98rpx rounded-20rpx skeleton-item"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// 订单详情页面骨架屏组件
</script>

<style lang="scss" scoped>
</style>