<!--pages/submit/submit.wxml-->
<view class="submit-page">
  <!-- 商品信息区域 -->
  <view class="product-section">
    <view class="product-card">
      <!-- 商品图片 -->
      <view class="product-image-box">
        <image 
          src="{{shangpinData && shangpinData.image ? shangpinData.image : ''}}" 
          mode="aspectFill" 
          class="product-image"
        />
      </view>
      
      <!-- 商品信息 -->
      <view class="product-info">
        <view class="product-title">
          <text class="title-text">{{shangpinData && shangpinData.title ? shangpinData.title : '商品标题'}}</text>
        </view>
        
        <!-- 价格信息 -->
        <view class="price-info">
          <text class="price-label">价格：</text>
          <view class="price-value">
            <text class="price-icon">¥</text>
            <text class="price-integer">{{shangpinData && shangpinData.priceInteger ? shangpinData.priceInteger : '0'}}</text>
            <text class="price-decimal">.{{shangpinData && shangpinData.priceDecimal ? shangpinData.priceDecimal : '00'}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 表单区域（左右布局） -->
  <view class="form-section">
    <view class="form-card">
      <!-- 游戏昵称 - 左右布局 -->
      <view class="form-item-row">
        <view class="item-label-row">
          <text class="label-text-bold">昵称</text>
          <text class="label-required">*</text>
        </view>
        <input 
          class="item-input-row"
          type="text"
          placeholder="请输入您的昵称"
          placeholder-class="input-placeholder-gray"
          maxlength="15"
          value="{{nicheng}}"
          bindinput="onNicknameInput"
        />
      </view>
      
      <!-- 备注信息 - 左右布局 -->
      <view class="form-item-row">
        <view class="item-label-row">
          <text class="label-text-bold">备注</text>
        </view>
        <input 
          class="item-input-row"
          type="text"
          placeholder="请补充您要补充的其他联系信息"
          placeholder-class="input-placeholder-gray"
          maxlength="30"
          value="{{beizhu}}"
          bindinput="onRemarkInput"
        />
      </view>
      
      <!-- 指定打手ID - 左右布局 -->
      <view class="form-item-row">
        <view class="item-label-row">
          <text class="label-text-bold">指定服务者ID(选填)</text>
        </view>
        <input 
          class="item-input-row"
          type="text"
          placeholder="填写您需要指定的服务者"
          placeholder-class="input-placeholder-gray"
          maxlength="20"
          value="{{zhiding}}"
          bindinput="onZhidingInput"
        />
      </view>
      
      <!-- 支付方式 -->
      <view class="payment-item">
        <view class="payment-method">
          <image src="/images/weixinzhifu.png" class="payment-icon" />
          <text class="payment-text">微信支付</text>
          <view class="payment-checkbox">
            <text class="checkbox-text">✓</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 底部操作栏 -->
  <view class="footer-section">
    <view class="total-price">
      <text class="total-label">总价：</text>
      <view class="total-value">
        <text class="price-icon">¥</text>
        <text class="price-integer">{{shangpinData && shangpinData.priceInteger ? shangpinData.priceInteger : '0'}}</text>
        <text class="price-decimal">.{{shangpinData && shangpinData.priceDecimal ? shangpinData.priceDecimal : '00'}}</text>
      </view>
    </view>
    
    <view 
      class="submit-btn {{canSubmit && !isSubmitting ? 'submit-btn-active' : 'submit-btn-disabled'}}" 
      bindtap="onSubmitOrder"
    >
      <text class="btn-text">{{isSubmitting ? '提交中...' : '提交订单'}}</text>
      <view class="btn-glow"></view>
    </view>
  </view>

  <!-- 全局通知组件 -->
  <global-notification id="global-notification" />

  <!-- 弹窗公告组件（供 PopupService 调用） -->
  <popup-notice id="popupNotice" />
</view>