<!-- 休闲文娱页面 -->
<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left"></view>
    <text class="unified-header-title">休闲文娱</text>
    <view class="unified-header-right"></view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: 194rpx;" enhanced show-scrollbar="{{false}}">
    <!-- 顶部轮播卡片 -->
    <view class="banner-section">
      <swiper class="banner-swiper" 
              style="height: {{swiperHeight || 400}}rpx"
              indicator-dots="{{true}}"
              indicator-color="rgba(255,255,255,0.4)"
              indicator-active-color="#fff"
              circular="{{true}}"
              autoplay="{{true}}"
              interval="{{5000}}"
              duration="{{500}}"
              easing-function="easeInOutCubic">
        <swiper-item wx:for="{{bannerList}}" wx:key="id">
          <view class="banner-card">
            <!-- 如果有图片URL则显示图片，否则显示渐变背景 -->
            <image wx:if="{{item.imageUrl}}" 
                   class="banner-image" 
                   src="{{item.imageUrl}}" 
                   mode="widthFix"
                   bindload="onBannerLoad"></image>
            <view wx:else class="banner-bg-gradient" style="background: {{item.bgColor}};"></view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能入口 - 与服务页面统一的圆形图标风格 -->
    <view class="category-section">
      <view class="category-item"
            wx:for="{{categoryList}}"
            wx:key="id"
            data-id="{{item.id}}"
            data-name="{{item.name}}"
            data-url="{{item.url}}"
            bindtap="onCategoryTap">
        <!-- 图标容器：圆形图片 -->
        <view class="category-icon-container">
          <image src="{{item.icon}}" class="icon-svg" mode="aspectFit"></image>
        </view>
        <text class="category-name">{{item.name}}</text>
      </view>
    </view>

    <!-- 滚动公告栏 -->
    <view class="notice-bar" bindtap="onNoticeTap" wx:if="{{noticeList.length > 0}}">
      <view class="notice-icon">
        <image src="/images/icon-heart-filled.png" class="heart-icon" mode="aspectFit"></image>
      </view>
      <view class="notice-content">
        <swiper class="notice-swiper" vertical autoplay circular interval="3000">
          <swiper-item wx:for="{{noticeList}}" wx:key="id">
            <rich-text nodes="{{item.content}}" class="notice-text"></rich-text>
          </swiper-item>
        </swiper>
      </view>
      <image src="/images/icon-chevron-right.png" class="notice-arrow" mode="aspectFit"></image>
    </view>

    <!-- 空公告栏占位 -->
    <view class="notice-bar-empty" wx:if="{{noticeList.length === 0}}"></view>

    <!-- 活动标签切换 - 横向滚动 -->
    <view class="tab-section">
      <scroll-view scroll-x class="tab-scroll" show-scrollbar="{{false}}">
        <view class="tab-list">
          <view class="tab-item {{activeTab === 'featured' ? 'active' : ''}}" 
                data-tab="featured" 
                bindtap="onTabChange">
            精选活动
          </view>
          <view class="tab-item {{activeTab === 'free' ? 'active' : ''}}" 
                data-tab="free" 
                bindtap="onTabChange">
            免费活动
          </view>
          <view class="tab-item {{activeTab === 'vip' ? 'active' : ''}}" 
                data-tab="vip" 
                bindtap="onTabChange">
            VIP活动
          </view>
          <view class="tab-item {{activeTab === 'svip' ? 'active' : ''}}" 
                data-tab="svip" 
                bindtap="onTabChange">
            SVIP活动
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 活动列表 -->
    <view class="activity-list">
      <view class="activity-card" 
            wx:for="{{activityList}}" 
            wx:key="id"
            data-id="{{item.id}}"
            bindtap="onActivityTap">
        <!-- 活动图片 -->
        <view class="activity-image-wrap">
          <!-- 如果有图片URL则显示图片，否则显示渐变背景 -->
          <image wx:if="{{item.image}}" 
                 class="activity-image" 
                 src="{{item.image}}" 
                 mode="aspectFill"></image>
          <view wx:else class="activity-image-gradient" style="background: {{item.bgColor}};"></view>
          
          <!-- 点赞数 -->
          <view class="like-badge {{item.isLiked ? 'liked' : ''}}" 
                catchtap="onLike" 
                data-id="{{item.id}}"
                data-index="{{index}}">
            <image src="{{item.isLiked ? '/images/icon-heart-red.png' : '/images/icon-heart.png'}}" 
                   class="like-icon" 
                   mode="aspectFit"></image>
            <text class="like-count">{{item.likes}}</text>
          </view>
          <!-- 价格标签 -->
          <view class="price-tag {{item.priceType}}">{{item.price}}</view>
        </view>
        
        <!-- 活动信息 -->
        <view class="activity-info">
          <text class="activity-title">{{item.title}}</text>
          <view class="activity-meta">
            <view class="meta-item">
              <image src="/images/icon-clock.png" class="meta-icon" mode="aspectFit"></image>
              <text class="meta-text">{{item.date}}</text>
            </view>
            <view class="meta-row">
              <view class="meta-item">
                <image src="/images/icon-location.png" class="meta-icon" mode="aspectFit"></image>
                <text class="meta-text">{{item.location}}</text>
              </view>
              <!-- 热度显示 -->
               <view class="meta-item heat-item" wx:if="{{item.heat}}">
                 <app-icon name="flame-hot" size="40" color="#F97316" />
                 <text class="meta-text heat-text">{{item.heat}}</text>
               </view>
            </view>
          </view>
          
          <!-- 报名信息 -->
          <view class="activity-footer">
            <view class="participants">
              <text class="participant-text">{{item.participants}}人已报名</text>
            </view>
            <view class="signup-btn {{item.isSignedUp ? 'signed' : ''}}" 
                  catchtap="onSignUp" 
                  data-id="{{item.id}}"
                  data-index="{{index}}">
              {{item.isSignedUp ? '已报名' : '立即报名'}}
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" wx:if="{{!loading && activityList.length === 0}}">
        <image src="/images/icon-empty.png" class="empty-icon" mode="aspectFit"></image>
        <text class="empty-text">暂无活动</text>
      </view>

      <!-- 底部提示 -->
      <view class="list-footer" wx:if="{{activityList.length > 0}}">
        <text class="footer-text">没有更多活动了 ~</text>
      </view>
    </view>

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

  <!-- 自定义底部导航栏 -->
  <view class="custom-tabbar">
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
      <image src="/images/tab-listen.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">陪伴</text>
    </view>
    <view class="tabbar-item active">
      <image src="/images/tab-companion-active.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text active">文娱</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/service/service">
      <image src="/images/tab-service.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">服务</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/chat/chat">
      <view class="message-icon-wrapper">
        <image src="{{totalUnread > 0 ? '/images/tab-message.png' : '/images/tab-message-nodot.png'}}" class="tabbar-icon" mode="aspectFit"></image>
      </view>
      <text class="tabbar-text">消息</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/profile/profile">
      <image src="/images/tab-profile.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">我的</text>
    </view>
  </view>
</view>

<!-- 二维码引导弹窗 -->
<view class="qrcode-modal {{showQrcodeModal ? 'show' : ''}}" catchtap="onCloseQrcodeModal">
  <view class="modal-mask"></view>
  <view class="modal-content" catchtap="preventBubble">
    <view class="close-btn" bindtap="onCloseQrcodeModal">
      <image src="/images/icon-close.png" class="close-icon" mode="aspectFit"></image>
    </view>
    
    <view class="modal-title">请关注二维码</view>
    <view class="modal-subtitle">回复“报名”获取活动详情</view>
    
    <view class="qrcode-container" wx:if="{{qrcodeImageUrl}}">
      <image src="{{qrcodeImageUrl}}" class="qrcode-image" mode="aspectFit" show-menu-by-longpress></image>
    </view>
    
    <view class="modal-tips" wx:if="{{qrcodeImageUrl}}">长按识别二维码或保存图片</view>
    
    <view class="save-btn" bindtap="onSaveQrcode" wx:if="{{qrcodeImageUrl}}">
      保存二维码图片
    </view>
  </view>
</view>
