<!--pages/submit/submit.wxml-->
<view class="page">
  <!-- 商品摘要 - 拼多多SKU弹窗顶部风格 -->
  <view class="sku-header">
    <image class="sku-thumb" src="{{shangpinData.image || ''}}" mode="aspectFill" />
    <view class="sku-header-info">
      <view class="sku-price-row">
        <text class="sku-price-sym">¥</text>
        <text class="sku-price-int">{{totalPriceInteger}}</text>
        <text class="sku-price-dec">.{{totalPriceDecimal}}</text>
      </view>
      <text class="sku-stock">库存{{shangpinData.kucun || 0}}件</text>
      <text class="sku-selected">已选：{{quantity}}份</text>
    </view>
    <view class="sku-close" bindtap="goBack">×</view>
  </view>

  <!-- 购买数量 -->
  <view class="sku-section">
    <text class="sku-section-title">购买数量</text>
    <view class="qty-row">
      <view class="qty-btn {{quantity <= 1 ? 'qty-btn--disabled' : ''}}" bindtap="onQtyMinus">-</view>
      <text class="qty-val">{{quantity}}</text>
      <view class="qty-btn {{quantity >= 99 ? 'qty-btn--disabled' : ''}}" bindtap="onQtyPlus">+</view>
    </view>
  </view>

  <!-- 服务信息 -->
  <view class="sku-section">
    <text class="sku-section-title">服务信息</text>

    <view class="form-field">
      <view class="field-top">
        <text class="field-name">游戏昵称</text>
        <text class="field-required">必填</text>
      </view>
      <input
        class="field-input"
        type="text"
        placeholder="请输入您的游戏昵称"
        placeholder-class="ph"
        maxlength="15"
        value="{{nicheng}}"
        bindinput="onNicknameInput"
      />
    </view>

    <view class="form-field">
      <view class="field-top">
        <text class="field-name">备注</text>
        <text class="field-optional">选填</text>
      </view>
      <input
        class="field-input"
        type="text"
        placeholder="补充其他联系信息"
        placeholder-class="ph"
        maxlength="30"
        value="{{beizhu}}"
        bindinput="onRemarkInput"
      />
    </view>

    <view class="form-field">
      <view class="field-top">
        <text class="field-name">指定服务者</text>
        <text class="field-optional">选填</text>
      </view>
      <input
        class="field-input"
        type="text"
        placeholder="填写指定服务者ID"
        placeholder-class="ph"
        maxlength="20"
        value="{{zhiding}}"
        bindinput="onZhidingInput"
      />
    </view>
  </view>

  <!-- 服务保障 -->
  <view class="sku-section">
    <text class="sku-section-title">服务保障</text>
    <view class="guarantee-row">
      <view class="guarantee-item">
        <text class="g-check">✓</text>
        <text class="g-text">极速接单</text>
      </view>
      <view class="guarantee-item">
        <text class="g-check">✓</text>
        <text class="g-text">资金担保</text>
      </view>
      <view class="guarantee-item">
        <text class="g-check">✓</text>
        <text class="g-text">售后保障</text>
      </view>
      <view class="guarantee-item">
        <text class="g-check">✓</text>
        <text class="g-text">隐私保护</text>
      </view>
    </view>
  </view>

  <!-- 支付方式 -->
  <view class="sku-section">
    <text class="sku-section-title">支付方式</text>
    <view class="pay-row {{payMethod === 'wechat' ? 'pay-row--active' : ''}}" bindtap="onSelectPayMethod" data-method="wechat">
      <image src="/images/wechat-pay.png" class="pay-icon" />
      <text class="pay-label">微信支付</text>
      <view class="pay-check">
        <text class="pay-check-icon" wx:if="{{payMethod === 'wechat'}}">✓</text>
      </view>
    </view>
    <view class="pay-row {{payMethod === 'alipay' ? 'pay-row--active' : ''}}" bindtap="onSelectPayMethod" data-method="alipay">
      <view class="pay-icon pay-icon--alipay">支</view>
      <text class="pay-label">支付宝</text>
      <view class="pay-check">
        <text class="pay-check-icon" wx:if="{{payMethod === 'alipay'}}">✓</text>
      </view>
    </view>
  </view>

  <!-- 底部留白 -->
  <view class="bottom-space"></view>

  <!-- 底部确认按钮 -->
  <view class="confirm-bar">
    <view
      class="confirm-btn {{canSubmit && !isSubmitting ? 'confirm-btn--active' : 'confirm-btn--disabled'}}"
      bindtap="onSubmitOrder"
      hover-class="confirm-btn--hover"
    >
      {{isSubmitting ? '提交中...' : '确定'}}
    </view>
  </view>

  <global-notification id="global-notification" />
  <popup-notice id="popupNotice" />
</view>
