<view class="page page-with-tabbar">
  <!-- 顶部搜索栏 -->
  <view class="header">
    <view class="header-content">
      <view class="logo">省胜优铺</view>
      <view class="search-bar" bindtap="onSearch">
        <text class="search-icon">🔍</text>
        <text class="search-text">搜索商品</text>
      </view>
    </view>
  </view>

  <!-- 🔧 装修渲染层(v1.4.3) -->
  <view class="decor-wrap" wx:if="{{decorEnabled}}">
    <block wx:for="{{decorComponents}}" wx:key="key" wx:for-item="dc">
      <swiper wx:if="{{dc.type === 'swiper' && dc.props.images.length > 0}}" class="banner-swiper" indicator-dots="{{true}}" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#4A7CF7" autoplay="{{true}}" interval="{{4000}}" circular="{{true}}">
        <swiper-item wx:for="{{dc.props.images}}" wx:key="index" wx:for-item="img">
          <image class="banner-image" src="{{img.url || img.image}}" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <view wx:if="{{dc.type === 'grid' || dc.type === 'navGroup'}}" class="nav-grid">
        <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 === 'titleBar'}}" class="decor-titlebar">
        <text class="decor-titlebar-text">{{dc.props.title}}</text>
      </view>
      <view wx:if="{{dc.type === 'noticeBar'}}" class="decor-notice">📢 {{dc.props.text}}</view>
      <view wx:if="{{dc.type === 'goodsList'}}" class="product-grid">
        <product-card wx:for="{{dc.products}}" wx:key="id" product="{{item}}" wx:for-item="item" />
      </view>
      <!-- v1.8: 商品瀑布流 -->
      <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>
      <!-- v1.8: 优惠券墙 -->
      <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>
      <!-- v1.8: 公告滚动 -->
      <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>
      <!-- v1.8: 倒计时横幅 -->
      <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>
      <!-- v1.8: 分类宫格 -->
      <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>

  <!-- 轮播图 -->
  <swiper hidden="{{decorEnabled}}"
    class="banner-swiper"
    indicator-dots="{{true}}"
    indicator-color="rgba(255,255,255,0.4)"
    indicator-active-color="#4A7CF7"
    autoplay="{{true}}"
    interval="{{4000}}"
    duration="{{500}}"
    circular="{{true}}"
    bindchange="onSwiperChange"
  >
    <swiper-item wx:for="{{banners}}" wx:key="id">
      <image class="banner-image" src="{{item.image}}" mode="aspectFill" binderror="onBannerError" />
    </swiper-item>
    <swiper-item wx:if="{{banners.length === 0}}">
      <view class="banner-placeholder">
        <text class="banner-placeholder-text">省胜优铺 优选</text>
      </view>
    </swiper-item>
  </swiper>

  <!-- 分类导航网格 -->
  <view class="nav-grid" hidden="{{decorEnabled}}">
    <view class="nav-item" wx:for="{{navItems}}" wx:key="index" bindtap="onNavTap" data-index="{{index}}">
      <text class="nav-icon">{{item.icon}}</text>
      <text class="nav-label">{{item.label}}</text>
    </view>
  </view>

  <!-- 秒杀入口 -->
  <view class="section flash-section" hidden="{{decorEnabled}}" wx:if="{{seckillList.length > 0}}" bindtap="goSeckill">
    <view class="section-header">
      <view class="section-title-row">
        <text class="section-title-icon">⚡</text>
        <text class="section-title">限时秒杀</text>
        <text class="flash-countdown">距结束 {{seckillCountdown}}</text>
      </view>
      <text class="section-more">更多 ›</text>
    </view>
    <scroll-view class="flash-scroll" scroll-x="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
      <view class="flash-item" wx:for="{{seckillList}}" wx:key="id" bindtap="goProduct" data-id="{{item.product_id}}">
        <image class="flash-image" src="{{item.image}}" mode="aspectFill" />
        <view class="flash-price">¥{{item.seckill_price}}</view>
        <view class="flash-original">¥{{item.original_price}}</view>
      </view>
    </scroll-view>
  </view>

  <!-- 推荐商品 -->
  <view class="section" hidden="{{decorEnabled}}">
    <view class="section-header">
      <view class="section-title-row">
        <text class="section-title-icon">🔥</text>
        <text class="section-title">推荐商品</text>
      </view>
    </view>
    <view class="product-grid">
      <product-card wx:for="{{recommendProducts}}" wx:key="id" product="{{item}}" wx:for-item="item" />
    </view>
    <view class="loading-more" wx:if="{{loadingProducts}}">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>
  </view>
</view>
