<view class="page page-with-tabbar">
  <!-- 装修渲染层 -->
  <view class="decor-wrap" wx:if="{{decorEnabled}}">
    <block wx:for="{{decorComponents}}" wx:key="key" wx:for-item="dc">
      <view class="decor-titlebar" wx:if="{{dc.type === 'titleBar'}}"><text class="decor-titlebar-text">{{dc.props.title}}</text></view>
      <view class="decor-notice" wx:if="{{dc.type === 'noticeBar'}}">📢 {{dc.props.text}}</view>
      <image wx:if="{{dc.type === 'imageAd' && dc.props.image}}" class="decor-imagead" src="{{dc.props.image}}" mode="widthFix" />
      <view class="nav-grid" wx:if="{{dc.type === 'grid' || dc.type === 'navGroup'}}">
        <view class="nav-item" wx:for="{{dc.props.items}}" wx:key="index" wx:for-item="it" bindtap="onDecorNav" data-link="{{it.link}}">
          <text class="nav-icon">{{it.icon}}</text>
          <text class="nav-label">{{it.text || it.label}}</text>
        </view>
      </view>
    
      <view wx:if="{{dc.type === 'waterfall'}}" class="wf-wrap">
        <view wx:if="{{dc.props.title}}" class="wf-title">{{dc.props.title}}</view>
        <view class="wf-columns">
          <view class="wf-col">
            <view class="wf-card" wx:for="{{dc.products}}" wx:key="index" wx:if="{{index % 2 === 0}}" wx:for-item="pr" bindtap="onDecorProduct" data-id="{{pr.id}}">
              <image class="wf-img" src="{{pr.image}}" mode="aspectFill" style="height:{{index % 3 === 0 ? 150 : 200}}rpx" />
              <view class="wf-name">{{pr.name}}</view>
              <view wx:if="{{dc.props.showPrice !== false}}" class="wf-price">¥{{pr.price}}</view>
              <view wx:if="{{dc.props.showSales !== false}}" class="wf-sales">已售{{pr.sales}}件</view>
            </view>
          </view>
          <view class="wf-col wf-col-2">
            <view class="wf-card" wx:for="{{dc.products}}" wx:key="index" wx:if="{{index % 2 === 1}}" wx:for-item="pr" bindtap="onDecorProduct" data-id="{{pr.id}}">
              <image class="wf-img" src="{{pr.image}}" mode="aspectFill" style="height:{{index % 3 === 1 ? 200 : 150}}rpx" />
              <view class="wf-name">{{pr.name}}</view>
              <view wx:if="{{dc.props.showPrice !== false}}" class="wf-price">¥{{pr.price}}</view>
              <view wx:if="{{dc.props.showSales !== false}}" class="wf-sales">已售{{pr.sales}}件</view>
            </view>
          </view>
        </view>
      </view>
      <view wx:if="{{dc.type === 'couponWall'}}" class="cw-wrap">
        <view wx:if="{{dc.props.title}}" class="wf-title">{{dc.props.title}}</view>
        <view class="cw-coupon" wx:for="{{dc.coupons}}" wx:key="id" wx:for-item="cp">
          <view class="cw-left">
            <view class="cw-value">¥{{cp.value}}</view>
            <view class="cw-cond">满{{cp.min_amount}}可用</view>
          </view>
          <view class="cw-mid">
            <view class="cw-name">{{cp.name}}</view>
            <view class="cw-valid">{{cp.valid_days ? '有效期' + cp.valid_days + '天' : '限量' + cp.remained + '张'}}</view>
          </view>
          <view wx:if="{{!cp.claimed && dc.props.showClaim !== false && dc.loginToken}}" class="cw-btn" catchtap="onClaimCoupon" data-id="{{cp.id}}">领取</view>
          <view wx:else class="cw-btn cw-btn-dis">{{cp.claimed ? '已领取' : '领取'}}</view>
        </view>
      </view>
      <view wx:if="{{dc.type === 'noticeScroll'}}" class="decor-notice" style="background:{{dc.props.bgColor || '#fff8ec'}};color:{{dc.props.textColor || '#8a6d3b'}}">📢
        <view class="ns-track">{{dc.props.items[0] || '公告滚动内容'}}</view>
      </view>
      <view wx:if="{{dc.type === 'countdownBanner'}}" class="cdb-banner" style="background:{{dc.props.bgColor || '#EE6B2F'}}" bindtap="onDecorNav" data-link="{{dc.props.link}}">
        <view class="cdb-title">{{dc.props.title || '限时特惠'}}</view>
        <view class="cdb-subtitle">{{dc.props.subtitle}}</view>
        <view class="cdb-clock">
          <text class="cdb-box">{{dc.props.d || '00'}}</text><text class="cdb-sep">:</text>
          <text class="cdb-box">{{dc.props.h || '00'}}</text><text class="cdb-sep">:</text>
          <text class="cdb-box">{{dc.props.m || '00'}}</text><text class="cdb-sep">:</text>
          <text class="cdb-box">{{dc.props.s || '00'}}</text>
        </view>
      </view>
      <view wx:if="{{dc.type === 'categoryGrid'}}" class="cg-grid" style="grid-template-columns:repeat({{dc.props.columns || 4}},1fr)">
        <view class="cg-item" wx:for="{{dc.categories}}" wx:key="id" wx:for-item="cg" bindtap="onDecorCategory">
          <view class="cg-icon">{{cg.icon || '📂'}}</view>
          <view class="cg-name">{{cg.name}}</view>
        </view>
      </view>

</block>
  </view>
  <view wx:if="{{!decorEnabled}}">
  <view class="cart-header flex-between">
    <text class="cart-title">购物车</text>
    <text class="cart-clear" wx:if="{{cartItems.length > 0}}" bindtap="onClear">清空</text>
  </view>

  <!-- 购物车列表 -->
  <view class="cart-list" wx:if="{{cartItems.length > 0}}">
    <view class="cart-item card" wx:for="{{cartItems}}" wx:key="id">
      <view class="card-body" style="display:flex;align-items:center;gap:16rpx">
        <view class="checkbox {{item.selected ? 'checked' : ''}}" bindtap="onToggleSelect" data-id="{{item.id}}">
          <view class="checkbox-inner" wx:if="{{item.selected}}">✓</view>
        </view>
        <image class="cart-item-image" src="{{item.product_image || item.image}}" mode="aspectFill" binderror="onImageError" />
        <view class="cart-item-info flex-1">
          <view class="cart-item-name text-ellipsis-2">{{item.product_name}}</view>
          <view class="cart-item-specs" wx:if="{{item.specs}}">
            <text class="tag tag-primary" wx:for="{{item.specs}}" wx:key="*this">{{item}}</text>
          </view>
          <view class="cart-item-bottom flex-between">
            <text class="price price-value">¥{{item.sku_price || item.price}}</text>
            <view class="quantity-control">
              <text class="qty-btn" bindtap="onDecrease" data-id="{{item.id}}">−</text>
              <text class="qty-num">{{item.quantity}}</text>
              <text class="qty-btn" bindtap="onIncrease" data-id="{{item.id}}">+</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 空购物车 -->
  <empty-state
    wx:elif="{{!loading}}"
    icon="🛒"
    text="购物车是空的"
    showBtn="{{true}}"
    btnText="去逛逛"
    bind:action="goHome"
  />

  <!-- 底部结算栏 -->
  <view class="bottom-bar safe-bottom flex-between" wx:if="{{cartItems.length > 0}}">
    <view class="flex-row gap-12">
      <view class="checkbox {{allSelected ? 'checked' : ''}}" bindtap="onToggleAll">
        <view class="checkbox-inner" wx:if="{{allSelected}}">✓</view>
      </view>
      <text>全选</text>
    </view>
    <view class="flex-row gap-16">
      <view class="cart-total">
        <text>合计: </text>
        <text class="price price-value">¥{{totalAmount}}</text>
      </view>
      <button class="btn-primary" disabled="{{selectedCount === 0}}" bindtap="onCheckout">结算({{selectedCount}})</button>
    </view>
  </view>
  </view>
</view>