<!--pages/device/device.wxml-->
<view class="device-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="{{deviceTypes}}"
          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 
          class="filter-option {{statusFilter === 'online' ? 'active' : ''}}"
          bindtap="onStatusFilter"
          data-status="online"
        >
          在线
        </view>
        <view 
          class="filter-option {{statusFilter === 'offline' ? 'active' : ''}}"
          bindtap="onStatusFilter"
          data-status="offline"
        >
          离线
        </view>
        <view 
          class="filter-option {{statusFilter === 'error' ? 'active' : ''}}"
          bindtap="onStatusFilter"
          data-status="error"
        >
          故障
        </view>
      </view>
    </view>
  </view>

  <!-- 设备列表 -->
  <view class="device-list">
    <view 
      wx:for="{{deviceList}}" 
      wx:key="id" 
      class="device-item"
      bindtap="viewDeviceDetail"
      data-id="{{item.id}}"
      data-type="{{item.type}}"
    >
      <view class="device-icon">
        <text class="icon">{{getDeviceTypeInfo(item.type).icon}}</text>
      </view>
      
      <view class="device-info">
        <view class="device-name">{{item.name || item.deviceNumber}}</view>
        <view class="device-details">
          <text class="detail-item">编号: {{item.deviceNumber}}</text>
          <text class="detail-item">类型: {{getDeviceTypeInfo(item.type).label}}</text>
        </view>
        <view class="device-meta">
          <text class="meta-item">位置: {{item.location || '未知'}}</text>
          <text class="meta-item">最后更新: {{formatTime(item.lastUpdateTime)}}</text>
        </view>
      </view>
      
      <view class="device-status">
        <view 
          class="status-badge"
          style="background-color: {{getStatusColor(item.status)}}"
        >
          {{getStatusText(item.status)}}
        </view>
        <view class="device-actions">
          <text class="action-btn edit" bindtap="editDevice" data-id="{{item.id}}" data-type="{{item.type}}" catchtap="true">编辑</text>
          <text class="action-btn delete" bindtap="deleteDevice" data-id="{{item.id}}" data-name="{{item.name || item.deviceNumber}}" catchtap="true">删除</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view wx:if="{{deviceList.length === 0 && !loading}}" class="empty-state">
      <text class="empty-icon">📱</text>
      <text class="empty-text">暂无设备数据</text>
      <button class="add-btn" bindtap="addDevice">添加设备</button>
    </view>

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

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

  <!-- 添加按钮 -->
  <view class="fab" bindtap="addDevice">
    <text class="fab-icon">+</text>
  </view>

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