<!--pages/cattle/pen/pen.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="pen-list" wx:else>
    <view class="pen-card" wx:for="{{list}}" wx:key="id" bindtap="viewDetail" data-id="{{item.id}}">
      <!-- 栏舍名称 -->
      <view class="card-header">
        <text class="pen-name">栏舍名：{{item.name}}</text>
        <button class="edit-btn" size="mini" catchtap="editPen" data-id="{{item.id}}">编辑</button>
      </view>
      
      <!-- 详细信息 -->
      <view class="card-body">
        <view class="info-row">
          <text class="label">动物类型：</text>
          <text class="value">牛</text>
        </view>
        <view class="info-row">
          <text class="label">栏舍类型：</text>
          <text class="value">{{item.type || '--'}}</text>
        </view>
        <view class="info-row">
          <text class="label">负责人：</text>
          <text class="value">admin</text>
        </view>
        <view class="info-row">
          <text class="label">容量：</text>
          <text class="value">{{item.capacity || 0}}</text>
        </view>
        <view class="info-row">
          <text class="label">状态：</text>
          <switch class="status-switch" checked="{{item.statusValue}}" catchtap="toggleStatus" data-id="{{item.id}}" />
        </view>
        <view class="info-row">
          <text class="label">创建人：</text>
          <text class="value">admin</text>
        </view>
        <view class="info-row">
          <text class="label">创建时间：</text>
          <text class="value">{{item.createdAtText}}</text>
        </view>
      </view>
      
      <!-- 分隔线 -->
      <view class="card-footer">
        <text class="page-indicator">{{page}}/{{totalPages}}</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 class="add-btn">
    <text>新增栏舍</text>
  </view>
</view>

