<!-- pages/manager-rank/manager-rank.wxml -->
<view class="rank-page">

  <!-- 赛博朋克背景元素 -->
  <view class="rank-cyber-bg">
    <!-- 网格线 -->
    <view class="rank-cyber-grid"></view>
    <!-- 扫描线 -->
    <view class="rank-cyber-scanline"></view>
    <!-- 流动数据流 -->
    <view class="rank-data-streams">
      <view class="rank-stream rank-stream--1"></view>
      <view class="rank-stream rank-stream--2"></view>
      <view class="rank-stream rank-stream--3"></view>
    </view>
    <!-- 浮动粒子 -->
    <view class="rank-particle" wx:for="{{12}}" wx:key="index"></view>
  </view>

  <!-- 页面头部 -->
  <view class="rank-page-header">
    <!-- 标题 -->
    <view class="rank-title-container">
      <text class="rank-main-title">管事排行榜</text>
      <view class="rank-title-line"></view>
      <text class="rank-sub-title">GUANSHI RANKING</text>
    </view>

    <!-- 切换按钮 -->
    <view class="rank-toggle-container">
      <view class="rank-toggle-bg" style="transform: translateX({{paihangLeixing == 1 ? '0' : '100%'}});"></view>
      <view
        class="rank-toggle-btn {{paihangLeixing == 1 ? 'active' : ''}} {{btnFangdou ? 'disabled' : ''}}"
        data-leixing="1"
        bindtap="qiehuangPaihangLeixing"
      >
        <text class="rank-toggle-text">今日充值人数</text>
        <view class="rank-toggle-line {{paihangLeixing == 1 ? 'active' : ''}}"></view>
      </view>
      <view
        class="rank-toggle-btn {{paihangLeixing == 2 ? 'active' : ''}} {{btnFangdou ? 'disabled' : ''}}"
        data-leixing="2"
        bindtap="qiehuangPaihangLeixing"
      >
        <text class="rank-toggle-text">今月充值人数</text>
        <view class="rank-toggle-line {{paihangLeixing == 2 ? 'active' : ''}}"></view>
      </view>
    </view>
  </view>

  <!-- 加载状态 -->
  <view wx:if="{{jiazaiZhuangtai}}" class="rank-loading-state">
    <view class="rank-loading-spinner">
      <view class="rank-spinner-outer"></view>
      <view class="rank-spinner-inner"></view>
      <view class="rank-spinner-core"></view>
    </view>
    <text class="rank-loading-text">数据加载中</text>
    <text class="rank-loading-sub">Connecting to server...</text>
  </view>

  <!-- 排行榜内容 -->
  <view wx:else class="rank-content">

    <!-- 虚拟数据提示 -->
    <view wx:if="{{!xianshiZhenshiShuju}}" class="rank-demo-notice">
      <view class="rank-notice-icon">📡</view>
      <view class="rank-notice-content">
        <text class="rank-notice-title">排行榜数据准备中</text>
        <text class="rank-notice-desc">当前显示为模拟数据，实时排名即将开放</text>
      </view>
    </view>

    <!-- ========== 前三名区域 ========== -->
    <view class="rank-top-three" wx:if="{{qiansanMing.length > 0}}">

      <!-- 第二名 -->
      <view class="rank-card rank-card--2 {{flashCardIndex == 1 && flashCardType == 'top3' ? 'flash' : ''}}"
            animation="{{flashCardIndex == 1 && flashCardType == 'top3' ? flashAnimation : ''}}"
            data-index="1" data-type="top3" bindtap="handleCardTap">

        <view class="rank-podium-base rank-podium-silver">
          <text class="rank-podium-number">2</text>
        </view>

        <view class="rank-content">
          <!-- 头像容器 -->
          <view class="rank-avatar-frame rank-frame-silver">
            <view class="rank-avatar-container">
              <image class="rank-avatar-image" src="{{qiansanMing[1] ? qiansanMing[1].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
              <view class="rank-avatar-halo rank-halo-silver"></view>
              <view class="rank-sparkle" style="top:15%;left:15%;animation-delay:0s"></view>
              <view class="rank-sparkle" style="top:25%;right:25%;animation-delay:0.5s"></view>
              <view class="rank-sparkle" style="bottom:35%;left:35%;animation-delay:1s"></view>
            </view>
            <view class="rank-badge rank-badge-silver">2</view>
          </view>

          <!-- 用户信息 -->
          <view class="rank-user-info-card">
            <text class="rank-user-name">{{qiansanMing[1] ? qiansanMing[1].nicheng : '等待上榜'}}</text>
            <view class="rank-info-body">
              <view class="rank-uid-row">
                <text class="rank-uid-label">ID:</text>
                <text class="rank-uid-value">{{qiansanMing[1] ? qiansanMing[1].uid : '----'}}</text>
              </view>
              <view class="rank-income-row">
                <text class="rank-income-label">充值大手:</text>
                <view class="rank-income-value">
                  <text class="rank-amount {{qiansanMing[1] ? qiansanMing[1].jineClass : ''}}">{{qiansanMing[1] ? qiansanMing[1].jine : '0'}}</text>
                  <text class="rank-unit">人</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 第一名 -->
      <view class="rank-card rank-card--1 {{flashCardIndex == 0 && flashCardType == 'top3' ? 'flash' : ''}}"
            animation="{{flashCardIndex == 0 && flashCardType == 'top3' ? flashAnimation : ''}}"
            data-index="0" data-type="top3" bindtap="handleCardTap">

        <!-- 皇冠 -->
        <view class="rank-crown-container" animation="{{crownAnimation}}">
          <text class="rank-crown-icon">👑</text>
          <view class="rank-crown-glow"></view>
        </view>

        <view class="rank-podium-base rank-podium-gold">
          <text class="rank-podium-number">1</text>
        </view>

        <view class="rank-content">
          <!-- 头像容器 -->
          <view class="rank-avatar-frame rank-frame-gold">
            <view class="rank-avatar-container">
              <image class="rank-avatar-image" src="{{qiansanMing[0] ? qiansanMing[0].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
              <view class="rank-avatar-halo rank-halo-gold"></view>
              <view class="rank-sparkle" style="top:15%;left:15%;animation-delay:0s"></view>
              <view class="rank-sparkle" style="top:25%;right:25%;animation-delay:0.5s"></view>
              <view class="rank-sparkle" style="bottom:35%;left:35%;animation-delay:1s"></view>
              <view class="rank-sparkle" style="bottom:15%;right:15%;animation-delay:1.5s"></view>
            </view>
            <view class="rank-badge rank-badge-gold">1</view>
          </view>

          <!-- 用户信息 -->
          <view class="rank-user-info-card">
            <text class="rank-user-name">{{qiansanMing[0] ? qiansanMing[0].nicheng : '等待上榜'}}</text>
            <view class="rank-info-body">
              <view class="rank-uid-row">
                <text class="rank-uid-label">ID:</text>
                <text class="rank-uid-value">{{qiansanMing[0] ? qiansanMing[0].uid : '----'}}</text>
              </view>
              <view class="rank-income-row">
                <text class="rank-income-label">充值大手:</text>
                <view class="rank-income-value">
                  <text class="rank-amount {{qiansanMing[0] ? qiansanMing[0].jineClass : ''}}">{{qiansanMing[0] ? qiansanMing[0].jine : '0'}}</text>
                  <text class="rank-unit">人</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 第三名 -->
      <view class="rank-card rank-card--3 {{flashCardIndex == 2 && flashCardType == 'top3' ? 'flash' : ''}}"
            animation="{{flashCardIndex == 2 && flashCardType == 'top3' ? flashAnimation : ''}}"
            data-index="2" data-type="top3" bindtap="handleCardTap">

        <view class="rank-podium-base rank-podium-bronze">
          <text class="rank-podium-number">3</text>
        </view>

        <view class="rank-content">
          <!-- 头像容器 -->
          <view class="rank-avatar-frame rank-frame-bronze">
            <view class="rank-avatar-container">
              <image class="rank-avatar-image" src="{{qiansanMing[2] ? qiansanMing[2].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
              <view class="rank-avatar-halo rank-halo-bronze"></view>
              <view class="rank-sparkle" style="top:15%;left:15%;animation-delay:0s"></view>
              <view class="rank-sparkle" style="top:25%;right:25%;animation-delay:0.5s"></view>
              <view class="rank-sparkle" style="bottom:35%;left:35%;animation-delay:1s"></view>
            </view>
            <view class="rank-badge rank-badge-bronze">3</view>
          </view>

          <!-- 用户信息 -->
          <view class="rank-user-info-card">
            <text class="rank-user-name">{{qiansanMing[2] ? qiansanMing[2].nicheng : '等待上榜'}}</text>
            <view class="rank-info-body">
              <view class="rank-uid-row">
                <text class="rank-uid-label">ID:</text>
                <text class="rank-uid-value">{{qiansanMing[2] ? qiansanMing[2].uid : '----'}}</text>
              </view>
              <view class="rank-income-row">
                <text class="rank-income-label">充值大手:</text>
                <view class="rank-income-value">
                  <text class="rank-amount {{qiansanMing[2] ? qiansanMing[2].jineClass : ''}}">{{qiansanMing[2] ? qiansanMing[2].jine : '0'}}</text>
                  <text class="rank-unit">人</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- ========== 其他排名列表 ========== -->
    <view wx:if="{{paihangShuju.length > 0}}">
      <view class="rank-section-title">
        <view class="rank-section-line"></view>
        <text class="rank-section-text">其他排名</text>
        <view class="rank-section-line"></view>
      </view>

      <view class="rank-list-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="rank-number-text">{{xianshiZhenshiShuju ? index + 4 : index + 1}}</text>
          <view class="rank-number-glow"></view>
        </view>

        <view class="rank-list-avatar">
          <image class="rank-list-avatar-img" src="{{item.full_touxiang}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
          <view class="rank-list-avatar-halo"></view>
        </view>

        <view class="rank-list-info">
          <text class="rank-list-name">{{item.nicheng}}</text>
          <text class="rank-list-uid">UID: {{item.uid}}</text>
        </view>

        <view class="rank-list-income">
          <text class="rank-income-amount {{item.jineClass}}">{{item.jine}}</text>
          <text class="rank-income-unit">人</text>
          <view class="rank-income-glow"></view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view wx:if="{{xianshiZhenshiShuju && paihangShuju.length === 0 && qiansanMing.length === 0}}" class="rank-empty-state">
      <view class="rank-empty-icon">🏆</view>
      <text class="rank-empty-title">暂无排名数据</text>
      <text class="rank-empty-desc">成为第一个登榜的管事吧</text>
    </view>
  </view>
</view>
<global-notification id="global-notification" />
