<!-- pages/home/home.wxml - 首页 -->
<view class="page-container">
  <!-- 头部标题区域 -->
  <view class="header-section">
    <view class="page-title">首页</view>
  </view>

  <!-- 预警类型标签 -->
  <view class="tabs">
    <view class="tab-item {{activeTab === 'collar' ? 'active' : ''}}" bindtap="switchTab" data-tab="collar">
      <text>项圈预警</text>
    </view>
    <view class="tab-item {{activeTab === 'eartag' ? 'active' : ''}}" bindtap="switchTab" data-tab="eartag">
      <text>耳标预警</text>
    </view>
    <view class="tab-item {{activeTab === 'anklet' ? 'active' : ''}}" bindtap="switchTab" data-tab="anklet">
      <text>脚环预警</text>
    </view>
    <view class="tab-item {{activeTab === 'host' ? 'active' : ''}}" bindtap="switchTab" data-tab="host">
      <text>主机预警</text>
    </view>
  </view>

  <scroll-view class="scroll-content" scroll-y enable-flex>
    <!-- 统计数据卡片 -->
    <view class="stats-card" bindtap="goToAlertList">
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-label">今日未被采集</text>
          <text class="stat-value">{{stats.notCollected}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">项圈绑带剪断</text>
          <text class="stat-value">{{stats.collarCut}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">温度预警</text>
          <text class="stat-value">{{stats.temperature}}</text>
        </view>
      </view>
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-label">今日运动量偏高</text>
          <text class="stat-value">{{stats.activityHigh}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">今日运动量偏低</text>
          <text class="stat-value warn">{{stats.activityLow}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">传输频次过慢</text>
          <text class="stat-value">{{stats.transferSlow}}</text>
        </view>
      </view>
      <view class="stats-row">
        <view class="stat-item single">
          <text class="stat-label">电量偏低</text>
          <text class="stat-value">{{stats.lowBattery}}</text>
        </view>
      </view>
    </view>

    <!-- 跳转生资保险 -->
    <view class="insurance-link" bindtap="goToInsurance">
      <text>跳转生资保险</text>
    </view>

    <!-- 智能设备 -->
    <view class="section">
      <view class="section-title">智能设备</view>
      <view class="device-grid">
        <view class="grid-item" bindtap="goToDeviceDetail" data-type="collar">
          <view class="icon-box icon-yellow">
            <text class="item-icon-text">📿</text>
          </view>
          <text class="item-label">智能项圈</text>
        </view>
        <view class="grid-item" bindtap="goToDeviceDetail" data-type="eartag">
          <view class="icon-box icon-blue">
            <text class="item-icon-text">🏷️</text>
          </view>
          <text class="item-label">智能耳标</text>
        </view>
        <view class="grid-item" bindtap="goToDeviceDetail" data-type="anklet">
          <view class="icon-box icon-purple">
            <text class="item-icon-text">⌚</text>
          </view>
          <text class="item-label">智能脚环</text>
        </view>
        <view class="grid-item" bindtap="goToDeviceDetail" data-type="host">
          <view class="icon-box icon-blue2">
            <text class="item-icon-text">🖥️</text>
          </view>
          <text class="item-label">智能主机</text>
        </view>
        <view class="grid-item" bindtap="goToDeviceDetail" data-type="monitor">
          <view class="icon-box icon-orange">
            <text class="item-icon-text">📹</text>
          </view>
          <text class="item-label">视频监控</text>
        </view>
      </view>
    </view>

    <!-- 智能工具 -->
    <view class="section">
      <view class="section-title">智能工具</view>
      <view class="tool-grid">
        <view class="grid-item" bindtap="goToTool" data-type="fence">
          <view class="icon-box icon-orange2">
            <text class="item-icon-text">🗺️</text>
          </view>
          <text class="item-label">电子围栏</text>
        </view>
        <view class="grid-item" bindtap="goToTool" data-type="scan">
          <view class="icon-box icon-blue3">
            <text class="item-icon-text">📱</text>
          </view>
          <text class="item-label">扫码溯源</text>
        </view>
        <view class="grid-item" bindtap="goToTool" data-type="check">
          <view class="icon-box icon-purple2">
            <text class="item-icon-text">🔍</text>
          </view>
          <text class="item-label">检测工具</text>
        </view>
        <view class="grid-item" bindtap="goToTool" data-type="photo">
          <view class="icon-box icon-red">
            <text class="item-icon-text">📷</text>
          </view>
          <text class="item-label">档案拍照</text>
        </view>
      </view>
    </view>

    <!-- 业务办理 -->
    <view class="section">
      <view class="section-title">业务办理</view>
      <view class="business-grid">
        <view class="grid-item" bindtap="goToBusiness" data-type="quarantine">
          <view class="icon-box icon-yellow2">
            <text class="item-icon-text">🛡️</text>
          </view>
          <text class="item-label">电子检疫</text>
        </view>
        <view class="grid-item" bindtap="goToBusiness" data-type="rights">
          <view class="icon-box icon-blue4">
            <text class="item-icon-text">📜</text>
          </view>
          <text class="item-label">电子确权</text>
        </view>
        <view class="grid-item" bindtap="goToBusiness" data-type="disposal">
          <view class="icon-box icon-purple3">
            <text class="item-icon-text">♻️</text>
          </view>
          <text class="item-label">无害化处理申报</text>
        </view>
      </view>
    </view>

    <!-- 底部留白 -->
    <view class="bottom-space"></view>
  </scroll-view>
</view>
