<!-- pages/referrals/referrals.wxml -->
<view class="container">
  <!-- 固定导航栏 -->
  <view class="nav-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">推荐用户列表</view>
    </view>
  </view>

  <!-- 内容区域 -->
  <view class="filter-bar" style="top: {{totalNavHeight}}px;">
    <view class="search-box">
      <icon type="search" size="14" color="#9CA3AF"></icon>
      <input 
        type="text" 
        placeholder="搜索用户昵称" 
        value="{{searchKeyword}}" 
        bindinput="onSearchInput" 
        bindconfirm="onSearch"
        confirm-type="search"
      />
      <icon wx:if="{{searchKeyword}}" type="clear" size="14" color="#9CA3AF" bindtap="onClearSearch"></icon>
    </view>
    <picker bindchange="onLevelChange" value="{{levelIndex}}" range="{{levelRange}}" range-key="label">
      <view class="level-picker">
        <text>{{levelRange[levelIndex].label}}</text>
        <app-icon name="chevron-down" size="24" color="#9CA3AF" />
      </view>
    </picker>
  </view>

  <scroll-view 
    scroll-y 
    class="content-scroll" 
    style="padding-top: {{totalNavHeight + 50}}px;"
    enhanced
    show-scrollbar="{{false}}"
    bindscrolltolower="onReachBottom"
  >
    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="stats-item">
        <view class="stats-label">总推荐人数</view>
        <view class="stats-value">{{stats.totalReferrals}}人</view>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <view class="stats-label">累计贡献</view>
        <view class="stats-value">¥{{formatMoney(stats.totalContribution)}}</view>
      </view>
    </view>

    <!-- 用户列表 -->
    <view class="list-container" wx:if="{{list.length > 0}}">
      <view class="list-item" wx:for="{{list}}" wx:key="userId" bindtap="viewOrders" data-item="{{item}}">
        <view class="user-info">
          <image src="{{item.userAvatar || defaultAvatar}}" class="user-avatar" mode="aspectFill"></image>
          <view class="user-details">
            <view class="user-name-row">
              <text class="user-name">{{item.userName}}</text>
              <text class="user-level" wx:if="{{item.levelText !== '普通用户'}}">{{item.levelText}}</text>
            </view>
            <view class="user-time">绑定时间: {{formatTime(item.boundAt)}}</view>
            <view class="user-meta">
              <text>推荐人数: {{item.referralCount || 0}}</text>
              <text style="margin-left: 20rpx;">个人业绩: ¥{{formatMoney(item.totalContribution || 0)}}</text>
            </view>
          </view>
        </view>
        <view class="arrow-right">
          <app-icon name="chevron-right" size="32" color="#D1D5DB" />
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" wx:if="{{hasMore && !loading}}">
        <text>上拉加载更多</text>
      </view>
      
      <!-- 加载中 -->
      <view class="load-more" wx:if="{{loading && list.length > 0}}">
        <text>加载中...</text>
      </view>
      
      <!-- 没有更多 -->
      <view class="load-more" wx:if="{{!hasMore && list.length > 0}}">
        <text>没有更多了</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{isEmpty && !loading}}">
      <image src="/images/empty-referrals.png" class="empty-icon" mode="aspectFit"></image>
      <text class="empty-text">暂无推荐用户</text>
      <text class="empty-tip">分享您的推荐码，邀请好友注册</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" wx:if="{{loading && list.length === 0}}">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </scroll-view>
</view>
