<!--pages/application/application.wxml-->
<view class="container">
  <!-- 产品信息卡片 -->
  <view class="product-card">
    <view class="product-info">
      <image src="{{productInfo.image}}" class="product-img" mode="aspectFill" />
      <view class="product-details">
        <text class="product-name">{{productInfo.name}}</text>
        <text class="product-desc">{{productInfo.subtitle}}</text>
        <view class="price-info">
          <text class="price">¥{{productInfo.minPremium}}</text>
          <text class="price-unit">起</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 投保表单 -->
  <view class="form-section">
    <view class="section-title">投保信息</view>
    
    <!-- 被保险人信息 -->
    <view class="form-group">
      <view class="group-title">被保险人信息</view>
      
      <view class="form-item">
        <text class="label required">姓名</text>
        <input 
          class="form-input"
          placeholder="请输入真实姓名"
          value="{{formData.insuredName}}"
          bindinput="onInsuredNameInput"
        />
      </view>
      
      <view class="form-item">
        <text class="label required">身份证号</text>
        <input 
          class="form-input"
          placeholder="请输入身份证号码"
          value="{{formData.idCard}}"
          bindinput="onIdCardInput"
        />
      </view>
      
      <view class="form-item">
        <text class="label required">手机号</text>
        <input 
          class="form-input"
          type="number"
          placeholder="请输入手机号码"
          value="{{formData.phone}}"
          bindinput="onPhoneInput"
        />
      </view>
      
      <view class="form-item">
        <text class="label required">性别</text>
        <view class="radio-group">
          <view 
            class="radio-item {{formData.gender === 'male' ? 'active' : ''}}"
            bindtap="selectGender"
            data-gender="male"
          >
            <text class="radio-icon">{{formData.gender === 'male' ? '●' : '○'}}</text>
            <text class="radio-text">男</text>
          </view>
          <view 
            class="radio-item {{formData.gender === 'female' ? 'active' : ''}}"
            bindtap="selectGender"
            data-gender="female"
          >
            <text class="radio-icon">{{formData.gender === 'female' ? '●' : '○'}}</text>
            <text class="radio-text">女</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label required">出生日期</text>
        <picker 
          mode="date"
          value="{{formData.birthDate}}"
          bindchange="onBirthDateChange"
          class="date-picker"
        >
          <view class="picker-text">{{formData.birthDate || '请选择出生日期'}}</view>
        </picker>
      </view>
    </view>

    <!-- 受益人信息 -->
    <view class="form-group">
      <view class="group-title">受益人信息</view>
      
      <view class="form-item">
        <text class="label">受益人关系</text>
        <picker 
          range="{{beneficiaryRelations}}"
          value="{{formData.beneficiaryRelationIndex}}"
          bindchange="onBeneficiaryRelationChange"
          class="picker"
        >
          <view class="picker-text">{{beneficiaryRelations[formData.beneficiaryRelationIndex] || '请选择关系'}}</view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">受益人姓名</text>
        <input 
          class="form-input"
          placeholder="请输入受益人姓名"
          value="{{formData.beneficiaryName}}"
          bindinput="onBeneficiaryNameInput"
        />
      </view>
    </view>

    <!-- 保险信息 -->
    <view class="form-group">
      <view class="group-title">保险信息</view>
      
      <view class="form-item">
        <text class="label required">保险金额</text>
        <view class="amount-selector">
          <view 
            class="amount-option {{formData.coverageAmount === item ? 'active' : ''}}"
            wx:for="{{coverageAmounts}}"
            wx:key="index"
            bindtap="selectCoverageAmount"
            data-amount="{{item}}"
          >
            <text class="amount-text">¥{{item}}万</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label required">缴费方式</text>
        <view class="radio-group">
          <view 
            class="radio-item {{formData.paymentMethod === 'annual' ? 'active' : ''}}"
            bindtap="selectPaymentMethod"
            data-method="annual"
          >
            <text class="radio-icon">{{formData.paymentMethod === 'annual' ? '●' : '○'}}</text>
            <text class="radio-text">年缴</text>
          </view>
          <view 
            class="radio-item {{formData.paymentMethod === 'monthly' ? 'active' : ''}}"
            bindtap="selectPaymentMethod"
            data-method="monthly"
          >
            <text class="radio-icon">{{formData.paymentMethod === 'monthly' ? '●' : '○'}}</text>
            <text class="radio-text">月缴</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">保险期间</text>
        <view class="period-info">
          <text class="period-text">{{productInfo.insurancePeriod || '1年'}}</text>
        </view>
      </view>
    </view>

    <!-- 健康告知 -->
    <view class="form-group">
      <view class="group-title">健康告知</view>
      <view class="health-notice">
        <text class="notice-text">请如实回答以下问题，如有隐瞒可能影响理赔</text>
      </view>
      
      <view class="health-questions">
        <view class="question-item" wx:for="{{healthQuestions}}" wx:key="index">
          <text class="question-text">{{item.question}}</text>
          <view class="answer-options">
            <view 
              class="option-item {{formData.healthAnswers[index] === 'yes' ? 'active' : ''}}"
              bindtap="selectHealthAnswer"
              data-index="{{index}}"
              data-answer="yes"
            >
              <text class="option-icon">{{formData.healthAnswers[index] === 'yes' ? '●' : '○'}}</text>
              <text class="option-text">是</text>
            </view>
            <view 
              class="option-item {{formData.healthAnswers[index] === 'no' ? 'active' : ''}}"
              bindtap="selectHealthAnswer"
              data-index="{{index}}"
              data-answer="no"
            >
              <text class="option-icon">{{formData.healthAnswers[index] === 'no' ? '●' : '○'}}</text>
              <text class="option-text">否</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 保费计算 -->
    <view class="premium-section">
      <view class="premium-card">
        <view class="premium-title">保费计算</view>
        <view class="premium-details">
          <view class="premium-item">
            <text class="premium-label">保险金额：</text>
            <text class="premium-value">¥{{formData.coverageAmount}}万</text>
          </view>
          <view class="premium-item">
            <text class="premium-label">缴费方式：</text>
            <text class="premium-value">{{formData.paymentMethod === 'annual' ? '年缴' : '月缴'}}</text>
          </view>
          <view class="premium-item total">
            <text class="premium-label">应缴保费：</text>
            <text class="premium-value">¥{{calculatedPremium}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 协议确认 -->
  <view class="agreement-section">
    <view class="agreement-item">
      <checkbox 
        checked="{{agreeTerms}}"
        bindchange="onAgreeTermsChange"
        color="#1890ff"
      />
      <text class="agreement-text">
        我已阅读并同意
        <text class="link" bindtap="goToTerms">《保险条款》</text>
        和
        <text class="link" bindtap="goToPrivacy">《隐私政策》</text>
      </text>
    </view>
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-actions">
    <button 
      class="submit-btn {{canSubmit ? 'active' : 'disabled'}}"
      bindtap="submitApplication"
      disabled="{{!canSubmit || loading}}"
    >
      {{loading ? '提交中...' : '确认投保'}}
    </button>
  </view>
</view>

<!-- 加载状态 -->
<view wx:if="{{loading}}" class="loading-overlay">
  <view class="loading-content">
    <view class="loading-spinner"></view>
    <text class="loading-text">处理中...</text>
  </view>
</view>