<!-- 个人中心 —— 用户信息 + 订阅管理 + 菜单 -->
<view class="profile-page">

  <!-- 橙色头部背景 -->
  <view class="header-bg">
    <view class="user-info">
      <!-- 头像 -->
      <view class="avatar-wrap">
        <image wx:if="{{userInfo && userInfo.avatarId}}" src="{{userInfo.avatar.url || ''}}" class="avatar-img" mode="aspectFill" />
        <text wx:else class="avatar-emoji">😊</text>
      </view>
      <text class="user-name">
        {{userInfo.nickName || userInfo.name || '微信用户'}}
        <text wx:if="{{isVip}}" class="vip-crown">👑</text>
      </text>
      <text class="user-desc">
        {{isVip ? '全频道会员' : '免费用户 · 开通会员畅听全频道'}}
      </text>
    </view>
  </view>

  <!-- 订阅管理卡片（上移覆盖） -->
  <view class="sub-card-wrap">
    <view class="card sub-card">

      <!-- 空状态 -->
      <view wx:if="{{subscribedData.length === 0}}" class="sub-empty">
        <text class="sub-empty-text">暂未订阅任何频道</text>
        <button class="btn-ghost" bindtap="goDiscover">去广场添加</button>
      </view>

      <!-- 订阅列表 -->
      <view wx:else>
        <view
          wx:for="{{subscribedData}}"
          wx:key="id"
          class="sub-item"
        >
          <view class="sub-item-left">
            <view class="sub-icon" style="background: {{item.bgColor || '#F0F0F0'}};">
              <image wx:if="{{item._coverUrl}}" src="{{item._coverUrl}}" class="sub-cover-img" mode="aspectFill" />
              <text wx:else class="sub-emoji">{{item.icon || '📻'}}</text>
            </view>
            <view class="sub-info">
              <text class="sub-name">{{item.name}}</text>
              <text class="sub-tag {{item.isFree === 1 ? 'free' : ''}}">
                {{item.isFree === 1 ? '免费' : '已订阅'}}
              </text>
            </view>
          </view>
          <view class="sub-del tap-active" bindtap="onUnsubscribe" data-id="{{item.id}}" data-name="{{item.name}}">
            <text class="del-icon">🗑</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 菜单列表 -->
  <view class="menu-card-wrap">
    <view class="card menu-card">
      <view
        wx:for="{{menuItems}}"
        wx:key="id"
        class="menu-item tap-active"
        bindtap="onMenuTap"
        data-id="{{item.id}}"
      >
        <view class="menu-item-left">
          <view class="menu-icon-wrap {{item.highlight ? 'highlight' : ''}}">
            <text class="menu-emoji">{{item.icon}}</text>
          </view>
          <text class="menu-label">{{item.label}}</text>
        </view>
        <view class="menu-item-right">
          <text class="menu-desc {{item.highlight ? 'highlight' : ''}}">{{item.desc}}</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>
  </view>

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