<!-- 状态栏 -->
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>

<!-- 页面容器 -->
<view class="container">
  <!-- 头部 -->
  <view class="header">
    <view class="header-title">消息通知</view>
    <view class="header-actions">
      <view class="action-btn" bindtap="onMarkAllRead">
        <text class="action-text">全部已读</text>
      </view>
    </view>
  </view>

  <!-- 筛选标签 -->
  <view class="filter-tabs">
    <view 
      class="tab-item {{selectedTab === item.key ? 'active' : ''}}"
      wx:for="{{tabs}}"
      wx:key="key"
      data-key="{{item.key}}"
      bindtap="onTabChange"
    >
      <text class="tab-text">{{item.name}}</text>
      <view class="tab-badge" wx:if="{{item.count > 0}}">{{item.count}}</view>
    </view>
  </view>

  <!-- 通知列表 -->
  <scroll-view class="notification-list" scroll-y="{{true}}" bindscrolltolower="onLoadMore">
    <view 
      class="notification-item {{item.isRead ? 'read' : 'unread'}}"
      wx:for="{{notificationList}}"
      wx:key="id"
      data-item="{{item}}"
      bindtap="onNotificationTap"
    >
      <!-- 通知图标 -->
      <view class="notification-icon">
        <text class="icon-text">{{item.icon}}</text>
        <view class="unread-dot" wx:if="{{!item.isRead}}"></view>
      </view>

      <!-- 通知内容 -->
      <view class="notification-content">
        <view class="notification-title">{{item.title}}</view>
        <view class="notification-desc">{{item.content}}</view>
        <view class="notification-meta">
          <text class="notification-time">{{item.time}}</text>
          <text class="notification-type">{{item.typeName}}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="notification-actions">
        <view class="action-btn" data-item="{{item}}" bindtap="onDeleteNotification" catchtap="true">
          <text class="action-icon">🗑️</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" wx:if="{{hasMore}}">
      <text class="load-text">{{loading ? '加载中...' : '上拉加载更多'}}</text>
    </view>

    <!-- 没有更多数据 -->
    <view class="no-more" wx:if="{{!hasMore && notificationList.length > 0}}">
      <text class="no-more-text">没有更多通知了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{notificationList.length === 0 && !loading}}">
      <text class="empty-icon">📭</text>
      <text class="empty-text">暂无通知消息</text>
    </view>
  </scroll-view>
</view>