<!-- 收听历史 —— 按日期倒序的已听列表 -->
<view class="history-page">

  <!-- 筛选Tab + 清空按钮 -->
  <view class="filter-header">
    <view class="filter-tabs">
      <text
        class="tab {{filter === 'all' ? 'active' : ''}}"
        bindtap="setFilter"
        data-val="all"
      >全部片段</text>
      <text
        class="tab {{filter === 'subscribed' ? 'active' : ''}}"
        bindtap="setFilter"
        data-val="subscribed"
      >仅看已订阅</text>
    </view>
    <view class="clear-btn tap-active" bindtap="onClear">
      <text class="clear-icon">🗑</text>
      <text class="clear-text">清空</text>
    </view>
  </view>

  <!-- 历史列表 -->
  <view class="list-area">

    <!-- 空状态 -->
    <view wx:if="{{cleared || historyList.length === 0}}" class="empty-state">
      <view class="empty-icon-wrap">
        <text class="empty-emoji">📭</text>
      </view>
      <text class="empty-text">暂无收听历史</text>
    </view>

    <!-- 历史条目 -->
    <view
      wx:for="{{historyList}}"
      wx:key="id"
      class="history-item card"
      bindtap="onPlay"
      data-id="{{item.id}}"
    >
      <!-- 频道图标 -->
      <view class="h-icon" style="background: {{item._bgColor}};">
        <image wx:if="{{item._coverUrl}}" src="{{item._coverUrl}}" class="h-cover-img" mode="aspectFill" />
        <text wx:else class="h-emoji">{{item._icon}}</text>
      </view>

      <!-- 信息 -->
      <view class="h-info">
        <text class="h-channel">{{item._domainName}}</text>
        <text class="h-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item.title}}</text>
        <text class="h-meta">{{item._friendlyDate}} · {{item.durationText}}</text>
      </view>

      <!-- 播放指示 -->
      <view wx:if="{{item._isThisPlaying && isPlaying}}" class="playing-indicator">
        <view class="bar bar-1"></view>
        <view class="bar bar-2"></view>
        <view class="bar bar-3"></view>
      </view>
      <view wx:else class="play-mini">
        <image src="/assets/icons/play.svg" class="play-mini-icon" />
      </view>
    </view>

  </view>
  <view style="height: 200rpx;"></view>

  <global-player />
</view>
