<!--牛只交易首页-->
<view class="page-container">
  <!-- 顶部搜索栏 -->
  <view class="header-search">
    <view class="search-bar" bindtap="onSearch">
      <image class="search-icon" src="/images/icons/search.png" mode="aspectFit"></image>
      <text class="search-placeholder">搜索牛只品种、价格...</text>
    </view>
    <button class="publish-btn" bindtap="onPublish">发布</button>
  </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="market-stats">
    <view class="stats-item">
      <text class="stats-number">{{formatNumber(marketStats.totalProducts)}}</text>
      <text class="stats-label">在售商品</text>
    </view>
    <view class="stats-item">
      <text class="stats-number">{{formatNumber(marketStats.todayDeals)}}</text>
      <text class="stats-label">今日成交</text>
    </view>
    <view class="stats-item">
      <text class="stats-number">{{formatPrice(marketStats.avgPrice)}}</text>
      <text class="stats-label">平均价格</text>
    </view>
  </view>

  <!-- 分类导航 -->
  <view class="category-nav" wx:if="{{categoryList.length > 0}}">
    <scroll-view class="category-scroll" scroll-x>
      <view class="category-list">
        <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>
    </scroll-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">
      <view class="product-grid">
        <view 
          class="product-item"
          wx:for="{{hotProducts}}"
          wx:key="id"
          data-product="{{item}}"
          bindtap="onProductTap"
        >
          <image class="product-image" src="{{item.cover_image}}" mode="aspectFill"></image>
          <view class="product-info">
            <text class="product-title">{{item.title}}</text>
            <text class="product-breed">{{item.breed}}</text>
            <view class="product-price-row">
              <text class="product-price">{{formatPrice(item.price)}}</text>
              <text class="product-location">{{item.location}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 最新商品 -->
  <view class="section" wx:if="{{recentProducts.length > 0}}">
    <view class="section-header">
      <text class="section-title">最新发布</text>
      <text class="section-more" bindtap="onViewMoreRecent">查看更多</text>
    </view>
    <view class="recent-products">
      <view 
        class="recent-item"
        wx:for="{{recentProducts}}"
        wx:key="id"
        data-product="{{item}}"
        bindtap="onProductTap"
      >
        <image class="recent-image" src="{{item.cover_image}}" mode="aspectFill"></image>
        <view class="recent-info">
          <text class="recent-title">{{item.title}}</text>
          <text class="recent-breed">{{item.breed}} · {{item.age}}月龄</text>
          <view class="recent-meta">
            <text class="recent-price">{{formatPrice(item.price)}}</text>
            <text class="recent-time">{{formatTime(item.created_at)}}</text>
          </view>
          <text class="recent-location">{{item.location}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 快捷操作 -->
  <view class="quick-actions">
    <button class="action-btn primary" bindtap="onViewAllProducts">
      <image src="/images/icons/market.png" mode="aspectFit"></image>
      <text>浏览市场</text>
    </button>
    <button class="action-btn secondary" bindtap="onPublish">
      <image src="/images/icons/publish.png" mode="aspectFit"></image>
      <text>发布商品</text>
    </button>
  </view>

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

  <!-- 空状态 -->
  <view class="empty" wx:if="{{!loading && hotProducts.length === 0 && recentProducts.length === 0}}">
    <image class="empty-icon" src="/images/empty-market.png" mode="aspectFit"></image>
    <text class="empty-text">暂无商品</text>
    <text class="empty-desc">成为第一个发布商品的用户</text>
    <button class="btn btn-primary mt-3" bindtap="onPublish">发布商品</button>
  </view>
</view>