<!--pages/cattle/pen-detail/pen-detail.wxml-->
<view class="page-container">
  <!-- 加载状态 -->
  <view class="loading-container" wx:if="{{loading}}">
    <text>加载中...</text>
  </view>

  <!-- 详情内容 -->
  <view class="detail-content" wx:else>
    <!-- 头部：栏舍名称 -->
    <view class="detail-header">
      <view class="header-left">
        <text class="pen-label">栏舍名称</text>
        <text class="pen-name">{{pen.name}}</text>
      </view>
      <text class="status-badge">{{pen.statusText}}</text>
    </view>

    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">栏舍ID：</text>
          <text class="value">{{pen.id}}</text>
        </view>
        <view class="info-item">
          <text class="label">栏舍名称：</text>
          <text class="value">{{pen.name}}</text>
        </view>
        <view class="info-item">
          <text class="label">栏舍编码：</text>
          <text class="value">{{pen.code}}</text>
        </view>
        <view class="info-item">
          <text class="label">栏舍类型：</text>
          <text class="value">{{pen.type || '-'}}</text>
        </view>
        <view class="info-item">
          <text class="label">状态：</text>
          <text class="value">{{pen.statusText}}</text>
        </view>
      </view>
    </view>

    <!-- 容量信息 -->
    <view class="info-section">
      <view class="section-title">容量信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">最大容量：</text>
          <text class="value">{{pen.capacity || 0}}</text>
        </view>
        <view class="info-item">
          <text class="label">当前数量：</text>
          <text class="value">{{pen.currentCount || 0}}</text>
        </view>
        <view class="info-item">
          <text class="label">剩余容量：</text>
          <text class="value">{{(pen.capacity || 0) - (pen.currentCount || 0)}}</text>
        </view>
        <view class="info-item">
          <text class="label">面积：</text>
          <text class="value">{{pen.area || 0}}平方米</text>
        </view>
      </view>
    </view>

    <!-- 养殖场信息 -->
    <view class="info-section">
      <view class="section-title">养殖场信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">养殖场ID：</text>
          <text class="value">{{pen.farmId || pen.farm_id}}</text>
        </view>
        <view class="info-item">
          <text class="label">养殖场名称：</text>
          <text class="value">{{pen.farmName}}</text>
        </view>
      </view>
    </view>

    <!-- 位置与备注 -->
    <view class="info-section">
      <view class="section-title">位置与备注</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">位置：</text>
          <text class="value">{{pen.location || '-'}}</text>
        </view>
        <view class="info-item">
          <text class="label">备注：</text>
          <text class="value">{{pen.remark || '-'}}</text>
        </view>
      </view>
    </view>

    <!-- 时间信息 -->
    <view class="info-section">
      <view class="section-title">时间信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">创建时间：</text>
          <text class="value">{{pen.createdAtText}}</text>
        </view>
        <view class="info-item">
          <text class="label">更新时间：</text>
          <text class="value">{{pen.updatedAtText}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

