<!--pages/search/search.wxml-->
<!--章节搜索页-->
<view class="page">
  <!-- 自定义导航栏 -->
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <view class="back-btn" bindtap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="search-input-wrap">
        <view class="search-icon-small">🔍</view>
        <input 
          class="search-input" 
          placeholder="搜索章节标题或内容..." 
          value="{{keyword}}"
          bindinput="onInput"
          bindconfirm="doSearch"
          confirm-type="search"
          focus="{{true}}"
        />
        <view class="clear-btn" wx:if="{{keyword}}" bindtap="clearSearch">×</view>
      </view>
      <view class="search-btn" bindtap="doSearch">搜索</view>
    </view>
  </view>

  <!-- 主内容区 -->
  <view class="main-content" style="padding-top: {{statusBarHeight + 56}}px;">
    
    <!-- 热门搜索（未搜索时显示） -->
    <view class="hot-section" wx:if="{{!searched}}">
      <text class="section-title">热门搜索</text>
      <view class="hot-tags">
        <view 
          class="hot-tag" 
          wx:for="{{hotKeywords}}" 
          wx:key="*this"
          bindtap="onHotKeyword"
          data-keyword="{{item}}"
        >{{item}}</view>
      </view>
    </view>
    
    <!-- 热门章节推荐（未搜索时显示） -->
    <view class="hot-chapters" wx:if="{{!searched && hotChapters.length > 0}}">
      <text class="section-title">热门章节</text>
      <view class="chapter-list">
        <view 
          class="chapter-item" 
          wx:for="{{hotChapters}}" 
          wx:key="id"
          bindtap="goToRead"
          data-id="{{item.id}}"
        >
          <view class="chapter-rank">{{index + 1}}</view>
          <view class="chapter-info">
            <text class="chapter-title">{{item.title}}</text>
            <text class="chapter-part">{{item.part}}</text>
          </view>
          <view class="chapter-tag {{item.tag === '免费' ? 'tag-free' : item.tag === '热门' ? 'tag-hot' : 'tag-new'}}">{{item.tag}}</view>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="results-section" wx:if="{{searched}}">
      <!-- 加载中 -->
      <view class="loading-wrap" wx:if="{{loading}}">
        <view class="loading-spinner"></view>
        <text class="loading-text">搜索中...</text>
      </view>

      <!-- 结果列表 -->
      <block wx:elif="{{results.length > 0}}">
        <view class="results-header">
          <text class="results-count">找到 {{total}} 个结果</text>
        </view>
        
        <view class="results-list">
          <view 
            class="result-item" 
            wx:for="{{results}}" 
            wx:key="id"
            bindtap="goToRead"
            data-id="{{item.id}}"
          >
            <view class="result-header">
              <text class="result-chapter">{{item.chapterLabel}}</text>
              <view class="result-tags">
                <text class="tag tag-match" wx:if="{{item.matchType === 'title'}}">标题匹配</text>
                <text class="tag tag-match" wx:elif="{{item.matchType === 'content'}}">内容匹配</text>
                <text class="tag tag-free" wx:if="{{item.isFree}}">免费</text>
              </view>
            </view>
            <text class="result-title">{{item.title}}</text>
            <text class="result-part">{{item.part}}</text>
            <view class="result-content" wx:if="{{item.matchedContent}}">
              <text class="content-preview">{{item.matchedContent}}</text>
            </view>
            <view class="result-arrow">→</view>
          </view>
        </view>
      </block>

      <!-- 无结果 -->
      <view class="empty-wrap" wx:elif="{{!loading}}">
        <text class="empty-icon">🔍</text>
        <text class="empty-text">未找到相关章节</text>
        <text class="empty-hint">换个关键词试试</text>
      </view>
    </view>
  </view>
</view>
