<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>
      <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 class="category-container" wx:if="{{!decorEnabled}}">
    <!-- 左侧分类导航 -->
    <scroll-view class="left-menu" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
      <view
        class="menu-item {{activeIndex === index ? 'active' : ''}}"
        wx:for="{{categories}}"
        wx:key="id"
        data-index="{{index}}"
        bindtap="onCategoryTap"
      >
        <view class="menu-indicator" wx:if="{{activeIndex === index}}"></view>
        <text class="menu-name">{{item.name}}</text>
      </view>
    </scroll-view>

    <!-- 右侧商品展示 -->
    <scroll-view class="right-content" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}" bindscrolltolower="onLoadMore">
      <!-- 分类banner -->
      <image class="category-banner" src="{{currentCategory.banner || currentCategory.image}}" mode="aspectFill" wx:if="{{currentCategory.banner || currentCategory.image}}" />

      <!-- 子分类 -->
      <view class="sub-categories" wx:if="{{currentCategory.children && currentCategory.children.length}}">
        <view class="sub-item" wx:for="{{currentCategory.children}}" wx:key="id" bindtap="onSubTap" data-id="{{item.id}}">
          <image class="sub-icon" src="{{item.image}}" mode="aspectFill" />
          <text class="sub-name">{{item.name}}</text>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="product-grid">
        <product-card wx:for="{{products}}" wx:key="id" product="{{item}}" wx:for-item="item" />
      </view>

      <!-- 加载更多 -->
      <load-more
        wx:if="{{total > 0}}"
        status="{{loadStatus}}"
        bind:retry="onLoadMore"
      />
      <load-more
        wx:elif="{{!loading && categories.length > 0}}"
        status="empty"
        emptyText="暂无商品"
      />
    </scroll-view>
  </view>
</view>
