<!--module/order/pages/confirme-order/confirme-order.wxml-->
<t-navbar title="确认订单" left-arrow />
<scroll-view class="page-scroll__container bottom" type="list" scroll-y style="{{containerStyle}}">
  <view class="info-box {{ showDetail ? ' ' : 'show-bttom' }}">
    <!-- 收货人信息卡片 -->
    <view class="address-card address-card--disabled" bindtap="changeAddress">
      <view class="delivery-address" wx:if="{{showDetail}}">
        请选择配送地址
      </view>
      <view class="address-content" wx:else>
        <!-- 左侧位置图标 -->
        <view class="address-icon-wrapper">
          <image class="address-icon" src="/assets/icon/icon_location@3x.png" mode="aspectFit" />
        </view>
        <!-- 中间地址信息 -->
        <view class="address-info">
          <view class="address-header">
            <text class="address-name">{{name}}</text>
            <text class="address-phone">{{phone}}</text>
          </view>
          <view class="address-detail">
            {{address}}
          </view>
        </view>
        <!-- 右侧操作图标 -->
        <view class="address-actions">
          <t-icon name="edit" class="edit-icon" />
          <text class="arrow-icon">›</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 商品列表 -->
  <view class="goods-list" wx:for="{{goodsList}}" wx:key="category">
    <!-- 分类标题 -->
    <view class="category-title">{{item.category}}</view>

    <!-- 商品项 -->
    <view class="goods-item" wx:for="{{item.goods}}" wx:for-item="goods" wx:for-index="goodsIndex" wx:key="id">
      <!-- 复选框 -->
      <view class="goods-checkbox">
        <t-checkbox checked="{{goods.checked}}" bind:change="onGoodsCheckChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" style="padding:0" />
      </view>

      <!-- 商品图片 -->
      <image class="goods-image" src="{{goods.image}}" mode="aspectFill" />

      <!-- 商品信息 -->
      <view class="goods-info">
        <view class="goods-name-row">
          <text class="goods-name">{{goods.name}}</text>
        </view>
        <view class="goods-desc" wx:if="{{goods.description}}">{{goods.description}}</view>
        <view class="goods-price-row">
          <text class="goods-price">¥{{goods.price}}</text>
          <!-- 数量选择器 -->
          <view class="quantity-selector">
            <view class="quantity-btn minus {{goods.quantity <= 1 ? 'disabled' : ''}}" bind:tap="onQuantityChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" data-type="minus">-</view>
            <input class="quantity-input" type="number" value="{{goods.quantity}}" bind:input="onQuantityInput" bind:blur="onQuantityBlur" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" />
            <view class="quantity-btn plus {{goods.price === 0 && goods.quantity >= 1 ? 'disabled' : ''}}" bind:tap="onQuantityChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" data-type="plus">+</view>
          </view>
        </view>
      </view>
    </view>
  </view>


  <view class="order-info-section">
    <!-- 备注 -->
    <view class="info-card">
      <view class="remark-item">
        <text class="info-label">备注</text>
        <view class="remark-input-wrapper">
          <textarea class="remark-textarea" placeholder="请输入您需要备注的内容" value="{{remark}}" maxlength="200" bindinput="onRemarkInput" auto-height show-confirm-bar="{{false}}" />
          <view class="remark-count">
            <text class="remark-count-text">{{remarkLength}}/200</text>
          </view>
        </view>
      </view>
    </view>
  </view>

</scroll-view>

<!-- 立即支付 -->
<view class="footer-bar" style="padding-bottom:  {{container.safeBottomOffset}}px;">
  <view class="footer-center">
    <text class="footer-text" style="margin-right:10px">共{{totalGoodsCount}}件 </text>
    <text class="footer-text">合计： </text>
    <text class="footer-price">¥{{totalPrice}}</text>
  </view>
  <view class="footer-right">
    <view class="checkout-btn {{isPaymentLoading ? 'checkout-btn--loading' : ''}}" bind:tap="onPayment">
      <text wx:if="{{isPaymentLoading}}">支付中...</text>
      <text wx:else>立即支付</text>
    </view>
  </view>
</view>