<!-- 会员/订阅中心 -->
<page-meta page-style="overflow: hidden;" />
<view class="vip-page">

  <!-- ── 已是VIP，直接返回 ── -->
  <view wx:if="{{isVip && mode === 'vip'}}" class="vip-done">
    <text class="vip-done-icon">👑</text>
    <text class="vip-done-title">您已经是全频道会员</text>
    <text class="vip-done-desc">畅享全部频道，尊享专属权益</text>
    <button class="done-back-btn" bindtap="goBack">返回</button>
  </view>

  <!-- ── 主Scroll区域 ── -->
  <scroll-view
    wx:else
    scroll-y
    enhanced
    show-scrollbar="{{false}}"
    class="vip-scroll"
  >

    <!-- 头部区域，根据模式切换文案 -->
    <view class="vip-hero">
      <text class="vip-hero-title">{{mode === 'channel' ? channelName : '开通全频道会员'}}</text>
      <text class="vip-hero-desc">
        {{mode === 'channel' ? '选择适合你的订阅方案，随时随地收听' : '解锁全部频道，告别无聊早晨'}}
      </text>
    </view>

    <!-- ────── MODE: VIP 全频道 ────── -->
    <block wx:if="{{mode === 'vip'}}">
      <!-- 权益卡片 -->
      <view class="benefits-card-wrap">
        <view class="card benefits-card">
          <view class="benefits-title">
            <text class="benefit-crown">👑</text>
            <text>会员专属特权</text>
          </view>
          <view class="benefits-grid">
            <view class="benefit-item">
              <text class="benefit-check">✅</text>
              <view class="benefit-info">
                <text class="benefit-name">全频道特权</text>
                <text class="benefit-desc">所有频道自由听</text>
              </view>
            </view>
            <view class="benefit-item">
              <text class="benefit-check">🎧</text>
              <view class="benefit-info">
                <text class="benefit-name">纯净免广告</text>
                <text class="benefit-desc">收听无任何打扰</text>
              </view>
            </view>
            <view class="benefit-item">
              <text class="benefit-check">⬇️</text>
              <view class="benefit-info">
                <text class="benefit-name">音频全量下载</text>
                <text class="benefit-desc">支持离线随时听</text>
              </view>
            </view>
            <view class="benefit-item">
              <text class="benefit-check">⏰</text>
              <view class="benefit-info">
                <text class="benefit-name">晨间定时播</text>
                <text class="benefit-desc">专属智能闹钟</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 套餐 -->
      <view class="plan-section">
        <text class="plan-title">选择套餐</text>
        <view
          class="plan-card {{selectedPlan === 'vip-all' ? 'selected' : ''}}"
          bindtap="selectPlan"
          data-plan="vip-all"
        >
          <view wx:if="{{selectedPlan === 'vip-all'}}" class="plan-badge">限时特惠</view>
          <view class="plan-info">
            <text class="plan-name">全频道连续包月</text>
            <text class="plan-desc">自动续费，随时可取消</text>
          </view>
          <view class="plan-price">
            <text class="price-amount"><text class="price-symbol">¥</text>19.9</text>
            <text class="price-original">¥29.9</text>
          </view>
        </view>
      </view>
    </block>

    <!-- ────── MODE: 频道订阅 ────── -->
    <block wx:else>
      <!-- 权益说明 -->
      <view class="benefits-card-wrap">
        <view class="card benefits-card">
          <view class="benefits-title">
            <text class="benefit-crown">🎙️</text>
            <text>订阅后专属权益</text>
          </view>
          <view class="benefit-item" style="width:100%; margin-bottom:16rpx;">
            <text class="benefit-check">✅</text>
            <view class="benefit-info">
              <text class="benefit-name">无限收听该频道全部节目</text>
              <text class="benefit-desc">订阅期内随时播放，无次数限制</text>
            </view>
          </view>
          <view class="benefit-item" style="width:100%; margin-bottom:16rpx;">
            <text class="benefit-check">🔔</text>
            <view class="benefit-info">
              <text class="benefit-name">新节目第一时间通知</text>
              <text class="benefit-desc">每日晨间准时推送</text>
            </view>
          </view>
          <view class="benefit-item" style="width:100%;">
            <text class="benefit-check">🎧</text>
            <view class="benefit-info">
              <text class="benefit-name">后台播放，不中断</text>
              <text class="benefit-desc">边听边做其他事</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 价格套餐 -->
      <view class="plan-section">
        <text class="plan-title">选择方案</text>

        <!-- 包月 -->
        <view
          wx:if="{{monthlyPrice > 0}}"
          class="plan-card {{selectedPlan === 'monthly' ? 'selected' : ''}}"
          bindtap="selectPlan"
          data-plan="monthly"
        >
          <view class="plan-info">
            <text class="plan-name">包月</text>
            <text class="plan-desc">按月订阅，随时取消</text>
          </view>
          <view class="plan-price">
            <text class="price-amount"><text class="price-symbol">¥</text>{{monthlyPrice}}</text>
            <text class="price-original">/ 月</text>
          </view>
        </view>

        <!-- 包季 -->
        <view
          wx:if="{{quarterlyPrice > 0}}"
          class="plan-card {{selectedPlan === 'quarterly' ? 'selected' : ''}}"
          bindtap="selectPlan"
          data-plan="quarterly"
        >
          <view wx:if="{{_quarterlySaving > 0}}" class="plan-badge plan-badge-save">省{{_quarterlySaving}}元</view>
          <view class="plan-info">
            <text class="plan-name">包季</text>
            <text class="plan-desc">约¥{{_quarterlyMonthly}}/月，比包月更划算</text>
          </view>
          <view class="plan-price">
            <text class="price-amount"><text class="price-symbol">¥</text>{{quarterlyPrice}}</text>
            <text class="price-original">/ 季</text>
          </view>
        </view>

        <!-- 包年 -->
        <view
          wx:if="{{annualPrice > 0}}"
          class="plan-card {{selectedPlan === 'annual' ? 'selected' : ''}}"
          bindtap="selectPlan"
          data-plan="annual"
        >
          <view class="plan-badge plan-badge-hot">最受欢迎</view>
          <view wx:if="{{_annualSaving > 0}}" class="plan-badge plan-badge-save" style="right: 96rpx;">省{{_annualSaving}}元</view>
          <view class="plan-info">
            <text class="plan-name">包年</text>
            <text class="plan-desc">约¥{{_annualMonthly}}/月，最优惠</text>
          </view>
          <view class="plan-price">
            <text class="price-amount"><text class="price-symbol">¥</text>{{annualPrice}}</text>
            <text class="price-original">/ 年</text>
          </view>
        </view>
      </view>
    </block>

  </scroll-view>

  <!-- 底部支付栏（scroll-view 外，flex 布局固定底部，真机可靠） -->
  <view class="pay-bar" wx:if="{{!isVip || mode === 'channel'}}">
    <view class="pay-summary">
      <text class="pay-label">总计：</text>
      <text class="pay-amount">¥{{currentPrice}}</text>
    </view>
    <view class="pay-method">
      <text class="pay-method-text">使用 微信支付 支付</text>
      <text class="wechat-check">✓</text>
    </view>
    <t-button
      theme="primary"
      shape="round"
      block
      size="large"
      bind:tap="onPay"
      style="--td-button-primary-bg-color: #FF9D42; --td-button-primary-active-bg-color: #E88A35;"
    >
      {{mode === 'channel' ? '立即订阅并支付' : '立即开通并支付'}}
    </t-button>
  </view>
</view>
