<!-- pages/dashou-paihang/dashou-paihang.wxml -->
<view class="dashou-paihang-page">
  
  <!-- 赛博朋克背景元素 -->
  <view class="cyber-bg">
    <!-- 网格线 -->
    <view class="cyber-grid"></view>
    <!-- 扫描线 -->
    <view class="cyber-scanline"></view>
    <!-- 流动数据流 -->
    <view class="data-streams">
      <view class="stream stream-1"></view>
      <view class="stream stream-2"></view>
      <view class="stream stream-3"></view>
    </view>
    <!-- 浮动粒子 -->
    <view class="floating-particles">
      <view class="particle" wx:for="{{12}}" wx:key="index"></view>
    </view>
  </view>
  
  <!-- 页面头部 -->
  <view class="page-header">
    <!-- 标题 -->
    <view class="title-container">
      <text class="main-title">大神排行榜</text>
      <view class="title-line"></view>
      <text class="sub-title">DASHOU RANKING</text>
    </view>
    
    <!-- 切换按钮 -->
    <view class="toggle-container">
      <view class="toggle-bg" style="transform: translateX({{paihangLeixing == 1 ? '0' : '100%'}});"></view>
      <view 
        class="toggle-btn {{paihangLeixing == 1 ? 'active' : ''}} {{btnFangdou ? 'disabled' : ''}}"
        data-leixing="1"
        bindtap="qiehuangPaihangLeixing"
      >
        <text class="toggle-text">今日收入</text>
        <view class="toggle-line {{paihangLeixing == 1 ? 'active' : ''}}"></view>
      </view>
      <view 
        class="toggle-btn {{paihangLeixing == 2 ? 'active' : ''}} {{btnFangdou ? 'disabled' : ''}}"
        data-leixing="2"
        bindtap="qiehuangPaihangLeixing"
      >
        <text class="toggle-text">今月收入</text>
        <view class="toggle-line {{paihangLeixing == 2 ? 'active' : ''}}"></view>
      </view>
    </view>
  </view>
  
  <!-- 加载状态 -->
  <view wx:if="{{jiazaiZhuangtai}}" class="loading-state">
    <view class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-outer"></view>
        <view class="spinner-inner"></view>
        <view class="spinner-core"></view>
      </view>
      <text class="loading-text">数据加载中</text>
      <text class="loading-sub">Connecting to server...</text>
    </view>
  </view>
  
  <!-- 排行榜内容 -->
  <view wx:else class="ranking-content">
    
    <!-- 虚拟数据提示 -->
    <view wx:if="{{!xianshiZhenshiShuju}}" class="demo-notice">
      <view class="notice-icon">📡</view>
      <view class="notice-content">
        <text class="notice-title">排行榜数据准备中</text>
        <text class="notice-desc">当前显示为模拟数据，实时排名即将开放</text>
      </view>
      <view class="notice-glow"></view>
    </view>
    
    <!-- ========== 前三名区域 ========== -->
    <view class="top-three-section" wx:if="{{qiansanMing.length > 0}}">
      
      <!-- 第二名 -->
      <view class="rank-card rank-2 {{flashCardIndex == 1 && flashCardType == 'top3' ? 'flash' : ''}}"
            animation="{{flashCardIndex == 1 && flashCardType == 'top3' ? flashAnimation : ''}}"
            data-index="1" data-type="top3" bindtap="handleCardTap">
        
        <view class="podium-base podium-silver">
          <view class="podium-glow"></view>
          <text class="podium-number">2</text>
        </view>
        
        <view class="rank-content">
          <!-- 头像容器 -->
          <view class="avatar-frame frame-silver">
            <view class="avatar-container">
              <image class="avatar-image" src="{{qiansanMing[1] ? qiansanMing[1].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
              <view class="avatar-halo halo-silver"></view>
              <view class="avatar-sparkles">
                <view class="sparkle s1"></view>
                <view class="sparkle s2"></view>
                <view class="sparkle s3"></view>
              </view>
            </view>
            <view class="rank-badge badge-silver">2</view>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info-card">
            <view class="info-header">
              <text class="user-name">{{qiansanMing[1] ? qiansanMing[1].nicheng : '等待上榜'}}</text>
            </view>
            <view class="info-body">
              <view class="uid-row">
                <text class="uid-label">ID:</text>
                <text class="uid-value">{{qiansanMing[1] ? qiansanMing[1].uid : '----'}}</text>
              </view>
              <view class="income-row">
                <text class="income-label">收入:</text>
                <view class="income-value">
                  <text class="currency">¥</text>
                  <text class="amount {{qiansanMing[1] ? qiansanMing[1].jineClass : ''}}">{{qiansanMing[1] ? qiansanMing[1].jine : '0.00'}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 第一名 -->
      <view class="rank-card rank-1 {{flashCardIndex == 0 && flashCardType == 'top3' ? 'flash' : ''}}"
            animation="{{flashCardIndex == 0 && flashCardType == 'top3' ? flashAnimation : ''}}"
            data-index="0" data-type="top3" bindtap="handleCardTap">
        
        <!-- 皇冠 -->
        <view class="crown-container" animation="{{crownAnimation}}">
          <view class="crown">
            <text class="crown-icon">👑</text>
            <view class="crown-rays">
              <view class="ray ray-1"></view>
              <view class="ray ray-2"></view>
              <view class="ray ray-3"></view>
              <view class="ray ray-4"></view>
              <view class="ray ray-5"></view>
              <view class="ray ray-6"></view>
            </view>
            <view class="crown-glow"></view>
          </view>
        </view>
        
        <view class="podium-base podium-gold">
          <view class="podium-glow"></view>
          <text class="podium-number">1</text>
        </view>
        
        <view class="rank-content">
          <!-- 头像容器 -->
          <view class="avatar-frame frame-gold">
            <view class="avatar-container">
              <image class="avatar-image" src="{{qiansanMing[0] ? qiansanMing[0].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
              <view class="avatar-halo halo-gold"></view>
              <view class="avatar-sparkles">
                <view class="sparkle s1"></view>
                <view class="sparkle s2"></view>
                <view class="sparkle s3"></view>
                <view class="sparkle s4"></view>
              </view>
            </view>
            <view class="rank-badge badge-gold">1</view>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info-card">
            <view class="info-header">
              <text class="user-name">{{qiansanMing[0] ? qiansanMing[0].nicheng : '等待上榜'}}</text>
            </view>
            <view class="info-body">
              <view class="uid-row">
                <text class="uid-label">ID:</text>
                <text class="uid-value">{{qiansanMing[0] ? qiansanMing[0].uid : '----'}}</text>
              </view>
              <view class="income-row">
                <text class="income-label">收入:</text>
                <view class="income-value">
                  <text class="currency">¥</text>
                  <text class="amount {{qiansanMing[0] ? qiansanMing[0].jineClass : ''}}">{{qiansanMing[0] ? qiansanMing[0].jine : '0.00'}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 第三名 -->
      <view class="rank-card rank-3 {{flashCardIndex == 2 && flashCardType == 'top3' ? 'flash' : ''}}"
            animation="{{flashCardIndex == 2 && flashCardType == 'top3' ? flashAnimation : ''}}"
            data-index="2" data-type="top3" bindtap="handleCardTap">
        
        <view class="podium-base podium-bronze">
          <view class="podium-glow"></view>
          <text class="podium-number">3</text>
        </view>
        
        <view class="rank-content">
          <!-- 头像容器 -->
          <view class="avatar-frame frame-bronze">
            <view class="avatar-container">
              <image class="avatar-image" src="{{qiansanMing[2] ? qiansanMing[2].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
              <view class="avatar-halo halo-bronze"></view>
              <view class="avatar-sparkles">
                <view class="sparkle s1"></view>
                <view class="sparkle s2"></view>
                <view class="sparkle s3"></view>
              </view>
            </view>
            <view class="rank-badge badge-bronze">3</view>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info-card">
            <view class="info-header">
              <text class="user-name">{{qiansanMing[2] ? qiansanMing[2].nicheng : '等待上榜'}}</text>
            </view>
            <view class="info-body">
              <view class="uid-row">
                <text class="uid-label">ID:</text>
                <text class="uid-value">{{qiansanMing[2] ? qiansanMing[2].uid : '----'}}</text>
              </view>
              <view class="income-row">
                <text class="income-label">收入:</text>
                <view class="income-value">
                  <text class="currency">¥</text>
                  <text class="amount {{qiansanMing[2] ? qiansanMing[2].jineClass : ''}}">{{qiansanMing[2] ? qiansanMing[2].jine : '0.00'}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- ========== 其他排名列表 ========== -->
    <view class="other-ranks-section" wx:if="{{paihangShuju.length > 0}}">
      <view class="section-title">
        <view class="title-line"></view>
        <text class="title-text">其他排名</text>
        <view class="title-line"></view>
      </view>
      
      <view class="rank-list">
        <view class="rank-item {{flashCardIndex == index && flashCardType == 'normal' ? 'flash' : ''}}"
              wx:for="{{paihangShuju}}" wx:key="index"
              animation="{{flashCardIndex == index && flashCardType == 'normal' ? flashAnimation : ''}}"
              data-index="{{index}}" data-type="normal" bindtap="handleCardTap">
          
          <view class="rank-number">
            <text class="number-text">{{xianshiZhenshiShuju ? index + 4 : index + 1}}</text>
            <view class="number-glow"></view>
          </view>
          
          <view class="rank-avatar">
            <image class="rank-avatar-img" src="{{item.full_touxiang}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
            <view class="rank-avatar-halo"></view>
          </view>
          
          <view class="rank-info">
            <text class="rank-name">{{item.nicheng}}</text>
            <text class="rank-uid">UID: {{item.uid}}</text>
          </view>
          
          <view class="rank-income">
            <text class="income-currency">¥</text>
            <text class="income-amount {{item.jineClass}}">{{item.jine}}</text>
            <view class="income-glow"></view>
          </view>
          
          <view class="rank-hover"></view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view wx:if="{{xianshiZhenshiShuju && paihangShuju.length === 0 && qiansanMing.length === 0}}" class="empty-state">
      <view class="empty-icon">🏆</view>
      <text class="empty-title">暂无排名数据</text>
      <text class="empty-desc">成为第一个登榜的大手吧</text>
    </view>
  </view>
</view>
<global-notification id="global-notification" />
