<!-- pages/customer-records/customer-records.wxml -->
<!-- CHANGE 2026-03-29 | CUST-3: 客户消费记录页面 -->
<wxs src="../../utils/format.wxs" module="fmt" />

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

<block wx:elif="{{pageState === 'normal'}}">
  <!-- Banner 区域（复用 customer-detail 暗金色风格）-->
  <view class="banner-section">
    <image class="banner-bg-img" src="/assets/images/banner-bg-dark-gold-aurora.svg" mode="widthFix" />
    <view class="banner-overlay">
      <view class="customer-header">
        <view class="avatar-box">
          <text class="avatar-text">{{detail.avatarChar}}</text>
        </view>
        <view class="info-right">
          <view class="name-row">
            <text class="customer-name">{{detail.name}}</text>
          </view>
          <view class="sub-info">
            <text class="phone">{{phoneVisible ? detail.phone : phoneMasked}}</text>
            <view class="phone-toggle-btn" bindtap="{{phoneVisible ? 'onCopyPhone' : 'onTogglePhone'}}" hover-class="phone-toggle-btn--hover">
              <text class="phone-toggle-text">{{phoneVisible ? '复制' : '查看'}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="banner-stats">
        <view class="stat-item stat-border">
          <text class="stat-value stat-green">{{fmt.money(detail.balance)}}</text>
          <text class="stat-label">储值余额</text>
        </view>
        <view class="stat-item stat-border">
          <text class="stat-value">{{fmt.money(detail.consumption60d)}}</text>
          <text class="stat-label">60天消费</text>
        </view>
        <view class="stat-item stat-border">
          <text class="stat-value">{{fmt.days(detail.idealInterval)}}</text>
          <text class="stat-label">理想间隔</text>
        </view>
        <view class="stat-item">
          <text class="stat-value stat-amber">{{fmt.days(detail.daysSinceVisit)}}</text>
          <text class="stat-label">距今到店</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 月份切换（复用 customer-service-records 交互）-->
  <view class="month-switcher">
    <view class="month-btn {{canPrev ? '' : 'disabled'}}" bindtap="onPrevMonth">
      <t-icon name="chevron-left" size="32rpx" color="{{canPrev ? '#777777' : '#dcdcdc'}}" />
    </view>
    <text class="month-label">{{monthLabel}}</text>
    <view class="month-btn {{canNext ? '' : 'disabled'}}" bindtap="onNextMonth">
      <t-icon name="chevron-right" size="32rpx" color="{{canNext ? '#777777' : '#dcdcdc'}}" />
    </view>
  </view>

  <!-- 月度汇总 -->
  <view class="month-summary">
    <view class="summary-item">
      <text class="summary-label">到店次数</text>
      <text class="summary-value">{{visitCount}}</text>
    </view>
    <view class="summary-divider"></view>
    <view class="summary-item">
      <text class="summary-label">消费总额</text>
      <text class="summary-value value-primary">{{fmt.money(consumeTotal)}}</text>
    </view>
    <view class="summary-divider"></view>
    <view class="summary-item">
      <text class="summary-label">充值总额</text>
      <text class="summary-value value-green">{{fmt.money(rechargeTotal)}}</text>
    </view>
  </view>

  <!-- 消费记录列表（复用 customer-detail 卡片样式）-->
  <view class="records-container">
    <view class="month-loading" wx:if="{{monthLoading}}">
      <t-loading theme="circular" size="40rpx" />
      <text class="month-loading-text">加载中...</text>
    </view>

    <view class="no-month-data" wx:elif="{{records.length === 0}}">
      <t-icon name="chart-bar" size="100rpx" color="#dcdcdc" />
      <text class="no-month-text">本月暂无消费记录</text>
    </view>

    <block wx:else>
      <block wx:for="{{records}}" wx:key="id">
        <!-- 台桌结账 -->
        <view class="record-card" wx:if="{{item.type === 'table'}}">
          <view class="record-card-header record-header-blue">
            <view class="record-project">
              <view class="record-dot record-dot-blue"></view>
              <text class="record-project-name record-name-blue">{{fmt.safe(item.tableName)}}</text>
            </view>
            <text class="record-date">{{fmt.safe(item.date)}}</text>
          </view>
          <view class="record-time-row">
            <view class="record-time-left">
              <text class="record-time-text">{{fmt.safe(item.startTime)}}</text>
              <text class="record-time-arrow">→</text>
              <text class="record-time-text">{{fmt.safe(item.endTime)}}</text>
              <text class="record-duration-tag">{{fmt.safe(item.duration)}}</text>
            </view>
            <view class="record-fee-right">
              <text class="record-fee-amount">{{fmt.money(item.tableFee)}}</text>
              <text class="record-fee-orig" wx:if="{{item.tableOrigPrice}}">{{fmt.money(item.tableOrigPrice)}}</text>
            </view>
          </view>
          <view class="record-coaches" wx:if="{{item.coaches && item.coaches.length > 0}}">
            <view class="record-coach-grid">
              <view class="record-coach-card" wx:for="{{item.coaches}}" wx:for-item="c" wx:key="name">
                <view class="record-coach-name-row">
                  <text class="record-coach-name">{{fmt.safe(c.name)}}</text>
                  <coach-level-tag level="{{c.level}}" shadowColor="rgba(0,0,0,0)" />
                </view>
                <text class="record-coach-type">{{fmt.safe(c.courseType)}} · {{fmt.hours(c.hours)}}</text>
                <view class="record-coach-bottom">
                  <text class="record-coach-perf" wx:if="{{c.perfHours}}">定档绩效：{{fmt.hours(c.perfHours)}}</text>
                  <text class="record-coach-fee">{{fmt.money(c.fee)}}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="record-food-row" wx:if="{{item.foodAmount > 0}}">
            <text class="record-food-label">🍷 {{item.foodDetail || '食品酒水'}}</text>
            <view class="record-food-right">
              <text class="record-food-amount">{{fmt.money(item.foodAmount)}}</text>
              <text class="record-fee-orig" wx:if="{{item.foodOrigPrice}}">{{fmt.money(item.foodOrigPrice)}}</text>
            </view>
          </view>
          <view class="record-total-row" wx:if="{{item.totalAmount}}">
            <text class="record-total-label">总金额</text>
            <view class="record-total-right">
              <text class="record-total-amount">{{fmt.money(item.totalAmount)}}</text>
              <text class="record-fee-orig" wx:if="{{item.totalOrigPrice}}">{{fmt.money(item.totalOrigPrice)}}</text>
            </view>
          </view>
        </view>

        <!-- 商城订单 -->
        <view class="record-card" wx:elif="{{item.type === 'shop'}}">
          <view class="record-card-header record-header-green">
            <view class="record-project">
              <view class="record-dot record-dot-green"></view>
              <text class="record-project-name record-name-green">商城订单</text>
            </view>
            <text class="record-date">{{fmt.safe(item.date)}}</text>
          </view>
          <view class="record-food-row" wx:if="{{item.foodAmount > 0}}">
            <text class="record-food-label">🍷 {{item.foodDetail || '食品酒水'}}</text>
            <text class="record-food-amount">{{fmt.money(item.foodAmount)}}</text>
          </view>
          <view class="record-total-row" wx:if="{{item.totalAmount}}">
            <text class="record-total-label">总金额</text>
            <text class="record-total-amount">{{fmt.money(item.totalAmount)}}</text>
          </view>
        </view>
      </block>

      <view class="list-footer">
        <text class="footer-text">— 已加载全部记录 —</text>
      </view>
    </block>
  </view>
</block>

<dev-fab />
