<!-- 频道广场 —— 后端频道列表 + 分类筛选 -->
<page-meta page-style="overflow: hidden;" />
<view class="discover-page">

  <!-- 分类筛选（横向滚动） -->
  <scroll-view scroll-x enhanced show-scrollbar="{{false}}" class="filter-bar">
    <view
      wx:for="{{categories}}"
      wx:key="id"
      class="filter-tag {{activeFilter === item.id ? 'active' : ''}}"
      bindtap="onFilter"
      data-cat="{{item.id}}"
    >
      <text>{{item.name}}</text>
    </view>
  </scroll-view>

  <!-- 频道网格（可滚动） -->
  <scroll-view scroll-y enhanced show-scrollbar="{{false}}" class="grid-scroll">

    <!-- 加载中（骨架屏） -->
    <block wx:if="{{loading}}">
      <view class="grid">
        <view class="grid-item skeleton-item" wx:for="{{[1,2,3,4,5,6]}}" wx:key="*this">
          <view class="skele-circle skele-bg"></view>
          <view class="skele-line skele-bg"></view>
          <view class="skele-btn skele-bg"></view>
        </view>
      </view>
    </block>

    <block wx:else>
      <!-- 空状态 -->
      <view wx:if="{{filteredDomains.length === 0}}" class="empty-wrap">
        <t-empty description="暂无频道" />
      </view>

      <!-- 频道网格 -->
      <view class="grid" wx:else>
        <view
          wx:for="{{filteredDomains}}"
          wx:key="id"
          class="grid-item"
        >
          <!-- 封面 emoji -->
          <view class="item-icon" style="background: {{item.bgColor || '#FFE8CC'}};" bindtap="goDetail" data-id="{{item.id}}">
            <text class="icon-emoji">{{item.cover || '📻'}}</text>
          </view>

          <!-- 名称 -->
          <text class="item-name" bindtap="goDetail" data-id="{{item.id}}">{{item.name}}</text>

          <!-- 类型标签 -->
          <view class="item-tag-row">
            <t-tag wx:if="{{item._isFree}}" size="small" variant="light" theme="success">免费</t-tag>
            <t-tag wx:elif="{{item._isVipOnly}}" size="small" variant="light" theme="warning">VIP专享</t-tag>
            <t-tag wx:elif="{{item._lowestPrice}}" size="small" variant="light" theme="default">¥{{item._lowestPrice.value}}/{{item._lowestPrice.label}}</t-tag>
          </view>

          <!-- 行动按钮 -->
          <!-- 已订阅 -->
          <view wx:if="{{item._isSubscribed}}" class="sub-btn subscribed" bindtap="onAction" data-id="{{item.id}}">
            <t-icon name="check-circle" size="28rpx" color="#999" />
            <text>已订阅</text>
          </view>

          <!-- 免费 → 收听 -->
          <view wx:elif="{{item._isFree}}" class="sub-btn free" bindtap="onAction" data-id="{{item.id}}">
            <t-icon name="play-circle" size="28rpx" color="#FFF" />
            <text>收听</text>
          </view>

          <!-- VIP专享 -->
          <view wx:elif="{{item._isVipOnly}}" class="sub-btn vip" bindtap="onAction" data-id="{{item.id}}">
            <text>👑 VIP专享</text>
          </view>

          <!-- 付费订阅 -->
          <view wx:else class="sub-btn paid" bindtap="onAction" data-id="{{item.id}}">
            <t-icon name="shop" size="28rpx" color="#FFF" />
            <text>订阅</text>
          </view>
        </view>
      </view>
    </block>

    <!-- 底部VIP横幅 -->
    <view class="vip-banner tap-active" wx:if="{{!isVip}}" bindtap="goVip">
      <view class="vip-banner-icon">
        <text>👑</text>
      </view>
      <view class="vip-banner-info">
        <text class="vip-banner-title">✨ 解锁全部频道 + 免广告</text>
        <text class="vip-banner-desc">立享极致畅听体验</text>
      </view>
      <view class="vip-banner-price">
        <text>19.9元/月</text>
      </view>
    </view>

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

  <!-- 全局播放条 -->
  <global-player />
  <t-message id="t-message" />
</view>
