<!-- 主题旅游申请页面 -->
<view class="page-container">
  <!-- 固定导航栏容器 -->
  <view class="nav-container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="goBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">定制主题</view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;">
    <!-- 申请表单 -->
    <view class="apply-form">
      <!-- 状态卡片 -->
      <view class="status-card" wx:if="{{applyStatus !== 'none'}}">
        <view class="status-icon {{applyStatus}}">
          <image wx:if="{{applyStatus === 'pending'}}" src="/images/icon-pending.png"></image>
          <image wx:if="{{applyStatus === 'approved'}}" src="/images/icon-success.png"></image>
          <image wx:if="{{applyStatus === 'rejected'}}" src="/images/icon-rejected.png"></image>
        </view>
        <text class="status-title">{{statusTitle}}</text>
        <text class="status-desc">{{statusDesc}}</text>
        <button class="btn-secondary" wx:if="{{applyStatus === 'rejected'}}" bindtap="reapply">重新申请</button>
      </view>

      <!-- 表单内容 -->
      <view class="form-content" wx:if="{{applyStatus === 'none' || isReapply}}">
        <!-- 基本信息 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">基本信息</text>
          </view>
          
          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">姓名</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入真实姓名" value="{{formData.realName}}" bindinput="onInputChange" data-field="realName" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">所在城市</text>
              <text class="optional">（选填）</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入所在城市" value="{{formData.city}}" bindinput="onInputChange" data-field="city" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">手机号</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" type="number" placeholder="请输入手机号" value="{{formData.phone}}" bindinput="onInputChange" data-field="phone" maxlength="11" />
            </view>
          </view>
        </view>

        <!-- 备注信息 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">备注信息</text>
          </view>
          <view class="textarea-wrapper">
            <textarea class="intro-textarea" placeholder="请输入备注信息（选填）" value="{{formData.remarks}}" bindinput="onInputChange" data-field="remarks" maxlength="500"></textarea>
          </view>
          <view class="textarea-footer">
            <text class="char-count">{{formData.remarks.length || 0}}/500</text>
          </view>
        </view>

        <!-- 协议 -->
        <view class="agreement-row">
          <view class="checkbox {{agreed ? 'checked' : ''}}" bindtap="toggleAgreement">
            <image wx:if="{{agreed}}" src="/images/icon-checked.png" class="check-icon"></image>
          </view>
          <view class="agreement-text">
            <text class="normal-text">我已阅读并同意</text>
            <text class="link-text" bindtap="viewAgreement">《合作入驻服务协议》</text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <button class="submit-btn {{canSubmit ? '' : 'disabled'}}" bindtap="submitApply" disabled="{{!canSubmit}}">
          提交申请
        </button>
      </view>
    </view>

    <view class="bottom-placeholder"></view>
  </scroll-view>
</view>
