<template>
  <view class="home-skeleton">
    <!-- 头部区域 -->
    <view class="header-section">
      <view class="app-title-skeleton skeleton-item"></view>
      <view class="delivery-info-skeleton skeleton-item"></view>
    </view>

    <!-- 位置和通知区域 -->
    <view class="location-notification">
      <view class="location-skeleton skeleton-item"></view>
      <view class="notification-skeleton skeleton-item"></view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar-skeleton skeleton-item"></view>
    </view>

    <!-- 分类滚动区域 -->
    <view class="category-section">
      <view class="category-list">
        <view 
          v-for="i in 7" 
          :key="i" 
          class="category-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <!-- 轮播图区域 -->
    <view class="swiper-section">
      <view class="swiper-skeleton skeleton-item"></view>
    </view>

    <!-- 食品类型分类 -->
    <view class="food-type-section">
      <view class="food-type-list">
        <view 
          v-for="i in 5" 
          :key="i" 
          class="food-type-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <!-- 筛选工具 -->
    <view class="filter-section">
      <view class="filter-list">
        <view 
          v-for="i in 4" 
          :key="i" 
          class="filter-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <!-- Featured on ChefLink 区域 -->
    <view class="featured-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <view class="featured-cards">
        <view class="featured-card-skeleton skeleton-item"></view>
        <view class="featured-card-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- Nearby Merchants 区域 -->
    <view class="nearby-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <view class="nearby-list">
        <view 
          v-for="i in 4" 
          :key="i" 
          class="nearby-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <!-- All Merchants 区域 -->
    <view class="all-merchants-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <view class="merchant-card-skeleton skeleton-item"></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;
  }
}

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

// 头部区域
.header-section {
  padding: 18rpx 30rpx 0;
  display: flex;
  align-items: center;
  gap: 14rpx;
  
  .app-title-skeleton {
    width: 241rpx;
    height: 52rpx;
    border-radius: 8rpx;
  }
  
  .delivery-info-skeleton {
    width: 266rpx;
    height: 28rpx;
    border-radius: 6rpx;
  }
}

// 位置和通知区域
.location-notification {
  padding: 22rpx 30rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .location-skeleton {
    width: 329rpx;
    height: 30rpx;
    border-radius: 6rpx;
  }
  
  .notification-skeleton {
    width: 132rpx;
    height: 60rpx;
    border-radius: 30rpx;
  }
}

// 搜索栏
.search-section {
  padding: 32rpx 30rpx 0;
  
  .search-bar-skeleton {
    width: 690rpx;
    height: 88rpx;
    border-radius: 44rpx;
  }
}

// 分类滚动区域
.category-section {
  padding: 40rpx 30rpx 22rpx;
  
  .category-list {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;
    
    .category-item-skeleton {
      flex-shrink: 0;
      width: 214rpx;
      height: 64rpx;
      border-radius: 33rpx;
    }
  }
}

// 轮播图区域
.swiper-section {
  padding: 0 30rpx;
  
  .swiper-skeleton {
    width: 690rpx;
    height: 420rpx;
    border-radius: 24rpx;
  }
}

// 食品类型分类
.food-type-section {
  padding: 22rpx 30rpx;
  
  .food-type-list {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;
    
    .food-type-item-skeleton {
      flex-shrink: 0;
      width: 112rpx;
      height: 112rpx;
      border-radius: 56rpx;
    }
  }
}

// 筛选工具
.filter-section {
  padding: 32rpx 30rpx;
  
  .filter-list {
    display: flex;
    gap: 20rpx;
    
    .filter-item-skeleton {
      flex: 1;
      height: 64rpx;
      border-radius: 32rpx;
    }
  }
}

// Featured on ChefLink 区域
.featured-section {
  padding: 56rpx 30rpx 0;
  
  .section-title-skeleton {
    width: 300rpx;
    height: 36rpx;
    border-radius: 8rpx;
    margin-bottom: 30rpx;
  }
  
  .featured-cards {
    display: flex;
    gap: 28rpx;
    
    .featured-card-skeleton {
      flex: 1;
      height: 252rpx;
      border-radius: 24rpx;
    }
  }
}

// Nearby Merchants 区域
.nearby-section {
  padding: 56rpx 30rpx 0;
  
  .section-title-skeleton {
    width: 303rpx;
    height: 36rpx;
    border-radius: 8rpx;
    margin-bottom: 32rpx;
  }
  
  .nearby-list {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;
    
    .nearby-item-skeleton {
      flex-shrink: 0;
      width: 156rpx;
      height: 156rpx;
      border-radius: 78rpx;
    }
  }
}

// All Merchants 区域
.all-merchants-section {
  padding: 56rpx 30rpx 62rpx;
  
  .section-title-skeleton {
    width: 224rpx;
    height: 36rpx;
    border-radius: 8rpx;
    margin-bottom: 32rpx;
  }
  
  .merchant-card-skeleton {
    width: 690rpx;
    height: 766rpx;
    border-radius: 24rpx;
  }
}

// 底部导航栏
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 108rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 0;
  box-shadow: 0 -6rpx 16rpx rgba(0, 0, 0, 0.1);
}

// 响应式设计
@media (max-width: 750rpx) {
  .category-list,
  .food-type-list,
  .nearby-list {
    padding-bottom: 20rpx;
  }
  
  .featured-cards {
    flex-direction: column;
    gap: 20rpx;
  }
}
</style> 