<view class="page">
  <navigation-bar title="药品百科" back="{{false}}" color="white" background="#4A90D9" />

  <view class="search-section">
    <view class="search-box">
      <view class="search-icon">🔍</view>
      <input class="search-input" placeholder="搜索药品名称、功效、分类…" value="{{searchText}}" bindinput="onSearchInput" confirm-type="search" />
      <view class="search-clear" wx:if="{{searchText}}" bindtap="onClearSearch">✕</view>
    </view>
  </view>

  <scroll-view scroll-x class="category-scroll" wx:if="{{!searchText}}">
    <view wx:for="{{categories}}" wx:key="*this" class="cat-chip {{activeCategory === item ? 'active' : ''}}" data-cat="{{item}}" bindtap="onCategoryTap">{{item}}</view>
  </scroll-view>

  <view class="top-search" wx:if="{{!searchText && activeCategory === '全部'}}">
    <view class="top-label">🔥 热门搜索</view>
    <view class="top-tags">
      <view wx:for="{{topSearches}}" wx:key="*this" class="top-tag" data-kw="{{item}}" bindtap="onTopSearchTap">{{item}}</view>
    </view>
  </view>

  <view class="result-bar" wx:if="{{searchText || activeCategory !== '全部'}}">
    <view class="result-text">{{activeCategory !== '全部' ? activeCategory + ' · ' : ''}}共 {{drugList.length}} 个药品</view>
  </view>

  <view class="drug-list">
    <view wx:for="{{drugList}}" wx:key="id" class="drug-card" data-id="{{item.id}}" bindtap="goDetail">
      <view class="card-icon">
        <image class="card-img" src="{{item.image}}" mode="aspectFit" />
      </view>
      <view class="card-body">
        <view class="card-name">{{item.name}}</view>
        <view class="card-generic">{{item.genericName}} · {{item.form}}</view>
        <view class="card-footer">
          <view class="card-category">{{item.category}}</view>
          <view class="card-otc {{item.isOTC ? 'otc' : 'rx'}}">{{item.isOTC ? 'OTC' : 'Rx'}}</view>
        </view>
      </view>
      <view class="card-right">
        <view class="card-price">{{item.price}}</view>
        <view class="card-arrow">›</view>
      </view>
    </view>
  </view>

  <view class="empty-state" wx:if="{{drugList.length === 0}}">
    <view class="empty-icon">🔍</view>
    <view class="empty-text">没有找到相关药品</view>
    <view class="empty-desc">试试其他关键词或分类</view>
  </view>
</view>
