<!--pages/alert/alert.wxml-->
<view class="alert-container">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <view class="search-input-wrapper">
      <input 
        class="search-input"
        placeholder="搜索预警内容..."
        value="{{searchKeyword}}"
        bindinput="onSearchInput"
        bindconfirm="onSearch"
      />
      <text class="search-icon" bindtap="onSearch">🔍</text>
    </view>
    <text wx:if="{{searchKeyword}}" class="clear-btn" bindtap="onClearSearch">清空</text>
  </view>

  <!-- 筛选栏 -->
  <view class="filter-bar">
    <!-- 预警类型筛选 -->
    <view class="filter-group">
      <view class="filter-label">类型:</view>
      <view class="filter-options">
        <view 
          class="filter-option {{typeFilter === 'all' ? 'active' : ''}}"
          bindtap="onTypeFilter"
          data-type="all"
        >
          全部
        </view>
        <view 
          wx:for="{{alertTypes}}"
          wx:key="value"
          class="filter-option {{typeFilter === item.value ? 'active' : ''}}"
          bindtap="onTypeFilter"
          data-type="{{item.value}}"
        >
          {{item.icon}} {{item.label}}
        </view>
      </view>
    </view>

    <!-- 状态筛选 -->
    <view class="filter-group">
      <view class="filter-label">状态:</view>
      <view class="filter-options">
        <view 
          class="filter-option {{statusFilter === 'all' ? 'active' : ''}}"
          bindtap="onStatusFilter"
          data-status="all"
        >
          全部
        </view>
        <view 
          wx:for="{{alertStatuses}}"
          wx:key="value"
          class="filter-option {{statusFilter === item.value ? 'active' : ''}}"
          bindtap="onStatusFilter"
          data-status="{{item.value}}"
        >
          {{item.label}}
        </view>
      </view>
    </view>
  </view>

  <!-- 批量操作栏 -->
  <view wx:if="{{alertList.length > 0}}" class="batch-actions">
    <button class="batch-btn" bindtap="batchHandleAlerts">批量处理</button>
  </view>

  <!-- 预警列表 -->
  <view class="alert-list">
    <view 
      wx:for="{{alertList}}" 
      wx:key="id" 
      class="alert-item"
      bindtap="viewAlertDetail"
      data-id="{{item.id}}"
      data-type="{{item.type}}"
    >
      <view class="alert-icon">
        <text class="icon">{{getAlertTypeInfo(item.type).icon}}</text>
      </view>
      
      <view class="alert-info">
        <view class="alert-title">{{item.title}}</view>
        <view class="alert-content">{{item.content}}</view>
        <view class="alert-meta">
          <text class="meta-item">设备: {{item.deviceName || '未知'}}</text>
          <text class="meta-item">时间: {{formatTime(item.createTime)}}</text>
        </view>
      </view>
      
      <view class="alert-status">
        <view 
          class="priority-badge"
          style="background-color: {{getPriorityColor(item.priority)}}"
        >
          {{getPriorityText(item.priority)}}
        </view>
        <view 
          class="status-badge"
          style="background-color: {{getStatusInfo(item.status).color}}"
        >
          {{getStatusInfo(item.status).label}}
        </view>
        <view class="alert-actions">
          <text 
            wx:if="{{item.status === 'pending'}}"
            class="action-btn handle" 
            bindtap="handleAlert" 
            data-id="{{item.id}}" 
            data-type="{{item.type}}" 
            catchtap="true"
          >
            处理
          </text>
          <text 
            wx:if="{{item.status === 'pending'}}"
            class="action-btn ignore" 
            bindtap="ignoreAlert" 
            data-id="{{item.id}}" 
            data-type="{{item.type}}" 
            catchtap="true"
          >
            忽略
          </text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view wx:if="{{alertList.length === 0 && !loading}}" class="empty-state">
      <text class="empty-icon">🚨</text>
      <text class="empty-text">暂无预警数据</text>
    </view>

    <!-- 加载更多 -->
    <view wx:if="{{hasMore && alertList.length > 0}}" class="load-more">
      <text wx:if="{{loading}}">加载中...</text>
      <text wx:else>上拉加载更多</text>
    </view>

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

  <!-- 加载状态 -->
  <view wx:if="{{loading && alertList.length === 0}}" class="loading-container">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 详情弹窗 -->
  <view wx:if="{{detailVisible}}" class="detail-mask" catchtouchmove="true">
    <view class="detail-panel">
      <view class="detail-header">
        <text class="detail-title">预警详情</text>
        <text class="detail-close" bindtap="closeDetail">✖</text>
      </view>
      <view class="detail-body">
        <view class="detail-row" wx:for="{{detailPairs}}" wx:key="label">
          <text class="detail-label">{{item.label}}</text>
          <text class="detail-value">{{item.value}}</text>
        </view>
      </view>
      <view class="detail-footer">
        <button class="primary" bindtap="handleAlert" data-id="{{detailData.id}}" data-type="{{typeFilter === 'all' ? (detailData.alertType || 'eartag') : typeFilter}}">处理</button>
        <button class="plain" bindtap="ignoreAlert" data-id="{{detailData.id}}" data-type="{{typeFilter === 'all' ? (detailData.alertType || 'eartag') : typeFilter}}">忽略</button>
      </view>
    </view>
  </view>
</view>
