<!--pages/dashou-chongzhi/index.wxml-->
<view class="page-container">
  <!-- ❌ 删除自定义导航栏区块 -->

  <!-- ======================= -->
  <!-- VIP会员区域 - 放在上面 -->
  <!-- ======================= -->
  <view class="vip-section">
    <view class="section-header">
      <view class="header-decoration">
        <view class="dec-line"></view>
        <view class="dec-diamond"></view>
        <text class="dec-text">VIP会员充值</text>
        <view class="dec-diamond"></view>
        <view class="dec-line"></view>
      </view>
      <text class="section-subtitle">选择你的会员</text>
    </view>

    <!-- 会员卡片滑动区域 -->
    <swiper 
      class="vip-swiper" 
      current="{{currentHuiyuanIndex}}" 
      circular="{{true}}"
      previous-margin="120rpx"
      next-margin="120rpx"
      duration="500"
      easing-function="easeOutCubic"
      bindchange="onSwiperChange">
      <swiper-item wx:for="{{huiyuanList}}" wx:key="id">
        <view class="vip-card {{index === currentHuiyuanIndex ? 'active' : ''}}" 
              data-index="{{index}}" bindtap="selectHuiyuan">
          <!-- 机甲风格边框 -->
          <view class="card-frame">
            <view class="frame-corner tl"></view>
            <view class="frame-corner tr"></view>
            <view class="frame-corner bl"></view>
            <view class="frame-corner br"></view>
            <view class="frame-line top"></view>
            <view class="frame-line right"></view>
            <view class="frame-line bottom"></view>
            <view class="frame-line left"></view>
          </view>
          
          <!-- 卡片内容 -->
          <view class="card-content">
            <view class="vip-badge" wx:if="{{item.isBought}}">
              <text class="badge-text">已拥有</text>
            </view>
            
            <view class="vip-title">
              <text class="title-text">{{item.mingzi}}</text>
              <view class="title-underline"></view>
            </view>
            
            <view class="vip-price">
              <text class="price-symbol">¥</text>
              <text class="price-number">{{item.jiage}}</text>
              <text class="price-unit">/30天</text>
            </view>
            
            <view class="vip-features">
              <view class="feature-item" wx:for="{{item.features || ['特权功能', '专属标识', '优先接单']}}" 
                    wx:key="index">
                <image class="feature-icon" src="/static/images/check-tech.png"></image>
                <text class="feature-text">{{item}}</text>
              </view>
            </view>
          </view>
          
          <!-- 选中状态指示器 -->
          <view class="card-indicator" wx:if="{{index === currentHuiyuanIndex}}">
            <view class="indicator-triangle"></view>
            <view class="indicator-glow"></view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 会员详细介绍 -->
    <view class="vip-detail">
      <view class="detail-header">
        <view class="detail-title">
          <image class="detail-icon" src="/static/images/info-tech.png"></image>
          <text class="title-text">{{currentHuiyuan.mingzi}} - 会员详情</text>
        </view>
        <view class="detail-tech"></view>
      </view>
      
      <view class="detail-content">
        <scroll-view class="detail-scroll" scroll-y>
          <text class="detail-text">{{currentHuiyuan.jieshao || '加载中...'}}</text>
          
          <view class="detail-rules">
            <view class="rule-item" wx:for="{{detailRules}}" wx:key="index">
              <view class="rule-number">{{index + 1}}</view>
              <text class="rule-text">{{item}}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      
      <!-- 购买区域 - 点击按钮先弹出支付方式选择 -->
      <view class="buy-section">
        <view class="buy-info">
          <view class="price-display">
            <!-- 🔥 将“机甲能源”改为“价格” -->
            <text class="price-label">价格：</text>
            <text class="price-value">¥{{currentHuiyuan.jiage}}</text>
          </view>
          <text class="buy-desc" wx:if="{{currentHuiyuan.isBought && currentHuiyuan.buyInfo}}">
            已激活，<text class="expire-date">{{currentHuiyuan.buyInfo.daoqi}}</text>后到期
          </text>
          <text class="buy-desc" wx:else>激活会员特权</text>
        </view>
        
        <view class="buy-action">
          <view class="tech-buy-btn {{currentHuiyuan.isBought ? 'renew' : ''}}" 
                bindtap="onBuyHuiyuanClick" data-id="{{currentHuiyuan.id}}">
            <view class="buy-btn-bg"></view>
            <view class="buy-btn-glow"></view>
            <text class="buy-btn-text">
              {{currentHuiyuan.isBought ? '立即续费' : '立即激活'}}
            </text>
            <view class="buy-btn-energy">
              <view class="energy-dot"></view>
              <view class="energy-dot"></view>
              <view class="energy-dot"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- ======================= -->
  <!-- 三卡片区域 - 放在下面 -->
  <!-- ======================= -->
  <view class="tech-grid">
    <!-- 会员区域 - 高度限制最多3个，超出可滚动 -->
    <view class="tech-card huiyuan-card">
      <view class="card-header">
        <view class="card-title">
          <text class="title-text">我的会员</text>
          <view class="title-text">👑</view>
        </view>
        <view class="card-badge">{{clubmber.length}}</view>
      </view>
      
      <scroll-view 
        class="huiyuan-scroll" 
        scroll-y 
        enable-flex 
        style="height: {{huiyuanListHeight}}rpx">
        <view wx:for="{{clubmber}}" wx:key="huiyuanid" class="huiyuan-item" data-item="{{item}}" bindtap="showMemberDetail">
          <view class="huiyuan-tag tech-tag">
            <view class="tag-triangle"></view>
            <text class="tag-name">{{item.huiyuanming}}</text>
            <text class="tag-time">到期: {{formatDaoqiTime(item.daoqi)}}</text>
            <view class="tag-glow"></view>
          </view>
        </view>
        <view wx:if="{{clubmber.length === 0}}" class="empty-huiyuan">
          <image class="empty-icon" src="/static/images/empty-member.png"></image>
          <text class="empty-text">暂无会员</text>
        </view>
      </scroll-view>
      
      <view class="card-footer">
        <text class="footer-text">共{{clubmber.length}}个会员</text>
        <view class="footer-line"></view>
      </view>
    </view>

    <!-- 押金区域 - 点击充值按钮弹出押金输入弹窗 -->
    <view class="tech-card yajin-card">
      <view class="card-header">
        <view class="card-title">
          <text class="title-text">我的押金</text>
          <view class="title-text">💰</view>
        </view>
        <view class="card-corner"></view>
      </view>
      
      <view class="yajin-display">
        <view class="amount-container">
          <text class="amount-symbol">¥</text>
          <text class="amount-number">{{yajin}}</text>
        </view>
        <text class="amount-unit">可用余额</text>
      </view>
      
      <view class="tech-line"></view>
      
      <view class="action-container">
        <view class="tech-btn yajin-btn" bindtap="onYajinClick">
          <view class="btn-bg"></view>
          <text class="btn-text">立即充值</text>
          <view class="btn-arrow" style="display:none;">➤</view>
          <view class="btn-glow"></view>
        </view>
      </view>
      
      <view class="card-corner corner-bottom"></view>
    </view>

    <!-- 积分区域 - 点击补充按钮弹出支付方式选择 -->
    <view class="tech-card jifen-card">
      <view class="card-header">
        <view class="card-title">
          <text class="title-text">我的积分</text>
          <view class="title-text">⭐</view>
        </view>
      </view>
      
      <view class="jifen-display">
        <view class="circle-progress">
          <view class="circle-bg"></view>
          <view class="circle-mask" style="transform: rotate({{jifenProgress}}deg);"></view>
          <view class="circle-fill" style="transform: rotate({{jifenProgress}}deg);"></view>
          <view class="circle-center">
            <text class="jifen-value">{{jifen}}</text>
            <text class="jifen-label">积分</text>
          </view>
          <view class="circle-dots">
            <view class="circle-dot" wx:for="{{10}}" wx:key="index" 
                  style="transform: rotate({{index * 36}}deg);"></view>
          </view>
        </view>
        
        <view class="jifen-status">
          <text class="status-text" wx:if="{{jifen < 10}}">积分不足，影响接单,提现权限</text>
          <text class="status-text full" wx:else>积分充足，无需补充</text>
        </view>
      </view>
      
      <view class="action-container">
        <view class="tech-btn jifen-btn" bindtap="onJifenClick" data-disabled="{{jifen >= 10}}">
          <view class="btn-bg"></view>
          <text class="btn-text">{{jifen >= 10 ? '积分已满' : '立即补充'}}</text>
          <view class="btn-energy" wx:if="{{jifen < 10}}"></view>
          <view class="btn-glow" wx:if="{{jifen < 10}}"></view>
        </view>
      </view>
    </view>
  </view>

  <!-- ======================= -->
  <!-- 押金充值弹窗（原有，确认事件改为 onYajinConfirm） -->
  <!-- ======================= -->
  <view class="tech-modal" wx:if="{{showYajinModal}}">
    <view class="modal-backdrop" bindtap="hideYajinModal"></view>
    <view class="modal-container">
      <view class="modal-corner tl"></view>
      <view class="modal-corner tr"></view>
      <view class="modal-corner bl"></view>
      <view class="modal-corner br"></view>
      
      <view class="modal-header">
        <text class="modal-title">押金充值</text>
        <text class="modal-subtitle">充值保证金</text>
        <view class="modal-close" bindtap="hideYajinModal">
          <text class="close-text">✕</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="input-section">
          <view class="input-label">
            <image class="label-icon" src="/static/images/money-tech.png"></image>
            <text class="label-text">充值金额 (1-10000元)</text>
          </view>
          
          <view class="input-container">
            <view class="input-prefix">¥</view>
            <input 
              class="yajin-input" 
              type="digit" 
              placeholder="输入充值金额"
              placeholder-class="input-placeholder"
              value="{{yajinAmount}}"
              bindinput="onYajinInput"
              maxlength="5"
              focus="{{showYajinModal}}"/>
            <view class="input-underline"></view>
          </view>
          
          <text class="input-tip">支持1-10000元整数充值</text>
        </view>
        
        <view class="quick-section">
          <text class="quick-title">快速选择</text>
          <view class="quick-buttons">
            <view 
              class="quick-btn {{yajinAmount == '100' ? 'active' : ''}}" 
              bindtap="setYajinAmount" 
              data-amount="100">
              <text class="quick-text">100元</text>
            </view>
            <view 
              class="quick-btn {{yajinAmount == '500' ? 'active' : ''}}" 
              bindtap="setYajinAmount" 
              data-amount="500">
              <text class="quick-text">500元</text>
            </view>
            <view 
              class="quick-btn {{yajinAmount == '1000' ? 'active' : ''}}" 
              bindtap="setYajinAmount" 
              data-amount="1000">
              <text class="quick-text">1000元</text>
            </view>
            <view 
              class="quick-btn {{yajinAmount == '5000' ? 'active' : ''}}" 
              bindtap="setYajinAmount" 
              data-amount="5000">
              <text class="quick-text">5000元</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <view class="modal-btn cancel-btn" bindtap="hideYajinModal">
          <text class="btn-text">取消</text>
        </view>
        <view class="modal-divider"></view>
        <view class="modal-btn confirm-btn" bindtap="onYajinConfirm">
          <text class="btn-text">确认支付</text>
          <view class="btn-sparkle"></view>
        </view>
      </view>
    </view>
  </view>

  <!-- ====== 支付方式选择弹窗 ====== -->
  <view class="tech-modal" wx:if="{{showPayMethodModal}}">
    <view class="modal-backdrop" bindtap="hidePayMethodModal"></view>
    <view class="modal-container small">
      <view class="modal-corner tl"></view>
      <view class="modal-corner tr"></view>
      <view class="modal-corner bl"></view>
      <view class="modal-corner br"></view>
      
      <view class="modal-header">
        <text class="modal-title">选择支付方式</text>
        <view class="modal-close" bindtap="hidePayMethodModal">
          <text class="close-text">✕</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="pay-method-list">
          <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="wx">
            <image class="method-icon" src="/static/images/wechat-pay.png"></image>
            <text class="method-name">微信支付</text>
            <text class="method-desc">安全快捷</text>
          </view>
          <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="balance">
            <image class="method-icon" src="/static/images/balance-pay.png"></image>
            <text class="method-name">余额抵扣</text>
            <text class="method-desc">使用佣金或分红</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- ====== 余额抵扣身份选择弹窗 ====== -->
  <view class="tech-modal" wx:if="{{showBalanceModal}}">
    <view class="modal-backdrop" bindtap="hideBalanceModal"></view>
    <view class="modal-container">
      <view class="modal-corner tl"></view>
      <view class="modal-corner tr"></view>
      <view class="modal-corner bl"></view>
      <view class="modal-corner br"></view>
      
      <view class="modal-header">
        <text class="modal-title">选择抵扣身份</text>
        <view class="modal-close" bindtap="hideBalanceModal">
          <text class="close-text">✕</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="balance-list">
          <view wx:for="{{balanceOptions}}" wx:key="id" class="balance-item" 
                data-id="{{item.id}}" bindtap="onBalanceSelect">
            <view class="balance-info">
              <text class="balance-name">{{item.jieshao}}</text>
              <text class="balance-amount">需¥{{item.xuyao}}</text>
            </view>
            <view class="balance-arrow">➤</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- ====== 余额抵扣确认弹窗 ====== -->
  <view class="tech-modal" wx:if="{{showConfirmModal}}">
    <view class="modal-backdrop" bindtap="hideConfirmModal"></view>
    <view class="modal-container">
      <view class="modal-corner tl"></view>
      <view class="modal-corner tr"></view>
      <view class="modal-corner bl"></view>
      <view class="modal-corner br"></view>
      
      <view class="modal-header">
        <text class="modal-title">确认抵扣</text>
        <view class="modal-close" bindtap="hideConfirmModal">
          <text class="close-text">✕</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="confirm-detail">
          <view class="detail-row">
            <text class="detail-label">抵扣身份：</text>
            <text class="detail-value">{{selectedBalanceInfo && selectedBalanceInfo.jieshao}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">所需金额：</text>
            <text class="detail-value">¥{{selectedBalanceInfo && selectedBalanceInfo.xuyao}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">实际扣除：</text>
            <text class="detail-value">¥{{selectedBalanceInfo && selectedBalanceInfo.xuyao}}</text>
          </view>
          <view class="detail-tip">确认后将从您的余额中扣除</view>
        </view>
      </view>
      
      <view class="modal-footer">
        <view class="modal-btn cancel-btn" bindtap="hideConfirmModal">
          <text class="btn-text">取消</text>
        </view>
        <view class="modal-divider"></view>
        <view class="modal-btn confirm-btn" bindtap="confirmBalancePay">
          <text class="btn-text">确认支付</text>
          <view class="btn-sparkle"></view>
        </view>
      </view>
    </view>
  </view>

  <!-- ====== 会员详情弹窗 ====== -->
  <view class="tech-modal" wx:if="{{showMemberModal}}">
    <view class="modal-backdrop" bindtap="hideMemberModal"></view>
    <view class="modal-container">
      <view class="modal-corner tl"></view>
      <view class="modal-corner tr"></view>
      <view class="modal-corner bl"></view>
      <view class="modal-corner br"></view>
      
      <view class="modal-header">
        <text class="modal-title">会员详情</text>
        <view class="modal-close" bindtap="hideMemberModal">
          <text class="close-text">✕</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="member-detail">
          <view class="detail-row">
            <text class="detail-label">会员名称：</text>
            <text class="detail-value">{{currentMemberDetail && currentMemberDetail.huiyuanming}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">到期时间：</text>
            <text class="detail-value">{{currentMemberDetail && currentMemberDetail.daoqi}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">剩余天数：</text>
            <text class="detail-value">{{formatRemainTime(currentMemberDetail && currentMemberDetail.daoqi)}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- ❌ 删除“进入提示弹窗”整个区块 -->

  <!-- ======================= -->
  <!-- 支付加载动画（原有） -->
  <!-- ======================= -->
  <view class="tech-loading" wx:if="{{payLoading}}">
    <view class="loading-backdrop"></view>
    <view class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-ring ring-1"></view>
        <view class="spinner-ring ring-2"></view>
        <view class="spinner-ring ring-3"></view>
        <view class="spinner-core"></view>
        <view class="spinner-energy"></view>
      </view>
      <text class="loading-text">{{loadingText}}</text>
      <text class="loading-subtext">正在连接支付系统...</text>
    </view>
  </view>

  <!-- ======================= -->
  <!-- 底部机甲装饰 -->
  <!-- ======================= -->
  <view class="tech-footer">
    <view class="footer-line"></view>
    <view class="footer-text">星阙网络 © 7891 科技</view>
  </view>
</view>

<!-- 通知组件 -->
<global-notification id="global-notification" />

<!-- 🆕 统一弹窗组件 -->
<popup-notice id="popupNotice" />