<view class="page safe-bottom">
  <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>

  <!-- Top Gradient Card -->
  <view class="top-section" style="padding-top: {{totalNavHeight + 10}}px">
     <view class="commission-card">
        <view class="card-header">
           <app-icon name="wallet" size="24" color="#FFFFFF" />
           <text class="card-title">我的账户</text>
        </view>
        
        <text class="balance-label">可提现金额 (元)</text>
        <text class="balance-value">{{commissionBalance}}</text>

        <view class="divider"></view>

        <view class="stats-row">
            <view class="stat-item">
                <app-icon name="clock" size="16" color="rgba(255,255,255,0.8)" />
                <text class="stat-text">待结算 ¥ {{pendingAmount}}</text>
            </view>
        </view>
        <view class="stats-row" style="margin-top: 12rpx;">
            <view class="stat-item">
                <app-icon name="check-circle" size="16" color="rgba(255,255,255,0.8)" />
                <text class="stat-text">累计结算 ¥ {{totalCommission}}</text>
            </view>
        </view>
     </view>
  </view>

  <!-- Title -->
  <view class="record-title-row">
      <text class="record-title">佣金记录</text>
  </view>

  <!-- Tabs -->
  <view class="tabs-container">
     <view class="tab-item {{currentTab === 'all' ? 'active' : ''}}" bindtap="onTabChange" data-tab="all">
         <text>全部</text>
     </view>
     <view class="tab-item {{currentTab === 'settled' ? 'active-text' : ''}}" bindtap="onTabChange" data-tab="settled">
         <text>已结算</text>
     </view>
     <view class="tab-item {{currentTab === 'pending' ? 'active-text' : ''}}" bindtap="onTabChange" data-tab="pending">
         <text>待结算</text>
     </view>
  </view>

  <!-- List -->
  <view class="record-list">
      <view wx:if="{{loading}}" class="loading">加载中...</view>
      <view wx:elif="{{commissionList.length === 0}}" class="empty">暂无记录</view>
      
      <block wx:else>
          <view class="record-card" wx:for="{{commissionList}}" wx:key="id">
              <view class="card-top">
                 <view class="left-info">
                     <image class="user-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill"></image>
                     <view class="text-info">
                         <text class="user-name">{{item.title}}</text>
                         <text class="user-role">{{item.desc}}</text>
                     </view>
                 </view>
                 <view class="right-info">
                     <text class="amount-val">¥{{item.amount}}</text>
                     <view class="status-badge {{item.status === 'settled' ? 'green' : 'gray'}}">
                         <text>{{item.statusText}}</text>
                     </view>
                 </view>
              </view>
              <view class="card-bottom">
                  <text class="record-time">{{item.time}}</text>
                  <text class="record-id">{{item.orderNo}}</text>
              </view>
          </view>
      </block>
      <view class="footer-tip">已显示全部数据</view>
  </view>
</view>
