<!-- pages/reviewing/reviewing.wxml — 按 H5 原型结构迁移 -->
<view class="page" style="padding-top: {{statusBarHeight}}px;">
  <!-- 十字纹背景图案（H5 bg-pattern） -->
  <view class="bg-pattern"></view>
  <!-- 顶部渐变装饰 -->
  <view class="top-gradient top-gradient--{{status}}"></view>

  <!-- 加载中 -->
  <view class="content content--loading" wx:if="{{loading}}">
    <view class="loading-box">
      <t-loading theme="circular" size="42rpx" text="加载中..." />
    </view>
  </view>

  <!-- 主体内容 -->
  <view class="content" wx:else>
    <!-- 图标区域 -->
    <view class="icon-area float-animation">
      <!-- 背景光晕 -->
      <view class="icon-glow icon-glow--{{status}}"></view>
      <!-- 主图标 -->
      <view class="icon-box icon-box--{{status}}">
        <image wx:if="{{status === 'pending'}}" class="icon-main-img" src="/assets/icons/icon-clock-circle.svg" mode="aspectFit" />
        <t-icon wx:else name="close-circle" size="98rpx" color="#fff" />
      </view>
      <!-- 装饰点 -->
      <view class="icon-dot icon-dot--{{status}} dot-1 pulse-soft"></view>
      <view class="icon-dot icon-dot--{{status}} dot-2 pulse-soft"></view>
    </view>

    <!-- 标题区域 -->
    <view class="title-area">
      <text class="main-title">{{status === 'pending' ? '申请审核中' : '申请未通过'}}</text>
      <text class="sub-title" wx:if="{{status === 'pending'}}">您的访问申请已提交成功，正在等待管理员审核，请耐心等待</text>
      <text class="sub-title" wx:else>很抱歉，您的申请未通过审核</text>
    </view>

    <!-- 进度提示卡片（仅审核中显示） -->
    <view class="progress-card" wx:if="{{status === 'pending'}}">
      <view class="progress-header">
        <view class="progress-icon-box">
          <t-icon name="info-circle-filled" size="35rpx" color="#ed7b2f" />
        </view>
        <view class="progress-header-text">
          <text class="progress-title">审核进度</text>
          <text class="progress-desc">通常需要 1-3 个工作日</text>
        </view>
      </view>
      <!-- 进度步骤 -->
      <view class="progress-steps">
        <view class="step-group">
          <view class="step-dot step-dot--done">
            <t-icon name="check" size="28rpx" color="#fff" />
          </view>
          <text class="step-label step-label--done">已提交</text>
        </view>
        <view class="step-line">
          <view class="step-line-fill"></view>
        </view>
        <view class="step-group">
          <view class="step-dot step-dot--active">
            <view class="step-dot-inner pulse-soft"></view>
          </view>
          <text class="step-label step-label--active">审核中</text>
        </view>
        <view class="step-line"></view>
        <view class="step-group">
          <view class="step-dot step-dot--pending"></view>
          <text class="step-label step-label--pending">通过</text>
        </view>
      </view>
    </view>

    <!-- 拒绝原因卡片 -->
    <view class="reject-card" wx:if="{{status === 'rejected' && application && application.reject_reason}}">
      <view class="reject-header">
        <t-icon name="error-circle-filled" size="32rpx" color="#e34d59" />
        <text class="reject-title">拒绝原因</text>
      </view>
      <text class="reject-reason">{{application.reject_reason}}</text>
    </view>

    <!-- 申请信息摘要 -->
    <view class="info-card" wx:if="{{application}}">
      <text class="info-card-title">申请信息</text>
      <view class="info-row">
        <text class="info-label">球房ID</text>
        <text class="info-value">{{application.site_code}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">申请身份</text>
        <text class="info-value">{{application.role_type}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">手机号</text>
        <text class="info-value">{{application.phone}}</text>
      </view>
    </view>

    <!-- 联系提示 -->
    <view class="contact-hint">
      <t-icon name="chat" size="28rpx" color="#a6a6a6" />
      <text class="contact-text">如有疑问，请联系管理员</text>
    </view>
  </view>

  <!-- 底部按钮区域 -->
  <view class="bottom-area" wx:if="{{!loading}}">
    <view class="switch-btn" bindtap="onSwitchAccount">
      <t-icon name="logout" size="28rpx" color="#5e5e5e" />
      <text class="switch-btn-text">更换登录账号</text>
    </view>
  </view>
</view>

<dev-fab />
