<!--动物列表页面-->
<view class="page-container">
  <!-- 搜索和筛选栏 -->
  <view class="search-filter-bar">
    <view class="search-input-wrapper">
      <input 
        class="search-input"
        placeholder="搜索动物名称或编号"
        value="{{searchKeyword}}"
        bindinput="onSearchInput"
        bindconfirm="onSearchConfirm"
      />
      <view class="search-icon" bindtap="onSearchConfirm">
        <image src="/images/icons/search.png" mode="aspectFit"></image>
      </view>
      <view class="clear-icon" wx:if="{{searchKeyword}}" bindtap="onSearchClear">
        <image src="/images/icons/close.png" mode="aspectFit"></image>
      </view>
    </view>
    
    <view class="filter-buttons">
      <button class="filter-btn" bindtap="onFarmFilter">
        <image src="/images/icons/farm.png" mode="aspectFit"></image>
      </button>
      <button class="filter-btn" bindtap="onStatusFilter">
        <image src="/images/icons/health.png" mode="aspectFit"></image>
      </button>
      <button class="filter-btn" bindtap="onBreedFilter">
        <image src="/images/icons/breed.png" mode="aspectFit"></image>
      </button>
    </view>
  </view>

  <!-- 动物列表 -->
  <scroll-view 
    class="animal-list-scroll"
    scroll-y
    refresher-enabled
    refresher-triggered="{{refreshing}}"
    bindrefresherrefresh="onPullDownRefresh"
    bindscrolltolower="onReachBottom"
  >
    <view class="animal-list">
      <view 
        class="animal-item"
        wx:for="{{animalList}}"
        wx:key="id"
        data-animal="{{item}}"
        bindtap="onAnimalTap"
      >
        <!-- 动物头像和基本信息 -->
        <view class="animal-header">
          <image 
            class="animal-avatar" 
            src="{{item.avatar || '/images/default-animal.png'}}" 
            mode="aspectFill"
          ></image>
          <view class="animal-basic-info">
            <text class="animal-name">{{item.name}}</text>
            <text class="animal-code">编号：{{item.code}}</text>
            <text class="animal-farm">{{item.farm_name}}</text>
          </view>
          <view class="animal-status">
            <text class="status {{formatHealthStatus(item.health_status).class}}">
              {{formatHealthStatus(item.health_status).text}}
            </text>
          </view>
        </view>

        <!-- 动物详细信息 -->
        <view class="animal-details">
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">品种</text>
              <text class="detail-value">{{item.breed}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">性别</text>
              <text class="detail-value">{{item.gender === 'male' ? '公' : '母'}}</text>
            </view>
          </view>
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">年龄</text>
              <text class="detail-value">{{calculateAge(item.birth_date)}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">体重</text>
              <text class="detail-value">{{formatWeight(item.weight)}}</text>
            </view>
          </view>
        </view>

        <!-- 健康信息 -->
        <view class="health-info" wx:if="{{item.last_health_check}}">
          <view class="health-item">
            <text class="health-label">最近检查</text>
            <text class="health-value">{{item.last_health_check}}</text>
          </view>
          <view class="health-item" wx:if="{{item.temperature}}">
            <text class="health-label">体温</text>
            <text class="health-value {{item.temperature > 39.5 ? 'text-danger' : 'text-success'}}">
              {{item.temperature}}°C
            </text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="animal-actions">
          <button 
            class="action-btn secondary"
            data-animal="{{item}}"
            bindtap="onHealthRecord"
          >
            健康记录
          </button>
          <button 
            class="action-btn secondary"
            data-animal="{{item}}"
            bindtap="onEditAnimal"
          >
            编辑
          </button>
          <button 
            class="action-btn danger"
            data-animal="{{item}}"
            bindtap="onDeleteAnimal"
          >
            删除
          </button>
        </view>
      </view>
    </view>

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

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

  <!-- 空状态 -->
  <view class="empty" wx:if="{{!loading && animalList.length === 0}}">
    <image class="empty-icon" src="/images/empty-animal.png" mode="aspectFit"></image>
    <text class="empty-text">还没有动物</text>
    <text class="empty-desc">添加您的第一只动物开始管理</text>
    <button class="btn btn-primary mt-3" bindtap="onAddAnimal">添加动物</button>
  </view>

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

  <!-- 添加按钮 -->
  <view class="add-btn" bindtap="onAddAnimal">
    <image src="/images/icons/add.png" mode="aspectFit"></image>
  </view>
</view>