<!-- 客户看板页 — 忠于 H5 原型，8 维度卡片模板 -->
<!-- CHANGE 2026-03-21 | P13 B: 引入 WXS 格式化工具 -->
<wxs src="../../utils/format.wxs" module="fmt" />

<!-- 空状态 -->
<view class="page-empty" wx:if="{{pageState === 'empty'}}">
  <t-empty description="暂无客户数据" />
</view>

<!-- 错误态 -->
<view class="page-error" wx:elif="{{pageState === 'error'}}">
  <t-empty description="加载失败" />
  <view class="retry-btn" bindtap="onRetry">点击重试</view>
</view>

<!-- 正常态 -->
<block wx:else>
  <!-- CHANGE 2026-03-27 | 权限改造 W5：动态看板二级 tab，均分宽度居中 -->
  <view class="board-tabs board-tabs--{{boardTabs.length}}">
    <view
      wx:for="{{boardTabs}}"
      wx:key="key"
      class="board-tab {{item.active ? 'board-tab--active' : ''}}"
      data-tab="{{item.key}}"
      bindtap="{{item.active ? '' : 'onTabChange'}}"
    >
      <text>{{item.label}}</text>
    </view>
  </view>

  <!-- 筛选区域 -->
  <view class="filter-bar {{filterBarVisible ? '' : 'filter-bar--hidden'}}">
    <view class="filter-bar-inner">
      <view class="filter-item filter-item--wide">
        <filter-dropdown
          label="最应召回"
          options="{{dimensionOptions}}"
          value="{{selectedDimension}}"
          bind:change="onDimensionChange"
        />
      </view>
      <view class="filter-item">
        <filter-dropdown
          label="全部"
          options="{{projectOptions}}"
          value="{{selectedProject}}"
          bind:change="onProjectChange"
        />
      </view>
    </view>
  </view>

  <!-- 列表头部 -->
  <view class="list-header">
    <view class="list-header-left">
      <text class="list-header-title">客户列表</text>
    </view>
    <text class="list-header-count">共{{fmt.safe(totalCount)}}名客户</text>
  </view>

  <!-- 客户列表 -->
  <view class="customer-list">
    <view
      class="customer-card"
      hover-class="customer-card--hover"
      wx:for="{{customers}}"
      wx:key="id"
      data-id="{{item.id}}"
      bindtap="onCustomerTap"
    >
      <!-- ===== 卡片头部：头像 + 姓名 + 右侧指标 ===== -->
      <view class="card-header {{dimType === 'recall' || dimType === 'freq60' || dimType === 'recent' ? '' : 'card-header--lg'}}">
        <view class="card-avatar {{item.avatarCls}}">
          <text class="avatar-text">{{item.initial}}</text>
        </view>
        <text class="card-name" wx:if="{{dimType !== 'freq60'}}">{{item.name}}</text>
        <!-- CHANGE 2026-03-29 | 客户项目标签（样式同助教看板 skill-tag） -->
        <text class="skill-tag {{proj.cls}}" wx:for="{{item.projectTags}}" wx:for-item="proj" wx:key="text" wx:if="{{dimType !== 'freq60'}}">{{proj.text}}</text>
        <!-- 最频繁：姓名 + 下方小字垂直排列 -->
        <view class="card-name-group" wx:if="{{dimType === 'freq60'}}">
          <view style="display:flex;align-items:center;gap:8rpx;">
            <text class="card-name">{{item.name}}</text>
            <text class="skill-tag {{proj.cls}}" wx:for="{{item.projectTags}}" wx:for-item="proj" wx:key="text">{{proj.text}}</text>
          </view>
          <view class="card-name-sub">
            <text class="mid-text" style="white-space: nowrap;">平均间隔 <text class="mid-primary">{{fmt.safe(item.avgInterval)}}</text></text>
            <text class="mid-text" style="white-space: nowrap;">60天消费 <text class="mid-dark">{{fmt.money(item.spend60d)}}</text></text>
          </view>
        </view>
        <view class="card-header-spacer"></view>

        <!-- 最应召回：理想/已过/超期 -->
        <view class="header-metrics" wx:if="{{dimType === 'recall'}}">
          <text class="metric-gray">理想 <text class="metric-dark">{{fmt.safe(item.idealDays)}}天</text></text>
          <text class="metric-gray">已过 <text class="metric-error">{{fmt.safe(item.elapsedDays)}}天</text></text>
          <view class="overdue-tag {{item.overdueDays > 7 ? 'overdue-tag--danger' : 'overdue-tag--warn'}}">
            <text>超期 {{fmt.safe(item.overdueDays)}}天</text>
          </view>
        </view>

        <!-- 最大消费潜力：频率/客单/余额标签 -->
        <view class="header-metrics" wx:elif="{{dimType === 'potential'}}">
          <view class="potential-tag potential-tag--{{tag.theme}}" wx:for="{{item.potentialTags}}" wx:for-item="tag" wx:key="text">
            <text>{{tag.text}}</text>
          </view>
        </view>

        <!-- 最高余额：最近到店/理想 -->
        <view class="header-metrics" wx:elif="{{dimType === 'balance'}}">
          <text class="metric-gray">最近到店 <text class="metric-dark">{{fmt.safe(item.lastVisit)}}</text></text>
          <text class="metric-gray">理想 <text class="metric-dark">{{fmt.safe(item.idealDays)}}天</text></text>
        </view>

        <!-- 最近充值：最近到店/理想 -->
        <view class="header-metrics" wx:elif="{{dimType === 'recharge'}}">
          <text class="metric-gray">最近到店 <text class="metric-dark">{{fmt.safe(item.lastVisit)}}</text></text>
          <text class="metric-gray">理想 <text class="metric-dark">{{fmt.safe(item.idealDays)}}天</text></text>
        </view>

      <!-- 最频繁近60天：右上角大字到店次数 -->
        <view class="header-metrics header-metrics--freq" wx:elif="{{dimType === 'freq60'}}">
          <view class="freq-big-num">
            <text class="freq-big-val">{{fmt.safe(item.visits60d)}}</text>
            <text class="freq-big-unit">次</text>
          </view>
          <text class="freq-big-label">60天到店</text>
        </view>

        <!-- 最专一近60天：右上角 ❤️ 助教名 + 关系指数 -->
        <view class="header-metrics header-metrics--loyal" wx:elif="{{dimType === 'loyal'}}">
          <heart-icon score="{{item.topCoachHeart}}" />
          <text class="loyal-top-name">{{fmt.safe(item.topCoachName)}}</text>
          <text class="loyal-top-score">{{fmt.safe(item.topCoachScore)}}</text>
        </view>

        <!-- 最高消费近60天：高消费标签 -->
        <view class="header-metrics" wx:elif="{{dimType === 'spend60'}}">
          <view class="potential-tag potential-tag--warning" wx:if="{{item.highSpendTag}}">
            <text>高消费</text>
          </view>
        </view>

        <!-- 最近到店：右上角大字 X天前到店 -->
        <view class="header-metrics header-metrics--recent" wx:elif="{{dimType === 'recent'}}">
          <view class="recent-big-num">
            <text class="recent-big-val">{{fmt.safe(item.daysAgo)}}</text>
            <text class="recent-big-unit">天前到店</text>
          </view>
        </view>
      </view>

      <!-- ===== 卡片中间行：维度特定数据 ===== -->

      <!-- 最应召回：30天到店 / 余额 / 召回指数 -->
      <view class="card-mid-row" wx:if="{{dimType === 'recall'}}">
        <text class="mid-text">30天到店 <text class="mid-dark">{{item.visits30d || 0}}次</text></text>
        <text class="mid-text mid-ml">余额 <text class="mid-dark">{{fmt.money(item.balance)}}</text></text>
        <text class="mid-text mid-right">召回指数 <text class="mid-primary-bold">{{fmt.safe(item.recallIndex)}}</text></text>
      </view>

      <!-- 最大消费潜力：4 列网格（30天消费用橙色大字，和最高余额的余额值一致） -->
      <view class="card-grid card-grid--4" wx:elif="{{dimType === 'potential'}}">
        <view class="grid-cell">
          <text class="grid-label">30天消费</text>
          <text class="grid-val grid-val--lg">{{fmt.money(item.spend30d)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">近30天到店</text>
          <text class="grid-val">{{fmt.count(item.avgVisits, '次')}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">余额</text>
          <text class="grid-val grid-val--success">{{fmt.money(item.balance)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">次均消费</text>
          <text class="grid-val">{{fmt.money(item.avgSpend)}}</text>
        </view>
      </view>

      <!-- 最高余额：3 列网格 -->
      <view class="card-grid card-grid--3" wx:elif="{{dimType === 'balance'}}">
        <view class="grid-cell">
          <text class="grid-label">余额</text>
          <text class="grid-val grid-val--warning grid-val--lg">{{fmt.money(item.balance)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">月均消耗</text>
          <text class="grid-val">{{fmt.money(item.monthlyConsume)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">可用</text>
          <text class="grid-val grid-val--success">{{fmt.safe(item.availableMonths)}}</text>
        </view>
      </view>

      <!-- 最近充值：4 列网格 -->
      <view class="card-grid card-grid--4" wx:elif="{{dimType === 'recharge'}}">
        <view class="grid-cell">
          <text class="grid-label">最后充值</text>
          <text class="grid-val">{{fmt.safe(item.lastRecharge)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">累计充值</text>
          <text class="grid-val grid-val--success">{{fmt.money(item.rechargeAmount)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">60天充值</text>
          <text class="grid-val">{{fmt.count(item.recharges60d, '次')}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">当前余额</text>
          <text class="grid-val grid-val--warning">{{fmt.money(item.currentBalance)}}</text>
        </view>
      </view>

      <!-- 最高消费近60天：3 列网格 -->
      <view class="card-grid card-grid--3" wx:elif="{{dimType === 'spend60'}}">
        <view class="grid-cell">
          <text class="grid-label">近60天消费</text>
          <text class="grid-val grid-val--warning grid-val--lg">{{fmt.money(item.spend60d)}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">近60天到店</text>
          <text class="grid-val">{{fmt.count(item.visits60d, '次')}}</text>
        </view>
        <view class="grid-cell">
          <text class="grid-label">次均消费</text>
          <text class="grid-val">{{fmt.money(item.avgSpend)}}</text>
        </view>
      </view>

      <!-- 最频繁近60天：无中间行（数据已在头部） -->

      <!-- 最频繁：迷你柱状图（8 周） -->
      <view class="mini-chart" wx:if="{{dimType === 'freq60'}}">
        <view class="mini-chart-header">
          <text class="mini-chart-label">8周前</text>
          <text class="mini-chart-label">本周</text>
        </view>
        <view class="mini-chart-bars">
          <view class="mini-bar-col" wx:for="{{item.weeklyVisits}}" wx:for-item="wv" wx:for-index="wIdx" wx:key="wIdx">
            <view class="mini-bar" style="height:{{wv.pct}}%;opacity:{{0.2 + wIdx * 0.057}}"></view>
          </view>
        </view>
        <view class="mini-chart-nums">
          <text class="mini-chart-num {{wIdx === item.weeklyVisits.length - 1 ? 'mini-chart-num--active' : ''}}" wx:for="{{item.weeklyVisits}}" wx:for-item="wv" wx:for-index="wIdx" wx:key="wIdx">{{wv.val}}</text>
        </view>
      </view>

      <!-- 最专一近60天：助教服务明细表 -->
      <view class="loyal-table" wx:elif="{{dimType === 'loyal'}}">
        <!-- 表头 -->
        <view class="loyal-row loyal-row--header">
          <text class="loyal-col loyal-col--name">助教</text>
          <text class="loyal-col">次均时长</text>
          <text class="loyal-col">服务次数</text>
          <text class="loyal-col">助教消费</text>
          <text class="loyal-col">关系指数</text>
        </view>
        <!-- 数据行 -->
        <view class="loyal-row" wx:for="{{item.coachDetails}}" wx:for-item="cd" wx:key="name">
          <view class="loyal-col loyal-col--name">
            <heart-icon score="{{cd.heartScore}}" />
            <text class="loyal-coach-name {{cd.cls}}">{{cd.name}}</text>
            <text class="assistant-badge assistant-badge--follow" wx:if="{{cd.badge === '跟'}}">跟</text>
            <text class="assistant-badge assistant-badge--drop" wx:elif="{{cd.badge === '弃'}}">弃</text>
          </view>
          <text class="loyal-col loyal-val">{{fmt.safe(cd.avgDuration)}}</text>
          <text class="loyal-col loyal-val">{{fmt.safe(cd.serviceCount)}}</text>
          <text class="loyal-col loyal-val">{{fmt.money(cd.coachSpend)}}</text>
          <text class="loyal-col {{cd.relationIdx >= 8 ? 'loyal-val--primary' : 'loyal-val--gray'}}">{{fmt.safe(cd.relationIdx)}}</text>
        </view>
      </view>

      <!-- 最近到店：理想间隔 / 60天到店 / 次均消费 -->
      <view class="card-mid-row" wx:elif="{{dimType === 'recent'}}">
        <text class="mid-text">理想间隔 <text class="mid-dark">{{fmt.safe(item.idealDays)}}天</text></text>
        <text class="mid-text mid-ml">60天到店 <text class="mid-dark">{{fmt.count(item.visits60d, '次')}}</text></text>
        <text class="mid-text mid-ml-right">次均消费 <text class="mid-dark">{{fmt.money(item.avgSpend)}}</text></text>
      </view>

      <!-- ===== 卡片底部：助教行（最专一维度不显示，因为助教信息在表格中） ===== -->
      <view class="card-assistant-row" wx:if="{{item.assistants && item.assistants.length > 0 && dimType !== 'loyal'}}">
        <text class="assistant-label">助教:</text>
        <block wx:for="{{item.assistants}}" wx:for-item="ast" wx:for-index="astIdx" wx:key="name">
          <text class="assistant-sep" wx:if="{{astIdx > 0}}">|</text>
          <view class="assistant-tag">
            <heart-icon score="{{ast.heartScore}}" />
            <text class="assistant-name {{ast.cls}}">{{ast.name}}</text>
            <text class="assistant-badge assistant-badge--follow" wx:if="{{ast.badge === '跟'}}">跟</text>
            <text class="assistant-badge assistant-badge--drop" wx:elif="{{ast.badge === '弃'}}">弃</text>
          </view>
        </block>
      </view>
    </view>
  </view>

  <!-- 加载更多状态 -->
  <view class="load-more" wx:if="{{isLoadingMore}}">
    <t-loading theme="circular" size="40rpx" />
    <text class="load-more-text">加载中...</text>
  </view>
  <view class="load-more" wx:elif="{{!hasMore && customers.length > 0}}">
    <text class="load-more-text load-more-text--end">已加载全部</text>
  </view>

  <!-- 底部安全区 -->
  <view class="safe-bottom"></view>
</block>

<!-- 自定义底部导航栏 -->
<board-tab-bar active="board" />

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

<dev-fab wx:if="{{false}}" />
