<!-- pages/performance/performance.wxml — 业绩总览 -->
<wxs src="../../utils/format.wxs" module="fmt" />

<!-- 空数据态 -->
<view class="page-empty" wx:if="{{pageState === 'empty'}}">
  <t-icon name="chart-bar" size="40px" color="#dcdcdc" />
  <text class="empty-text">暂无业绩数据</text>
</view>

<!-- 错误态 -->
<view class="page-error" wx:elif="{{pageState === 'error'}}">
  <t-icon name="close-circle" size="40px" color="#e34d59" />
  <text class="error-text">加载失败，请点击重试</text>
  <view class="retry-btn" hover-class="retry-btn--hover" bindtap="onRetry">
    <text>重试</text>
  </view>
</view>

<!-- 正常态 -->
<block wx:else>
  <!-- Banner 区域 — SVG 做渐变底图 -->
  <view class="banner-section">
    <image class="banner-bg-img" src="/assets/images/banner-bg-blue-light-aurora.svg" mode="widthFix" />
    <view class="banner-content">
      

      <!-- CHANGE 2026-03-27 | 个人信息区域：WXML 结构对齐 task-list（基准），统一类名和布局 -->
      <view class="user-info-section">
        <view class="user-info-row">
          <view class="avatar-wrap">
            <image src="{{avatarUrl || '/assets/images/avatar-coach.png'}}" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="user-detail">
            <view class="user-name-row">
              <text class="user-name">{{fmt.safe(coachName)}}</text>
              <text class="user-role-tag">{{fmt.safe(coachRole)}}</text>
            </view>
            <view class="user-store-row">
              <text class="user-store">{{fmt.safe(storeName)}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 核心收入数据 -->
      <view class="income-overview">
        <view class="income-card">
          <text class="income-label">{{isCurrentMonth ? '我的预估收入' : '我的收入'}}</text>
          <text class="income-value">{{fmt.safe(monthlyIncome)}}</text>
        </view>
        <view class="income-card">
          <text class="income-label">上月收入</text>
          <text class="income-value income-highlight">{{fmt.safe(lastMonthIncome)}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 收入情况 -->
  <view class="section-card">
    <view class="section-title">
      <view class="title-dot dot-primary"></view>
      <text>收入情况</text>
    </view>

    <!-- 当前档位 -->
    <view class="tier-card tier-current">
      <view class="tier-badge badge-current">当前档位</view>
      <view class="tier-row">
        <view class="tier-icon-label">
          <text class="tier-emoji">📊</text>
          <text class="tier-label tier-label-green">当前档位</text>
        </view>
        <view class="tier-rates">
          <view class="rate-item">
            <view class="rate-value-row">
              <text class="rate-value rate-green">{{fmt.safe(currentTier.basicRate)}}</text>
              <text class="rate-unit rate-green-light">元/h</text>
            </view>
            <text class="rate-desc rate-green-light">基础课到手</text>
          </view>
          <view class="rate-divider"></view>
          <view class="rate-item">
            <view class="rate-value-row">
              <text class="rate-value rate-green">{{fmt.safe(currentTier.incentiveRate)}}</text>
              <text class="rate-unit rate-green-light">元/h</text>
            </view>
            <text class="rate-desc rate-green-light">激励课到手</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 下一阶段 -->
    <view class="tier-card tier-next">
      <view class="tier-badge badge-next">下一阶段</view>
      <view class="tier-row">
        <view class="tier-icon-label">
          <text class="tier-emoji">🎯</text>
          <text class="tier-label tier-label-yellow">下一阶段</text>
        </view>
        <view class="tier-rates">
          <view class="rate-item">
            <view class="rate-value-row">
              <text class="rate-value rate-yellow">{{fmt.safe(nextTier.basicRate)}}</text>
              <text class="rate-unit rate-yellow-light">元/h</text>
            </view>
            <text class="rate-desc rate-yellow-light">基础课到手</text>
          </view>
          <view class="rate-divider rate-divider-yellow"></view>
          <view class="rate-item">
            <view class="rate-value-row">
              <text class="rate-value rate-yellow">{{fmt.safe(nextTier.incentiveRate)}}</text>
              <text class="rate-unit rate-yellow-light">元/h</text>
            </view>
            <text class="rate-desc rate-yellow-light">激励课到手</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 升级提示 -->
    <view class="upgrade-hint">
      <view class="upgrade-left">
        <text class="upgrade-emoji">⏱️</text>
        <view class="upgrade-text">
          <text class="upgrade-label">距离下一阶段</text>
          <view class="upgrade-hours">
            <text>需完成 </text>
            <text class="upgrade-hours-num">{{fmt.safe(upgradeHoursNeeded)}}</text>
            <text> 小时</text>
          </view>
        </view>
      </view>
      <view class="upgrade-bonus">
        <text class="bonus-label">到达即得</text>
        <text class="bonus-value">{{fmt.money(upgradeBonus)}}</text>
      </view>
    </view>
  </view>

  <!-- 本月业绩 -->
  <view class="section-card">
    <view class="section-title">
      <view class="title-dot dot-success"></view>
      <text>本月业绩</text>
      <text wx:if="{{isCurrentMonth}}" class="estimate-tag">预估</text>
    </view>

    <view class="income-list">
      <view class="income-row" wx:for="{{incomeItems}}" wx:key="label">
        <view class="income-row-left">
          <view class="income-icon-box">
            <text>{{item.icon}}</text>
          </view>
          <view class="income-info">
            <text class="income-item-label">{{fmt.safe(item.label)}}</text>
            <text class="income-item-desc">{{fmt.safe(item.desc)}}</text>
          </view>
        </view>
        <text class="income-item-value">{{fmt.safe(item.value)}}</text>
      </view>
    </view>

    <!-- 合计 -->
    <view class="income-total">
      <text class="total-label">本月合计<text wx:if="{{isCurrentMonth}}"> 预估</text></text>
      <text class="total-value">{{fmt.safe(monthlyTotal)}}</text>
    </view>

    <!-- 服务记录明细 -->
    <view class="service-records-section">
      <view class="service-records-header">
        <text class="service-records-emoji">📋</text>
        <text class="service-records-title">我的服务记录明细</text>
      </view>

      <block wx:for="{{thisMonthRecords}}" wx:key="date" wx:if="{{thisMonthRecordsExpanded || index < visibleRecordGroups}}">
        <view class="date-divider">
          <text decode class="dd-date">{{fmt.safe(item.date)}}&nbsp;—</text>

          <text decode class="dd-stats" wx:if="&nbsp;{{item.totalHours}}">{{fmt.safe(item.totalHours)}}小时&nbsp;·&nbsp;¥{{fmt.safe(item.totalIncome)}}&nbsp;&nbsp;</text>
          <view class="dd-line"></view>
        </view>
        <view class="record-item" wx:for="{{item.records}}" wx:for-item="rec" wx:key="customerName" bindtap="onRecordTap" data-customer-name="{{rec.customerName}}" data-task-id="{{rec.taskId}}" data-member-id="{{rec.memberId}}">
          <view class="record-avatar avatar-{{rec.avatarColor}}">
            <text>{{rec.avatarChar}}</text>
          </view>
          <view class="record-content">
            <view class="record-top">
              <view class="record-name-time">
                <text class="record-name">{{fmt.safe(rec.customerName)}}</text>
                <heart-icon score="{{rec.heartScore}}" size="small" />
                <text class="record-time">{{fmt.safe(rec.timeRange)}}</text>
              </view>
              <text class="record-hours">{{fmt.safe(rec.hours)}}小时</text>
            </view>
            <view class="record-bottom">
              <view class="record-tags">
                <text class="course-tag course-tag--{{rec.courseTagClass}}">{{fmt.safe(rec.courseType)}}</text>
                <text class="record-location">{{fmt.safe(rec.location)}}</text>
              </view>
              <text class="record-income">{{isCurrentMonth ? '我的预估收入' : '我的收入'}} <text class="record-income-val">{{fmt.safe(rec.income)}}</text></text>
            </view>
          </view>
        </view>
      </block>

      <view class="records-actions">
        <view class="records-toggle" hover-class="toggle-btn--hover" bindtap="toggleThisMonthRecords" wx:if="{{thisMonthRecords.length > visibleRecordGroups}}">
          <text>{{thisMonthRecordsExpanded ? '收起' : '展开更多'}}</text>
          <t-icon name="{{thisMonthRecordsExpanded ? 'chevron-up' : 'chevron-down'}}" size="24px" />
        </view>

        <view class="records-view-all" hover-class="view-all--hover" bindtap="goToRecords">
          <text>查看全部</text>
          <t-icon name="chevron-right" size="24px" color="#0052d9" />
        </view>
      </view>
    </view>
  </view>

  <!-- 我的新客 -->
  <view class="section-card">
    <view class="section-title">
      <view class="title-dot dot-cyan"></view>
      <text>我的新客</text>
    </view>

    <view class="customer-list">
      <view
        class="customer-item"
        hover-class="customer-item--hover"
        wx:for="{{newCustomers}}"
        wx:key="name"
        wx:if="{{newCustomerExpanded ? index < 20 : index < 5}}"
        data-name="{{item.name}}"
        data-member-id="{{item.memberId}}"
        bindtap="onCustomerTap"
      >
        <view class="customer-avatar avatar-{{item.avatarColor}}">
          <text>{{item.avatarChar}}</text>
        </view>
        <view class="customer-info">
          <view class="customer-name-row">
            <text class="customer-name">{{fmt.safe(item.name)}}</text>
            <heart-icon score="{{item.heartScore}}" size="small" />
          </view>
          <text class="customer-detail">最近服务: {{fmt.safe(item.lastService)}} · {{fmt.count(item.count, '次')}}</text>
        </view>
        <t-icon name="chevron-right" size="24px" color="#c5c5c5" />
      </view>
    </view>

    <view class="toggle-btn" hover-class="toggle-btn--hover" bindtap="toggleNewCustomer" wx:if="{{newCustomers.length > 5}}">
      <text>{{newCustomerExpanded ? '收起 ↑' : '查看更多 ↓'}}</text>
    </view>
  </view>

  <!-- 我的常客 -->
  <view class="section-card">
    <view class="section-title">
      <view class="title-dot dot-pink"></view>
      <text>我的常客</text>
      <text class="section-subtitle">近90天常客数据</text>
    </view>

    <view class="customer-list">
      <view
        class="customer-item"
        hover-class="customer-item--hover"
        wx:for="{{regularCustomers}}"
        wx:key="name"
        wx:if="{{regularCustomerExpanded ? index < 20 : index < 5}}"
        data-name="{{item.name}}"
        data-member-id="{{item.memberId}}"
        bindtap="onCustomerTap"
      >
        <view class="customer-avatar avatar-{{item.avatarColor}}">
          <text>{{item.avatarChar}}</text>
        </view>
        <view class="customer-info">
          <view class="customer-name-row">
            <text class="customer-name">{{fmt.safe(item.name)}}</text>
            <heart-icon score="{{item.heartScore}}" size="small" />
          </view>
          <text class="customer-detail">{{fmt.count(item.count, '次')}} · {{fmt.hours(item.hours)}} · {{fmt.safe(item.income)}}</text>
        </view>
        <t-icon name="chevron-right" size="24px" color="#c5c5c5" />
      </view>
    </view>

    <view class="toggle-btn" hover-class="toggle-btn--hover" bindtap="toggleRegularCustomer" wx:if="{{regularCustomers.length > 5}}">
      <text>{{regularCustomerExpanded ? '收起 ↑' : '查看更多 ↓'}}</text>
    </view>
  </view>
</block>

<!-- AI 悬浮按钮 -->
<ai-float-button />

<dev-fab />
