<!-- 陪诊就医申请页面 -->
<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="nav-header" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <view class="nav-back" bindtap="goBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
        <text class="back-text">返回</text>
      </view>
      <text class="nav-title">陪诊就医</text>
      <view class="nav-placeholder"></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>
            <text class="required">*</text>
          </view>
          <view class="avatar-upload-area" bindtap="chooseAvatar">
            <view class="avatar-circle">
              <image wx:if="{{formData.avatar}}" src="{{formData.avatar}}" class="avatar-image" mode="aspectFill"></image>
              <view class="upload-placeholder" wx:else>
                <image src="/images/icon-camera.png" class="camera-icon" mode="aspectFit"></image>
                <text class="upload-text">上传照片</text>
              </view>
            </view>
          </view>
          <text class="form-tip">请上传清晰的个人照片</text>
        </view>

        <!-- 基本信息 -->
        <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="请输入真实姓名" placeholder-class="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="required">*</text>
            </view>
            <view class="gender-options">
              <view class="gender-btn {{formData.gender === 'male' ? 'active' : ''}}" bindtap="selectGender" data-gender="male">
                <text>男</text>
              </view>
              <view class="gender-btn {{formData.gender === 'female' ? 'active' : ''}}" bindtap="selectGender" data-gender="female">
                <text>女</text>
              </view>
            </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="请输入年龄" placeholder-class="placeholder" value="{{formData.age}}" bindinput="onInputChange" data-field="age" />
            </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" placeholder="请输入身份证号" placeholder-class="placeholder" value="{{formData.idCard}}" bindinput="onInputChange" data-field="idCard" maxlength="18" />
            </view>
          </view>
        </view>

        <!-- 服务区域 -->
        <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="请输入所在城市" placeholder-class="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" placeholder="请输入熟悉的医院名称" placeholder-class="placeholder" value="{{formData.hospital}}" bindinput="onInputChange" data-field="hospital" />
            </view>
            <text class="form-tip">可填写多个医院，用逗号分隔</text>
          </view>
        </view>

        <!-- 资质证书 -->
        <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="cert-upload" bindtap="uploadCert" data-type="health">
              <image wx:if="{{formData.healthCert}}" src="{{formData.healthCert}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传健康证</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">身份证正面</text>
              <text class="required">*</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="idFront">
              <image wx:if="{{formData.idFront}}" src="{{formData.idFront}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传身份证正面</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">身份证反面</text>
              <text class="required">*</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="idBack">
              <image wx:if="{{formData.idBack}}" src="{{formData.idBack}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传身份证反面</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">其他资质证书</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="other">
              <image wx:if="{{formData.otherCert}}" src="{{formData.otherCert}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传其他证书（选填）</text>
              </view>
            </view>
            <text class="form-tip">如护理证、急救证等相关资质</text>
          </view>
        </view>

        <!-- 个人介绍 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">个人介绍</text>
            <text class="required">*</text>
          </view>
          <view class="textarea-wrapper">
            <textarea class="intro-textarea" placeholder="请介绍您的陪诊经验、擅长科室等（50-500字）" placeholder-class="placeholder" value="{{formData.introduction}}" bindinput="onInputChange" data-field="introduction" maxlength="500"></textarea>
          </view>
          <view class="textarea-footer">
            <text class="char-count">{{formData.introduction.length || 0}}/500</text>
          </view>
        </view>

        <!-- 联系方式 -->
        <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" type="number" placeholder="请输入手机号" placeholder-class="placeholder" value="{{formData.phone}}" bindinput="onInputChange" data-field="phone" maxlength="11" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">紧急联系人</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入紧急联系人姓名（选填）" placeholder-class="placeholder" value="{{formData.emergencyContact}}" bindinput="onInputChange" data-field="emergencyContact" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">紧急联系电话</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" type="number" placeholder="请输入紧急联系电话（选填）" placeholder-class="placeholder" value="{{formData.emergencyPhone}}" bindinput="onInputChange" data-field="emergencyPhone" maxlength="11" />
            </view>
          </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>
