<!--pages/products/products.wxml-->
<view class="container">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <view class="search-input-wrapper">
      <input 
        class="search-input" 
        placeholder="搜索保险产品" 
        value="{{searchKeyword}}"
        bindinput="onSearchInput"
        confirm-type="search"
        bindconfirm="onSearch"
      />
      <view class="search-icon" bindtap="onSearch">🔍</view>
    </view>
  </view>

  <!-- 分类筛选 -->
  <view class="filter-section">
    <scroll-view class="category-scroll" scroll-x="true">
      <view class="category-list">
        <view 
          wx:for="{{categories}}" 
          wx:key="id"
          class="category-item {{selectedCategory === item.id ? 'active' : ''}}"
          bindtap="onCategoryChange"
          data-category="{{item.id}}"
        >
          <text class="category-text">{{item.name}}</text>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 排序选项 -->
  <view class="sort-section">
    <view class="sort-options">
      <view 
        wx:for="{{sortOptions}}" 
        wx:key="value"
        class="sort-item {{sortBy === item.value ? 'active' : ''}}"
        bindtap="onSortChange"
        data-sort="{{item.value}}"
      >
        <text class="sort-text">{{item.label}}</text>
      </view>
    </view>
  </view>

  <!-- 产品列表 -->
  <view class="products-section">
    <view class="products-header">
      <text class="products-count">共 {{totalCount}} 个产品</text>
      <view class="view-toggle">
        <view 
          class="toggle-item {{viewMode === 'list' ? 'active' : ''}}"
          bindtap="onViewModeChange"
          data-mode="list"
        >
          <text>列表</text>
        </view>
        <view 
          class="toggle-item {{viewMode === 'grid' ? 'active' : ''}}"
          bindtap="onViewModeChange"
          data-mode="grid"
        >
          <text>网格</text>
        </view>
      </view>
    </view>

    <!-- 列表视图 -->
    <view wx:if="{{viewMode === 'list'}}" class="product-list">
      <view 
        wx:for="{{productList}}" 
        wx:key="id"
        class="product-item-list"
        bindtap="goToProductDetail"
        data-id="{{item.id}}"
      >
        <view class="product-icon-large">{{item.icon}}</view>
        <view class="product-info">
          <text class="product-name">{{item.name}}</text>
          <text class="product-desc">{{item.description}}</text>
          <view class="product-tags">
            <text 
              wx:for="{{item.tags}}" 
              wx:key="*this"
              class="product-tag"
            >{{item}}</text>
          </view>
          <view class="product-price-row">
            <text class="price-label">起保费：</text>
            <text class="price-value">¥{{item.min_premium}}</text>
            <text class="price-unit">/年</text>
          </view>
        </view>
        <view class="product-actions">
            <button class="btn-apply" size="mini" type="primary" bindtap="goToApplication" data-id="{{item.id}}">立即投保</button>
          </view>
      </view>
    </view>

    <!-- 网格视图 -->
    <view wx:if="{{viewMode === 'grid'}}" class="product-grid">
      <view 
        wx:for="{{productList}}" 
        wx:key="id"
        class="product-item-grid"
        bindtap="goToProductDetail"
        data-id="{{item.id}}"
      >
        <view class="product-card">
          <view class="product-icon">{{item.icon}}</view>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-desc">{{item.description}}</text>
            <view class="product-tags">
              <text 
                wx:for="{{item.tags}}" 
                wx:key="*this"
                class="product-tag"
              >{{item}}</text>
            </view>
            <view class="product-price">
              <text class="price-label">起保费：</text>
              <text class="price-value">¥{{item.min_premium}}</text>
            </view>
          </view>
          <button class="btn-apply" size="mini" type="primary" bindtap="goToApplication" data-id="{{item.id}}">立即投保</button>
        </view>
      </view>
    </view>

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

    <!-- 空状态 -->
    <view wx:if="{{!loading && productList.length === 0}}" class="empty-state">
      <view class="empty-icon">📦</view>
      <text class="empty-text">暂无产品</text>
      <text class="empty-desc">请尝试其他筛选条件</text>
    </view>

    <!-- 加载更多 -->
    <view wx:if="{{hasMore && !loading}}" class="load-more">
      <button class="btn-load-more" bindtap="loadMore">加载更多</button>
    </view>
  </view>
</view>