<!-- pages/apply/apply.wxml — 按 H5 原型结构迁移 -->
<view class="page" style="padding-top: {{statusBarHeight}}px;">
  <!-- 顶部导航栏 -->
  <view class="navbar">
    <view class="navbar-back" bindtap="onBack">
      <t-icon name="chevron-left" size="35rpx" color="#4b4b4b" />
    </view>
    <text class="navbar-title">申请访问权限</text>
  </view>

  <!-- 主体内容 -->
  <view class="main">
    <!-- 欢迎卡片 + 审核流程（整合） -->
    <view class="welcome-card">
      <view class="welcome-header">
        <view class="welcome-icon-box">
          <t-icon name="check-circle-filled" size="42rpx" color="#fff" />
        </view>
        <view class="welcome-text">
          <text class="welcome-title">欢迎加入球房运营助手</text>
          <text class="welcome-desc">请填写申请信息，等待管理员审核</text>
        </view>
      </view>
      <!-- 审核流程步骤条 -->
      <view class="steps-bar">
        <view class="steps-row">
          <view class="step-item">
            <view class="step-circle step-circle--active">1</view>
            <text class="step-label step-label--active">提交申请</text>
          </view>
          <view class="step-line"></view>
          <view class="step-item">
            <view class="step-circle">2</view>
            <text class="step-label">等待审核</text>
          </view>
          <view class="step-line"></view>
          <view class="step-item">
            <view class="step-circle">3</view>
            <text class="step-label">审核通过</text>
          </view>
          <view class="step-line"></view>
          <view class="step-item">
            <view class="step-circle">4</view>
            <text class="step-label">开始使用</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-card">
      <!-- CHANGE 2026-03-24 | 头像：chooseAvatar 头像选择区域 -->
      <view class="form-item form-item--border avatar-section">
        <view class="form-label">
          <text>头像</text>
          <text class="optional-tag">选填</text>
        </view>
        <button class="avatar-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
          <view class="avatar-preview">
            <image class="avatar-img" src="{{avatarTempPath || '/assets/images/avatar-coach.png'}}" mode="aspectFill" />
            <view class="avatar-camera">
              <t-icon name="camera" size="24rpx" color="#fff" />
            </view>
          </view>
        </button>
      </view>
      <!-- 球房ID -->
      <view class="form-item form-item--border">
        <view class="form-label">
          <text class="required">*</text>
          <text>球房ID</text>
        </view>
        <input class="form-input" type="text" placeholder="请输入球房ID" value="{{siteCode}}" maxlength="6" bindinput="onSiteCodeInput" />
      </view>
      <!-- 申请身份 -->
      <view class="form-item form-item--border">
        <view class="form-label">
          <text class="required">*</text>
          <text>申请身份</text>
        </view>
        <input class="form-input" type="text" placeholder="请输入申请身份（如：助教、店长等）" value="{{role}}" bindinput="onRoleInput" />
      </view>
      <!-- 手机号 -->
      <view class="form-item form-item--border">
        <view class="form-label">
          <text class="required">*</text>
          <text>手机号</text>
        </view>
        <input class="form-input" type="number" placeholder="请输入手机号" value="{{phone}}" maxlength="11" bindinput="onPhoneInput" />
      </view>
      <!-- 编号（选填） -->
      <view class="form-item form-item--border">
        <view class="form-label">
          <text>编号</text>
          <text class="optional-tag">选填</text>
        </view>
        <input class="form-input" type="text" placeholder="请输入编号" value="{{employeeNumber}}" maxlength="50" bindinput="onEmployeeNumberInput" />
      </view>
      <!-- 昵称 -->
      <!-- CHANGE 2026-03-24 | 昵称：type="nickname" 支持微信昵称快捷填入（基础库 ≥ 2.25.3） -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>
          <text>昵称</text>
        </view>
        <input class="form-input" type="nickname" placeholder="请输入昵称" value="{{nickname}}" maxlength="50" bindinput="onNicknameInput" />
      </view>
    </view>

  </view>

  <!-- 底部按钮 -->
  <view class="bottom-area">
    <text class="form-tip">请认真填写，信息不完整可能导致审核不通过</text>
    <view class="submit-btn {{submitting ? 'submit-btn--disabled' : ''}}" bindtap="onSubmit">
      <t-loading wx:if="{{submitting}}" theme="circular" size="32rpx" color="#fff" />
      <text wx:else class="submit-btn-text">提交申请</text>
    </view>
    <text class="bottom-tip">审核通常需要 1-3 个工作日</text>
  </view>
</view>

<dev-fab />
