<!-- pages/category/category.wxml -->
<view class="fenlei-page">
  <!-- 1. 毛玻璃搜索框区域（固定） -->
  <view class="search-container">
    <view class="search-box search-box--glass">
      <image src="/images/sousuo.png" class="search-icon" />
      <input 
        type="text" 
        class="search-input" 
        placeholder="输入商品名称搜索" 
        placeholder-class="search-placeholder"
        value="{{searchText}}"
        bindinput="onSearchInput"
        bindconfirm="onSearchConfirm"
        confirm-type="search"
      />
      <!-- 清空按钮 -->
      <view wx:if="{{searchText}}" class="search-clear" bindtap="onClearSearch">
        <image src="/images/clear.png" class="clear-icon" />
      </view>
      <!-- 搜索按钮 -->
      <view class="search-btn btn btn-sm btn-sm--gold" bindtap="onSearchTap">
        <text class="search-btn-text">搜索</text>
      </view>
    </view>
  </view>
  
  <!-- 2. 商品类型选择区域 -->
  <view class="leixing-container" wx:if="{{!showSearchResult}}">
    <scroll-view 
      class="leixing-scroll" 
      scroll-x 
      scroll-with-animation
      show-scrollbar="{{false}}"
    >
      <view class="leixing-list">
        <block wx:for="{{shangpinleixing}}" wx:key="id" wx:for-index="idx">
          <view 
            class="leixing-item {{selectedLeixingId === item.id ? 'leixing-active' : ''}}" 
            bindtap="selectLeixing"
            data-id="{{item.id}}"
            data-index="{{idx}}"
          >
            <view class="leixing-image-box">
              <image 
                src="{{ossImageUrl}}{{item.tupian_url}}" 
                mode="aspectFill" 
                class="leixing-image"
              />
              <view class="leixing-glow {{selectedLeixingId === item.id ? 'leixing-glow-active' : ''}}"></view>
            </view>
            <text class="leixing-text">{{item.jieshao}}</text>
            <view class="leixing-active-bar {{selectedLeixingId === item.id ? 'leixing-active-bar-show' : ''}}"></view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  
  <!-- 3. 左右分栏布局 -->
  <view class="main-container" wx:if="{{!showSearchResult}}">
    <!-- 左边：商品专区列表 -->
    <scroll-view 
      class="zhuanqu-left" 
      scroll-y 
      enhanced="{{true}}"
      show-scrollbar="{{false}}"
      scroll-into-view="{{'zhuanqu-' + selectedZhuanquId}}"
    >
      <view class="zhuanqu-list">
        <block wx:for="{{filteredZhuanquList}}" wx:key="id">
          <view 
            id="zhuanqu-{{item.id}}"
            class="zhuanqu-item {{selectedZhuanquId === item.id ? 'zhuanqu-active' : ''}}" 
            bindtap="selectZhuanqu"
            data-id="{{item.id}}"
          >
            <view class="zhuanqu-item-content">
              <text class="zhuanqu-name">{{item.mingzi}}</text>
              <text class="zhuanqu-count">({{zhuanquGoodsCount[item.id] || 0}})</text>
            </view>
            <view class="zhuanqu-active-indicator {{selectedZhuanquId === item.id ? 'zhuanqu-indicator-glow' : ''}}"></view>
          </view>
        </block>
        
        <view wx:if="{{filteredZhuanquList.length === 0}}" class="zhuanqu-empty">
          <image src="/images/empty-box.png" class="zhuanqu-empty-icon" />
          <text class="zhuanqu-empty-text">暂无专区</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 右边：商品列表 -->
    <scroll-view 
      class="shangpin-right" 
      scroll-y 
      enhanced="{{true}}"
      show-scrollbar="{{false}}"
    >
      <view class="shangpin-list">
        <block wx:for="{{filteredShangpinList}}" wx:key="id">
          <view 
            class="shangpin-item" 
            bindtap="goToDetail"
            data-id="{{item.id}}"
          >
            <view class="shangpin-image-box">
              <image 
                src="{{ossImageUrl}}{{item.tupian_url}}" 
                mode="aspectFill" 
                class="shangpin-image"
              />
            </view>
            
            <view class="shangpin-info">
              <view class="shangpin-title">
                <text class="shangpin-title-text">{{item.biaoqian}}</text>
              </view>
              
              <view class="shangpin-footer">
                <view class="shangpin-price">
                  <text class="price-icon">¥</text>
                  <text class="price-integer">{{item.priceInteger}}</text>
                  <text class="price-decimal">.{{item.priceDecimal}}</text>
                </view>
                <view class="detail-btn">
                  <text class="detail-btn-text">了解详情</text>
                </view>
              </view>
            </view>
            
            <view class="item-divider" wx:if="{{index !== filteredShangpinList.length - 1}}"></view>
          </view>
        </block>
        
        <view wx:if="{{filteredShangpinList.length === 0 && !isLoading}}" class="shangpin-empty">
          <image src="/images/empty-goods.png" class="shangpin-empty-icon" />
          <text class="shangpin-empty-text">该专区暂无商品</text>
        </view>
      </view>
      
      <view class="load-more" wx:if="{{filteredShangpinList.length > 0}}">
        <text class="load-more-text">— 已加载全部商品 —</text>
      </view>
    </scroll-view>
  </view>
  
  <!-- 搜索结果弹窗 -->
  <view class="search-results-container" wx:if="{{showSearchResult}}">
    <view class="search-mask" bindtap="onClearSearch"></view>
    <view class="search-results-content">
      <view class="search-results-header">
        <view class="search-header-left">
          <text class="search-results-title">搜索结果</text>
          <text class="search-results-count">({{searchResults.length}}个)</text>
        </view>
        <view class="search-close" bindtap="onClearSearch">
          <image src="/images/close.png" class="close-icon" />
        </view>
      </view>
      
      <scroll-view class="search-results-list" scroll-y>
        <block wx:for="{{searchResults}}" wx:key="id">
          <view class="search-result-item" bindtap="goToDetail" data-id="{{item.id}}">
            <view class="search-result-left">
              <image 
                src="{{ossImageUrl}}{{item.tupian_url}}" 
                mode="aspectFill" 
                class="search-result-image"
              />
            </view>
            <view class="search-result-right">
              <view class="search-result-title">{{item.biaoqian}}</view>
              <view class="search-result-info">
                <text class="search-result-category">{{item.leixing_name}}</text>
                <text class="search-result-separator">·</text>
                <text class="search-result-zhuanqu">{{item.zhuanqu_name}}</text>
              </view>
              <view class="search-result-price">
                <text class="price-icon">¥</text>
                <text class="price-integer">{{item.priceInteger}}</text>
                <text class="price-decimal">.{{item.priceDecimal}}</text>
              </view>
            </view>
          </view>
        </block>
        
        <view wx:if="{{searchResults.length === 0 && !isSearching}}" class="search-empty">
          <image src="/images/search-empty.png" class="search-empty-icon" />
          <text class="search-empty-text">未找到相关商品</text>
        </view>
        
        <view wx:if="{{isSearching}}" class="search-loading">
          <view class="search-spinner">
            <view class="spinner-circle"></view>
          </view>
          <text class="search-loading-text">搜索中...</text>
        </view>
      </scroll-view>
    </view>
  </view>
  
  <!-- 全局加载状态 -->
  <view class="loading-toast loading-mask loading-mask--dark" wx:if="{{isLoading}}">
    <view class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-ring"></view>
        <view class="spinner-dot"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</view>

<!-- 底部自定义TabBar -->
<custom-tab-bar />
<global-notification id="global-notification" />