<!-- 订阅支付页 -->
<page-meta page-style="overflow: hidden;" />
<view class="subscribe-page">

  <!-- 顶部频道信息 -->
  <view class="channel-card">
    <view class="channel-avatar">
      <text class="channel-avatar-emoji">📻</text>
    </view>
    <text class="channel-title">{{channelName}}</text>
    <text class="channel-desc">选择适合你的订阅方案</text>
  </view>

  <!-- 价格套餐选择 -->
  <view class="plans-wrap">
    <!-- 包月 -->
    <view
      wx:if="{{monthlyPrice > 0}}"
      class="plan-card {{selectedPlan === 'monthly' ? 'selected' : ''}}"
      bindtap="selectPlan"
      data-plan="monthly"
    >
      <view class="plan-top">
        <text class="plan-name">包月</text>
        <view class="plan-badge" wx:if="{{selectedPlan === 'monthly'}}">
          <t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
        </view>
      </view>
      <text class="plan-price">¥{{monthlyPrice}}</text>
      <text class="plan-unit">/ 月</text>
    </view>

    <!-- 包季 -->
    <view
      wx:if="{{quarterlyPrice > 0}}"
      class="plan-card {{selectedPlan === 'quarterly' ? 'selected' : ''}}"
      bindtap="selectPlan"
      data-plan="quarterly"
    >
      <view class="plan-top">
        <text class="plan-name">包季</text>
        <t-tag wx:if="{{quarterlyPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_quarterlySaving}}元</t-tag>
        <view class="plan-badge" wx:if="{{selectedPlan === 'quarterly'}}">
          <t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
        </view>
      </view>
      <text class="plan-price">¥{{quarterlyPrice}}</text>
      <text class="plan-unit">/ 季 · 约¥{{_quarterlyMonthly}}/月</text>
    </view>

    <!-- 包年 -->
    <view
      wx:if="{{annualPrice > 0}}"
      class="plan-card popular {{selectedPlan === 'annual' ? 'selected' : ''}}"
      bindtap="selectPlan"
      data-plan="annual"
    >
      <view class="plan-hot-tag">最受欢迎</view>
      <view class="plan-top">
        <text class="plan-name">包年</text>
        <t-tag wx:if="{{annualPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_annualSaving}}元</t-tag>
        <view class="plan-badge" wx:if="{{selectedPlan === 'annual'}}">
          <t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
        </view>
      </view>
      <text class="plan-price">¥{{annualPrice}}</text>
      <text class="plan-unit">/ 年 · 约¥{{_annualMonthly}}/月</text>
    </view>
  </view>

  <!-- 权益说明 -->
  <view class="benefits">
    <view class="benefit-item">
      <t-icon name="check" size="28rpx" color="#FF9D42" />
      <text>订阅后可无限收听该频道所有节目</text>
    </view>
    <view class="benefit-item">
      <t-icon name="check" size="28rpx" color="#FF9D42" />
      <text>后台播放，边听边做其他事</text>
    </view>
    <view class="benefit-item">
      <t-icon name="check" size="28rpx" color="#FF9D42" />
      <text>新节目第一时间推送通知</text>
    </view>
  </view>

  <!-- 底部支付按钮 -->
  <view class="pay-bar">
    <view class="pay-amount" wx:if="{{selectedPlan}}">
      <text class="pay-label">合计</text>
      <text class="pay-price">¥{{currentPrice}}</text>
    </view>
    <view class="pay-btn tap-active" bindtap="onPay">
      <text>立即订阅</text>
    </view>
  </view>

</view>
