<!--module/order/pages/select-goods/select-goods.wxml-->
<t-navbar title="{{i18n.orderText.selectGoods}}" left-arrow />
<scroll-view class="page-scroll__container" type="list" scroll-y style="{{containerStyle}}">
  <view class="info-box"></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>
          <!-- 0元商品只显示数量1，非0元商品显示数量选择器 -->
          <view wx:if="{{goods.price === 0}}" class="quantity-text">x1</view>
          <view wx:else 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" bind:tap="onQuantityChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" data-type="plus">+</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部占位 -->
  <view class="footer-placeholder"></view>
</scroll-view>

<!-- 底部固定栏 -->
<view class="footer-bar" style="padding-bottom: {{container.safeBottomOffset}}px;">
  <view class="footer-left">
    <t-checkbox checked="{{selectAll}}" bind:change="onSelectAllChange" label="全选" />
  </view>
  <view class="footer-center">
    <text class="footer-text">已选{{selectedCount}}件 合计: </text>
    <text class="footer-price">¥{{totalPrice}}</text>
  </view>
  <view class="footer-right">
    <view class="checkout-btn" bind:tap="onCheckout">{{i18n.orderText.payMeant}}</view>
  </view>
</view>