<template>
  <view class="dishes-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"></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-32rpx">
      <!-- 菜品标题 -->
      <view class="dish-title-skeleton skeleton-item mb-16rpx"></view>
      
      <!-- 菜品描述 -->
      <view class="dish-description-skeleton skeleton-item mb-12rpx"></view>
      <view class="dish-description-skeleton skeleton-item mb-12rpx w-80%"></view>
      <view class="dish-description-skeleton skeleton-item mb-12rpx w-60%"></view>
      
      <!-- 价格信息 -->
      <view class="flex items-center gap-16rpx">
        <view class="current-price-skeleton skeleton-item"></view>
        <view class="original-price-skeleton skeleton-item"></view>
        <view class="member-price-skeleton skeleton-item"></view>
      </view>
    </view>

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

    <!-- 选择调料区域 -->
    <view class="px-30rpx">
      <!-- 调料标题区域 -->
      <view class="flex-center-sb mb-22rpx">
        <view class="flex-1">
          <view class="sauce-title-skeleton skeleton-item mb-12rpx"></view>
          <view class="sauce-subtitle-skeleton skeleton-item"></view>
        </view>
        <view class="required-tag-skeleton skeleton-item"></view>
      </view>

      <!-- 调料选项列表 -->
      <view class="">
        <view 
          v-for="i in 4" 
          :key="i" 
          class="sauce-option-skeleton p-30rpx flex-center-sb border-b-1rpx border-#dfdfdf"
        >
          <view class="sauce-name-skeleton skeleton-item"></view>
          <view class="radio-button-skeleton skeleton-item"></view>
        </view>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="fixed bottom-0 left-0 right-0 px-30rpx">
      <view class="add-to-cart-skeleton skeleton-item mb-20rpx"></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;
  }
}

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

// 状态栏区域
.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;
}

// 菜品信息区域
.dish-title-skeleton {
  width: 400rpx;
  height: 40rpx;
  border-radius: 8rpx;
}

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

// 价格区域
.current-price-skeleton {
  width: 120rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.original-price-skeleton {
  width: 100rpx;
  height: 28rpx;
  border-radius: 6rpx;
}

.member-price-skeleton {
  width: 170rpx;
  height: 28rpx;
  border-radius: 14rpx;
}

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

// 调料选择区域
.sauce-title-skeleton {
  width: 300rpx;
  height: 40rpx;
  border-radius: 8rpx;
}

.sauce-subtitle-skeleton {
  width: 100rpx;
  height: 24rpx;
  border-radius: 6rpx;
}

.required-tag-skeleton {
  width: 150rpx;
  height: 64rpx;
  border-radius: 8rpx;
}

// 调料选项
.sauce-option-skeleton {
  .sauce-name-skeleton {
    width: 200rpx;
    height: 32rpx;
    border-radius: 8rpx;
  }
  
  .radio-button-skeleton {
    width: 48rpx;
    height: 48rpx;
    border-radius: 24rpx;
  }
}

// 底部按钮
.add-to-cart-skeleton {
  width: 100%;
  height: 98rpx;
  border-radius: 16rpx;
}

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

// 响应式设计
@media (max-width: 750rpx) {
  .dish-title-skeleton {
    width: 300rpx;
  }
  
  .sauce-title-skeleton {
    width: 250rpx;
  }
}
</style>