<!-- pages/zuzhangfenhongjilu/zuzhangfenhongjilu.wxml -->
<view class="page">

<!-- 固定顶部统计区 -->
<view class="fixed-header">
  <view class="header-content">
    <view class="stat-row">
      <view class="stat-cell">
        <text class="stat-label">分红总额</text>
        <text class="stat-number blue">¥{{fenhongZonge}}</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-cell">
        <text class="stat-label">邀请管事</text>
        <text class="stat-number">{{yaoqingGuanshi}}</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-cell">
        <text class="stat-label">分红次数</text>
        <text class="stat-number">{{fenhongCishu}}</text>
      </view>
    </view>
    <!-- 刷新按钮 -->
    <view class="refresh-btn" bindtap="onRefresh">
      <text class="refresh-icon {{refreshDisabled ? 'spin' : ''}}">↻</text>
    </view>
  </view>
</view>

<!-- 滚动列表区域 -->
<scroll-view
  class="scroll-area"
  scroll-y
  enhanced
  show-scrollbar="{{false}}"
  bindscrolltolower="onLoadMore"
  lower-threshold="100"
>
  <view class="list-content">
    <!-- 加载中 -->
    <view wx:if="{{loading && jiluList.length === 0}}" class="loading-state">
      <view class="spinner"></view>
      <text>加载中...</text>
    </view>

    <!-- 空状态 -->
    <view wx:elif="{{!loading && jiluList.length === 0}}" class="empty-state">
      <text class="empty-icon">📭</text>
      <text class="empty-title">暂无分红记录</text>
      <text class="empty-tip">邀请管事并让接单员充值即可获得分红</text>
      <view class="empty-btn" bindtap="onRefresh">刷新</view>
    </view>

    <!-- 有数据 -->
    <block wx:if="{{jiluList.length > 0}}">
      <!-- 列表标题 -->
      <view class="list-header">
        <text class="list-title">分红明细</text>
        <text class="list-count">{{jiluList.length}} / {{totalCount}}</text>
      </view>

      <!-- 卡片列表 -->
      <view class="card-list">
        <view wx:for="{{jiluList}}" wx:key="index" class="card">
          <!-- 左侧：打手信息 -->
          <view class="card-left">
            <image class="avatar" src="{{item.dashouAvatar}}" mode="aspectFill"></image>
            <view class="info">
              <text class="name">{{item.dashouNicheng}}</text>
              <text class="uid">ID: {{item.dashouYonghuid}}</text>
            </view>
          </view>

          <!-- 中间：所属管事箭头 -->
          <view class="card-middle">
            <text class="tag">所属管事</text>
            <text class="arrow">→</text>
          </view>

          <!-- 右侧：管事信息 + 金额 -->
          <view class="card-right">
            <image class="avatar small" src="{{item.guanshiAvatar}}" mode="aspectFill"></image>
            <view class="info">
              <text class="name">{{item.guanshiNicheng}}</text>
              <text class="uid">ID: {{item.guanshiYonghuid}}</text>
            </view>
            <view class="amount">
              <text class="num blue">+¥{{item.fenhong}}</text>
              <text class="time">{{item.shijian}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view wx:if="{{loadingMore}}" class="more-state">
        <view class="spinner small"></view>
        <text>加载更多...</text>
      </view>

      <!-- 没有更多 -->
      <view wx:if="{{!hasMore && jiluList.length > 0}}" class="no-more">
        <text>—— 没有更多了 ——</text>
      </view>
    </block>
  </view>
</scroll-view>

<!-- 错误遮罩 -->
<view wx:if="{{errorMsg}}" class="error-mask">
  <view class="error-dialog">
    <text class="error-icon">⚠️</text>
    <text class="error-msg">{{errorMsg}}</text>
    <view class="error-btn" bindtap="onRetry">重试</view>
  </view>
</view>

<global-notification id="global-notification" />
</view>