<view class="page safe-bottom">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left" bindtap="onBack">
      <image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
      <text class="unified-back-text">返回</text>
    </view>
    <text class="unified-header-title">我的团队</text>
    <view class="unified-header-right"></view>
  </view>

  <view class="wrap" style="padding-top: 214rpx">
    <!-- Guardian Member Card -->
    <view class="guardian-card">
       <view class="guardian-header">
         <view class="icon-box">
           <app-icon name="users" size="32" color="#FFFFFF" />
         </view>
         <text class="guardian-title">{{cardTitle}}</text>
       </view>
       
       <view class="stats-row">
         <view class="stat-col">
           <text class="stat-label">直推人数</text>
           <text class="stat-num">{{stats.directReferrals || list.length}}</text>
         </view>
         <view class="stat-col">
           <text class="stat-label">团队总计</text>
           <text class="stat-num">{{stats.totalReferrals}}</text>
         </view>
       </view>
    </view>

    <!-- My Direct Referrals Title -->
    <view class="section-header">
      <view class="header-left">
        <app-icon name="trending-up" size="24" color="#B06AB3" />
        <text class="header-title">我的直推</text>
      </view>
    </view>

    <!-- Member List -->
    <view class="member-list">
      <view wx:if="{{loading}}" class="loading">加载中...</view>
      <view wx:elif="{{list.length === 0}}" class="empty">暂无直推成员</view>
      <view wx:else>
        <view class="member-card" wx:for="{{list}}" wx:key="userId">
           <image class="member-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill" binderror="onAvatarError" data-index="{{index}}" />
           <view class="member-info">
             <view class="name-row">
               <text class="member-name">{{item.userName}}</text>
               <view class="tag-badge {{item.levelClass}}">{{item.levelText}}</view>
             </view>
             <text class="member-meta">{{item.boundAtText}}</text>
           </view>
        </view>
      </view>
    </view>
  </view>
</view>

