<view class="page">
  <!-- 收货地址 -->
  <view class="card address-section" bindtap="onSelectAddress">
    <view class="card-body" wx:if="{{address}}">
      <view class="address-top flex-row gap-16">
        <view class="address-icon">📍</view>
        <view class="flex-1">
          <view class="flex-row gap-16">
            <text class="address-name">{{address.name}}</text>
            <text class="address-phone">{{address.phone}}</text>
          </view>
          <view class="address-detail">{{address.province}}{{address.city}}{{address.district}}{{address.detail}}</view>
        </view>
      </view>
    </view>
    <view class="card-body" wx:else>
      <view class="flex-row gap-16">
        <text class="address-icon">📍</text>
        <text class="text-gray">请选择收货地址</text>
      </view>
    </view>
  </view>

  <!-- 商品列表 -->
  <view class="card">
    <view class="card-body">
      <view class="order-item" wx:for="{{items}}" wx:key="index">
        <image class="order-item-image" src="{{item.image}}" mode="aspectFill" />
        <view class="order-item-info flex-1">
          <view class="order-item-name text-ellipsis-2">{{item.name || item.product_name}}</view>
          <view class="flex-between mt-12">
            <text class="price">¥{{formatPrice(item.price)}}</text>
            <text class="text-gray">x {{item.quantity}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 金额明细 -->
  <view class="card">
    <view class="card-body">
      <view class="amount-row flex-between">
        <text>商品小计</text>
        <text class="text-bold">¥{{formatPrice(totalAmount)}}</text>
      </view>
      <view class="amount-row flex-between">
        <text>等级折扣</text>
        <text class="text-success">-¥{{formatPrice(discountAmount)}}</text>
      </view>
      <view class="divider"></view>
      <view class="amount-row flex-between">
        <text class="text-bold">实付金额</text>
        <text class="price price-large">¥{{formatPrice(payAmount)}}</text>
      </view>
    </view>
  </view>

  <!-- 备注 -->
  <view class="card">
    <view class="card-body">
      <view class="input-item">
        <text class="input-label">备注</text>
        <input class="input-field" placeholder="选填，订单备注" value="{{remark}}" bindinput="onRemarkInput" maxlength="200" />
      </view>
    </view>
  </view>

  <!-- 支付方式 -->
  <view class="card">
    <view class="card-header">支付方式</view>
    <view class="card-body">
      <view class="payment-option flex-between" bindtap="selectPayment" data-method="wechat">
        <view class="flex-row gap-16">
          <text class="payment-icon">💳</text>
          <text>微信支付</text>
        </view>
        <view class="checkbox {{paymentMethod === 'wechat' ? 'checked' : ''}}">
          <view class="checkbox-inner" wx:if="{{paymentMethod === 'wechat'}}">✓</view>
        </view>
      </view>
      <view class="payment-option flex-between" bindtap="selectPayment" data-method="balance">
        <view class="flex-row gap-16">
          <text class="payment-icon">💰</text>
          <text>余额支付</text>
        </view>
        <view class="checkbox {{paymentMethod === 'balance' ? 'checked' : ''}}">
          <view class="checkbox-inner" wx:if="{{paymentMethod === 'balance'}}">✓</view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部提交 -->
  <view class="bottom-bar safe-bottom">
    <view class="flex-1 text-right">
      <text>实付: </text>
      <text class="price price-large">¥{{formatPrice(payAmount)}}</text>
    </view>
    <button class="btn-primary" style="margin-left:20rpx;padding:20rpx 48rpx" loading="{{submitting}}" bindtap="onSubmit">提交订单</button>
  </view>
</view>
