<!-- 佣金记录（接单佣金 / 管事分佣 / 组长分红） -->
<view class="page-container">
  <view class="fixed-top">
    <!-- Tab 切换 -->
    <view class="tab-bar" wx:if="{{tabs.length > 1}}">
      <view
        wx:for="{{tabs}}"
        wx:key="key"
        class="tab-item {{activeTab === item.key ? 'active' : ''}}"
        data-key="{{item.key}}"
        bindtap="onTabTap"
      >{{item.label}}</view>
    </view>

    <!-- 管事分佣统计 -->
    <view class="stats-card" wx:if="{{activeTab === 'guanshi'}}">
      <view class="stats-main">
        <text class="stats-label">分红总额</text>
        <text class="stats-amount">¥{{fenyongzonge}}</text>
        <text class="stats-tip">累计管事分佣收益</text>
      </view>
      <view class="stats-row">
        <view class="stats-cell">
          <text class="stats-num">{{yaoqingzongshu}}</text>
          <text class="stats-sub">邀请接单员</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-cell">
          <text class="stats-num">{{chongzhiDashouShuliang}}</text>
          <text class="stats-sub">充值接单员</text>
        </view>
      </view>
    </view>

    <!-- 组长分红统计 -->
    <view class="stats-card" wx:if="{{activeTab === 'zuzhang'}}">
      <view class="stats-row three">
        <view class="stats-cell">
          <text class="stats-label-sm">分红总额</text>
          <text class="stats-amount-sm">¥{{fenhongZonge}}</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-cell">
          <text class="stats-label-sm">邀请管事</text>
          <text class="stats-num">{{yaoqingGuanshi}}</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-cell">
          <text class="stats-label-sm">分红次数</text>
          <text class="stats-num">{{fenhongCishu}}</text>
        </view>
      </view>
    </view>

    <!-- 接单佣金说明 -->
    <view class="stats-card dashou-hd" wx:if="{{activeTab === 'dashou'}}">
      <text class="dashou-title">接单佣金明细</text>
      <text class="dashou-sub">已完成 / 已结算订单的分佣记录</text>
    </view>

    <view class="refresh-btn" bindtap="shuaxinShuju">
      <text class="refresh-icon {{shuaxinKezhi ? 'spin' : ''}}">↻</text>
    </view>
  </view>

  <scroll-view
    class="scroll-area {{tabs.length > 1 ? 'has-tabs' : ''}} {{activeTab}}"
    scroll-y
    enable-back-to-top
    scroll-top="{{scrollTop}}"
    bindscrolltolower="shanglaJiazai"
  >
    <!-- 加载中 -->
    <view wx:if="{{jiazaiZhong && activeTab === 'dashou' && dashouCommissionList.length === 0}}" class="state-box">
      <view class="spinner"></view>
      <text>加载中...</text>
    </view>
    <view wx:if="{{jiazaiZhong && activeTab === 'guanshi' && guanshiList.length === 0}}" class="state-box">
      <view class="spinner"></view>
      <text>加载中...</text>
    </view>
    <view wx:if="{{jiazaiZhong && activeTab === 'zuzhang' && zuzhangList.length === 0}}" class="state-box">
      <view class="spinner"></view>
      <text>加载中...</text>
    </view>

    <!-- 接单佣金列表 -->
    <block wx:if="{{activeTab === 'dashou'}}">
      <view wx:if="{{!jiazaiZhong && dashouCommissionList.length === 0}}" class="empty-box">
        <text class="empty-icon">📋</text>
        <text class="empty-title">暂无佣金记录</text>
        <text class="empty-tip">完成订单后将在此展示</text>
        <view class="empty-btn" bindtap="shuaxinShuju">刷新</view>
      </view>
      <block wx:if="{{dashouCommissionList.length > 0}}">
        <view class="list-hd">
          <text class="list-title">佣金明细</text>
          <text class="list-count">{{dashouCommissionList.length}}条</text>
        </view>
        <view class="record-list">
          <view wx:for="{{dashouCommissionList}}" wx:key="id" class="record-card">
            <view class="record-main">
              <text class="record-title">{{item.title}}</text>
              <text class="record-time">{{item.time}}</text>
            </view>
            <text class="record-amt plus">+¥{{item.amount}}</text>
          </view>
        </view>
        <view wx:if="{{jiazaiGengduo}}" class="footer-tip"><view class="spinner sm"></view><text>加载更多...</text></view>
        <view wx:if="{{!dashouHasMore && dashouCommissionList.length > 0}}" class="footer-tip muted">—— 没有更多了 ——</view>
      </block>
    </block>

    <!-- 管事分佣列表 -->
    <block wx:if="{{activeTab === 'guanshi'}}">
      <view wx:if="{{!jiazaiZhong && guanshiList.length === 0}}" class="empty-box">
        <text class="empty-icon">🚀</text>
        <text class="empty-title">暂无分佣记录</text>
        <text class="empty-tip">邀请接单员充值后将获得分佣</text>
        <view class="empty-btn" bindtap="shuaxinShuju">刷新</view>
      </view>
      <block wx:if="{{guanshiList.length > 0}}">
        <view class="list-hd">
          <text class="list-title">分佣明细</text>
          <text class="list-count">{{guanshiList.length}}/{{guanshiTotal}}</text>
        </view>
        <view class="record-list">
          <view wx:for="{{guanshiList}}" wx:key="index" class="record-card avatar-card">
            <image class="avatar" src="{{item.touxiangUrl}}" mode="aspectFill"/>
            <view class="record-main">
              <text class="record-title">{{item.nicheng}}</text>
              <text class="record-time">ID: {{item.yonghuid}} · {{item.shijian}}</text>
            </view>
            <view class="amt-col">
              <text class="record-amt plus">+¥{{item.fenhong}}</text>
            </view>
          </view>
        </view>
        <view wx:if="{{jiazaiGengduo}}" class="footer-tip"><view class="spinner sm"></view><text>加载更多...</text></view>
        <view wx:if="{{!guanshiHasMore && guanshiList.length > 0}}" class="footer-tip muted">—— 没有更多了 ——</view>
      </block>
    </block>

    <!-- 组长分红列表 -->
    <block wx:if="{{activeTab === 'zuzhang'}}">
      <view wx:if="{{!jiazaiZhong && zuzhangList.length === 0}}" class="empty-box">
        <text class="empty-icon">📭</text>
        <text class="empty-title">暂无分红记录</text>
        <text class="empty-tip">邀请管事并让接单员充值即可获得分红</text>
        <view class="empty-btn" bindtap="shuaxinShuju">刷新</view>
      </view>
      <block wx:if="{{zuzhangList.length > 0}}">
        <view class="list-hd">
          <text class="list-title">分红明细</text>
          <text class="list-count">{{zuzhangList.length}}/{{zuzhangTotal}}</text>
        </view>
        <view class="record-list">
          <view wx:for="{{zuzhangList}}" wx:key="index" class="bonus-card">
            <view class="bonus-left">
              <image class="avatar sm" src="{{item.dashouAvatar}}" mode="aspectFill"/>
              <view class="bonus-info">
                <text class="record-title">{{item.dashouNicheng}}</text>
                <text class="record-time">ID: {{item.dashouYonghuid}}</text>
              </view>
            </view>
            <view class="bonus-mid">
              <text class="bonus-tag">所属管事</text>
              <text class="bonus-arrow">→</text>
            </view>
            <view class="bonus-right">
              <image class="avatar sm" src="{{item.guanshiAvatar}}" mode="aspectFill"/>
              <view class="bonus-info">
                <text class="record-title">{{item.guanshiNicheng}}</text>
                <text class="record-amt plus">+¥{{item.fenhong}}</text>
                <text class="record-time">{{item.shijian}}</text>
              </view>
            </view>
          </view>
        </view>
        <view wx:if="{{jiazaiGengduo}}" class="footer-tip"><view class="spinner sm"></view><text>加载更多...</text></view>
        <view wx:if="{{!zuzhangHasMore && zuzhangList.length > 0}}" class="footer-tip muted">—— 没有更多了 ——</view>
      </block>
    </block>
  </scroll-view>

  <view wx:if="{{cuowuTishi}}" class="error-bar">
    <text>{{cuowuTishi}}</text>
    <view class="error-btn" bindtap="chongshiJiazai">重试</view>
  </view>
</view>
<global-notification id="global-notification" />
