<!--牛肉商城首页-->
<view class="page-container">
  <!-- 顶部搜索栏 -->
  <view class="header-search">
    <view class="search-bar" bindtap="onSearchTap">
      <image class="search-icon" src="/images/icons/search.png" mode="aspectFit"></image>
      <text class="search-placeholder">搜索优质牛肉...</text>
    </view>
  </view>

  <!-- 轮播图 -->
  <swiper 
    class="banner-swiper" 
    indicator-dots 
    autoplay 
    interval="5000" 
    duration="500"
    wx:if="{{bannerList.length > 0}}"
  >
    <swiper-item 
      wx:for="{{bannerList}}" 
      wx:key="id"
      data-banner="{{item}}"
      bindtap="onBannerTap"
    >
      <image class="banner-image" src="{{item.image}}" mode="aspectFill"></image>
    </swiper-item>
  </swiper>

  <!-- 分类导航 -->
  <view class="category-nav" wx:if="{{categoryList.length > 0}}">
    <view class="category-header">
      <text class="category-title">商品分类</text>
      <text class="category-more" bindtap="onViewAllCategories">查看全部</text>
    </view>
    <view class="category-grid">
      <view 
        class="category-item"
        wx:for="{{categoryList}}"
        wx:key="id"
        data-category="{{item}}"
        bindtap="onCategoryTap"
      >
        <image class="category-icon" src="{{item.icon}}" mode="aspectFit"></image>
        <text class="category-name">{{item.name}}</text>
      </view>
    </view>
  </view>

  <!-- 热门商品 -->
  <view class="section" wx:if="{{hotProducts.length > 0}}">
    <view class="section-header">
      <text class="section-title">热门推荐</text>
      <text class="section-more" bindtap="onViewMoreHot">查看更多</text>
    </view>
    <view class="hot-products">
      <scroll-view class="hot-scroll" scroll-x>
        <view class="hot-list">
          <view 
            class="hot-item"
            wx:for="{{hotProducts}}"
            wx:key="id"
            data-product="{{item}}"
            bindtap="onProductTap"
          >
            <image class="hot-image" src="{{item.cover_image}}" mode="aspectFill"></image>
            <view class="hot-info">
              <text class="hot-title">{{item.title}}</text>
              <view class="hot-price-row">
                <text class="hot-price">{{formatPrice(item.price)}}</text>
                <text class="hot-sales">销量{{formatSales(item.sales)}}</text>
              </view>
            </view>
            <button 
              class="add-cart-btn"
              data-product="{{item}}"
              bindtap="onAddToCart"
            >
              <image src="/images/icons/cart-add.png" mode="aspectFit"></image>
            </button>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>

  <!-- 新品推荐 -->
  <view class="section" wx:if="{{newProducts.length > 0}}">
    <view class="section-header">
      <text class="section-title">新品上市</text>
      <text class="section-more" bindtap="onViewMoreNew">查看更多</text>
    </view>
    <view class="new-products">
      <view class="new-grid">
        <view 
          class="new-item"
          wx:for="{{newProducts}}"
          wx:key="id"
          data-product="{{item}}"
          bindtap="onProductTap"
        >
          <image class="new-image" src="{{item.cover_image}}" mode="aspectFill"></image>
          <view class="new-badge">新品</view>
          <view class="new-info">
            <text class="new-title">{{item.title}}</text>
            <text class="new-desc">{{item.description}}</text>
            <view class="new-price-row">
              <text class="new-price">{{formatPrice(item.price)}}</text>
              <view class="new-original-price" wx:if="{{item.original_price > item.price}}">
                <text class="original-price">{{formatPrice(item.original_price)}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 推荐商品 -->
  <view class="section" wx:if="{{recommendProducts.length > 0}}">
    <view class="section-header">
      <text class="section-title">为您推荐</text>
    </view>
    <view class="recommend-products">
      <view 
        class="recommend-item"
        wx:for="{{recommendProducts}}"
        wx:key="id"
        data-product="{{item}}"
        bindtap="onProductTap"
      >
        <image class="recommend-image" src="{{item.cover_image}}" mode="aspectFill"></image>
        <view class="recommend-info">
          <text class="recommend-title">{{item.title}}</text>
          <text class="recommend-desc">{{item.description}}</text>
          <view class="recommend-tags" wx:if="{{item.tags}}">
            <text 
              class="recommend-tag"
              wx:for="{{item.tags}}"
              wx:key="*this"
              wx:for-item="tag"
            >{{tag}}</text>
          </view>
          <view class="recommend-price-row">
            <text class="recommend-price">{{formatPrice(item.price)}}</text>
            <text class="recommend-sales">已售{{formatSales(item.sales)}}</text>
            <button 
              class="recommend-cart-btn"
              data-product="{{item}}"
              bindtap="onAddToCart"
            >
              加购物车
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 加载状态 -->
  <view class="loading" wx:if="{{loading}}">
    <view class="loading-spinner"></view>
    <text>加载中...</text>
  </view>

  <!-- 空状态 -->
  <view class="empty" wx:if="{{!loading && hotProducts.length === 0 && newProducts.length === 0}}">
    <image class="empty-icon" src="/images/empty-product.png" mode="aspectFit"></image>
    <text class="empty-text">暂无商品</text>
    <text class="empty-desc">商品正在准备中，敬请期待</text>
  </view>
</view>