<!--pages/alert/collar-alert/collar-alert.wxml-->
<view class="page-container">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <input 
      class="search-input" 
      placeholder="🔍 请输入项圈编号或设备名称"
      value="{{searchValue}}"
      bindinput="onSearchInput"
      bindconfirm="handleSearch"
      type="text"
    />
    <button class="search-btn" bindtap="handleSearch" wx:if="{{searchValue}}">搜索</button>
    <button class="clear-btn" bindtap="clearSearch" wx:if="{{searchValue}}">清空</button>
  </view>

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

  <!-- 预警列表 -->
  <view class="alert-list" wx:else>
    <view class="alert-card {{item.alertLevel}}" wx:for="{{list}}" wx:key="id" bindtap="viewDetail" data-id="{{item.id}}">
      <!-- 预警头部 -->
      <view class="card-header">
        <view class="header-left">
          <text class="alert-type">{{item.alertTypeText}}</text>
          <text class="alert-level level-{{item.alertLevel}}">{{item.alertLevelText}}</text>
        </view>
        <text class="collar-number">{{item.collarNumber}}</text>
      </view>
      
      <!-- 预警描述 -->
      <view class="alert-description">
        <text>{{item.description}}</text>
      </view>
      
      <!-- 详细信息 -->
      <view class="card-body">
        <view class="info-row">
          <text class="label">设备名称：</text>
          <text class="value">{{item.deviceName}}</text>
        </view>
        <view class="info-row">
          <text class="label">设备状态：</text>
          <text class="value">{{item.deviceStatusText}}</text>
        </view>
        <view class="info-row">
          <text class="label">预警时间：</text>
          <text class="value">{{item.alertTimeText}}</text>
        </view>
        <view class="info-row">
          <text class="label">温度：</text>
          <text class="value">{{item.temperature}}°C</text>
        </view>
        <view class="info-row">
          <text class="label">电量：</text>
          <text class="value">{{item.battery}}%</text>
        </view>
      </view>
      
      <!-- 分隔线 -->
      <view class="card-footer">
        <text class="view-detail">点击查看详情 ></text>
      </view>
    </view>

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

  <!-- 分页 -->
  <view class="pagination" wx:if="{{totalPages > 1 && list.length > 0}}">
    <button class="page-btn" bindtap="prevPage" disabled="{{page === 1}}">上一页</button>
    <view class="page-numbers">
      <text class="page-number {{page === item ? 'active' : ''}}" 
            wx:for="{{totalPages}}" 
            wx:key="index"
            wx:for-item="item"
            wx:for-index="index"
            data-page="{{index + 1}}"
            bindtap="changePage">
        {{index + 1}}
      </text>
    </view>
    <button class="page-btn" bindtap="nextPage" disabled="{{page === totalPages}}">下一页</button>
  </view>
</view>

