<!--pages/device/fence/fence.wxml-->
<view class="page-container">
  <!-- 顶部操作栏 -->
  <view class="top-bar">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        class="search-input" 
        placeholder="请输入围栏名称精确查找"
        value="{{searchValue}}"
        bindinput="onSearchInput"
        bindconfirm="handleSearch"
      />
      <button class="search-btn" bindtap="handleSearch">搜索</button>
      <button class="clear-btn" bindtap="clearSearch" wx:if="{{searchValue}}">清空</button>
    </view>
    
    <!-- 视图切换按钮 -->
    <view class="view-toggle">
      <button class="toggle-btn {{!showMap ? 'active' : ''}}" bindtap="toggleView">
        📋 列表
      </button>
      <button class="toggle-btn {{showMap ? 'active' : ''}}" bindtap="toggleView">
        🗺️ 地图
      </button>
    </view>
  </view>

  <!-- 地图视图 -->
  <view class="map-container" wx:if="{{showMap}}">
    <map
      id="fenceMap"
      class="fence-map"
      latitude="{{mapCenter.latitude}}"
      longitude="{{mapCenter.longitude}}"
      scale="{{mapScale}}"
      markers="{{mapMarkers}}"
      polygons="{{mapPolygons}}"
      bindmarkertap="onMarkerTap"
      bindregionchange="onRegionChange"
      show-location
      enable-3D
      enable-overlooking
      enable-zoom
      enable-scroll
      enable-rotate
    >
    </map>
    
    <!-- 地图上的围栏信息卡片 -->
    <view class="map-info-card" wx:if="{{selectedFence}}">
      <view class="info-header">
        <text class="info-title">{{selectedFence.name}}</text>
        <text class="info-status {{selectedFence.isActive ? 'status-active' : 'status-inactive'}}">
          {{selectedFence.isActive ? '已启用' : '未启用'}}
        </text>
      </view>
      <view class="info-content">
        <view class="info-row">
          <text class="info-label">类型：</text>
          <text class="info-value">{{selectedFence.type}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">状态：</text>
          <text class="info-value">{{selectedFence.grazingStatus}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">面积：</text>
          <text class="info-value">{{selectedFence.area}}平方米</text>
        </view>
        <view class="info-row">
          <text class="info-label">内部/外部：</text>
          <text class="info-value">{{selectedFence.insideCount}} / {{selectedFence.outsideCount}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 列表视图 -->
  <view class="list-container" wx:else>
    <!-- 加载状态 -->
    <view class="loading-container" wx:if="{{loading && !refreshing}}">
      <text>加载中...</text>
    </view>

    <!-- 围栏列表 -->
    <view class="fence-list" wx:else>
      <view class="list-item" wx:for="{{list}}" wx:key="id" bindtap="viewDetail" data-id="{{item.id}}" data-index="{{index}}">
        <view class="item-header">
          <text class="item-title">{{item.name}}</text>
          <text class="item-status {{item.isActive ? 'status-active' : 'status-inactive'}}">
            {{item.isActive ? '已启用' : '未启用'}}
          </text>
        </view>
        <view class="item-content">
          <view class="item-row">
            <text class="item-label">围栏类型：</text>
            <text class="item-value">{{item.type}}</text>
          </view>
          <view class="item-row">
            <text class="item-label">放牧状态：</text>
            <text class="item-value">{{item.grazingStatus}}</text>
          </view>
          <view class="item-row">
            <text class="item-label">围栏面积：</text>
            <text class="item-value">{{item.area}}平方米</text>
          </view>
          <view class="item-row">
            <text class="item-label">中心坐标：</text>
            <text class="item-value">{{item.center.lat}}, {{item.center.lng}}</text>
          </view>
          <view class="item-row">
            <text class="item-label">内部数量：</text>
            <text class="item-value">{{item.insideCount}}个</text>
          </view>
          <view class="item-row">
            <text class="item-label">外部数量：</text>
            <text class="item-value">{{item.outsideCount}}个</text>
          </view>
          <view class="item-row" wx:if="{{item.description}}">
            <text class="item-label">描述：</text>
            <text class="item-value">{{item.description}}</text>
          </view>
          <view class="item-row">
            <text class="item-label">创建时间：</text>
            <text class="item-value">{{item.createdAt}}</text>
          </view>
        </view>
        <view class="item-footer">
          <text class="view-map-hint">点击在地图上查看 🗺️</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="stats-bar" wx:if="{{!loading}}">
      <text class="stats-text">共 {{total}} 条数据，当前第 {{page}}/{{totalPages}} 页</text>
    </view>
  </view>
</view>
