<view class="page">
  <!-- 顶部导航栏 -->
  <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="container" style="padding-top: 214rpx;">
    <!-- 顶部紫色统计卡片 -->
    <view class="header-card">
      <view class="user-level-row">
        <view class="level-left">
          <view class="icon-bg">
            <app-icon name="users" size="32" color="#FFFFFF" />
          </view>
          <text class="level-name">{{levelName || '分销会员'}}</text>
        </view>
      </view>
      <view class="stats-grid">
        <view class="stat-box">
          <text class="stat-label">个人业绩</text>
          <text class="stat-value">¥{{individualPerformance || '0.00'}}</text>
        </view>
        <view class="stat-box" wx:if="{{isSoulmate}}">
          <text class="stat-label">总计业绩</text>
          <text class="stat-value">¥{{teamTotalPerformance || '0.00'}}</text>
        </view>
      </view>
    </view>

    <!-- 白色明细卡片 -->
    <view class="content-card">
      <view class="detail-tabs">
        <view class="tab-item {{currentTab === 'individual' ? 'active' : ''}}" bindtap="switchTab" data-tab="individual">
          <app-icon name="trending-up" size="36" color="{{currentTab === 'individual' ? '#B06AB3' : '#9CA3AF'}}" />
          <text class="tab-text">个人业绩明细</text>
        </view>
        <view class="tab-item {{currentTab === 'team' ? 'active' : ''}}" bindtap="switchTab" data-tab="team" wx:if="{{isSoulmate}}">
          <text class="tab-text">团队业绩明细</text>
          <app-icon name="chevron-right" size="24" color="{{currentTab === 'team' ? '#B06AB3' : '#9CA3AF'}}" />
        </view>
      </view>

      <view class="orders-section">
        <view class="section-title">最近推广订单</view>
        
        <view class="order-list">
          <view class="order-item" wx:for="{{list}}" wx:key="id">
            <image class="user-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill" binderror="onAvatarError" data-index="{{index}}" />
            <view class="order-info">
              <view class="user-name">{{item.userName}}</view>
              <view class="product-info">{{item.productName}} · {{item.userLevel}}</view>
              <view class="order-time">时间: {{item.time}}</view>
              <view class="order-no">单号: {{item.orderNo}}</view>
            </view>
            <view class="order-right">

              <text class="amount">¥{{item.orderAmount}}</text>
            </view>
          </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading-status" wx:if="{{loading}}">
          <text>加载中...</text>
        </view>
        <view class="empty-status" wx:if="{{!loading && list.length === 0}}">
          <text>暂无推广订单</text>
        </view>
        <view class="no-more" wx:if="{{!loading && list.length > 0 && !hasMore}}">
          <text>没有更多了</text>
        </view>
      </view>
    </view>
    
    <!-- 底部提示 -->
    <view class="bottom-tip" wx:if="{{!hasMore && list.length > 0}}">
      <text>已显示全部数据</text>
    </view>
  </view>
</view>
