<!--pages/device/fence/fence-new.wxml-->
<view class="fence-container">
  <!-- 顶部标题栏 -->
  <view class="header">
    <view class="header-left" bindtap="goBack">
      <text class="back-icon">‹</text>
    </view>
    <view class="header-title">电子围栏</view>
    <view class="header-right">
      <text class="menu-icon">⋯</text>
      <text class="settings-icon">⚙</text>
      <text class="location-icon">⊙</text>
    </view>
  </view>

  <!-- 地图容器 -->
  <view class="map-container">
    <!-- 显示牧场按钮 -->
    <view class="show-farm-btn">
      <text>显示牧场</text>
    </view>

    <!-- 地图组件 -->
    <map 
      id="fenceMap"
      class="fence-map"
      longitude="{{mapCenter.lng}}"
      latitude="{{mapCenter.lat}}"
      scale="{{mapScale}}"
      markers="{{markers}}"
      polygons="{{polygons}}"
      bindtap="onMapTap"
      bindmarkertap="onMarkerTap"
      bindpolygontap="onPolygonTap"
      show-location="{{true}}"
      enable-3D="{{false}}"
      enable-overlooking="{{false}}"
      enable-zoom="{{true}}"
      enable-scroll="{{true}}"
      enable-rotate="{{false}}"
      enable-satellite="{{false}}"
      enable-traffic="{{false}}"
    >
      <!-- 地图控件 -->
      <cover-view class="map-controls">
        <!-- 设备统计 -->
        <cover-view class="device-stats">
          <cover-view class="stat-item">
            <cover-view class="stat-label">智能采集器:</cover-view>
            <cover-view class="stat-value">{{deviceStats.collectors}}</cover-view>
          </cover-view>
          <cover-view class="stat-item">
            <cover-view class="stat-label">智能设备:</cover-view>
            <cover-view class="stat-value">{{deviceStats.devices}}</cover-view>
          </cover-view>
        </cover-view>

        <!-- 切换地图按钮 -->
        <cover-view class="switch-map-btn" bindtap="switchMapType">
          <cover-view class="switch-text">切换地图</cover-view>
        </cover-view>
      </cover-view>

      <!-- 地图上的位置标记 -->
      <cover-view class="location-markers">
        <cover-view 
          wx:for="{{fenceList}}" 
          wx:key="id"
          class="location-marker"
          style="left: {{item.position.x}}px; top: {{item.position.y}}px;"
        >
          <cover-view class="marker-icon">📍</cover-view>
          <cover-view class="marker-label">{{item.name}}</cover-view>
        </cover-view>
      </cover-view>
    </map>

    <!-- 底部信息栏 -->
    <view class="bottom-info">
      <view class="location-info">
        <text class="location-name">{{currentLocation.name || '各德'}}</text>
      </view>
      <view class="coordinates-info">
        <text class="coordinates">设备:{{deviceStats.total || '24065000912'}}更多>></text>
      </view>
    </view>
  </view>

  <!-- 操作面板 -->
  <view class="operation-panel" wx:if="{{showOperationPanel}}">
    <view class="panel-header">
      <text class="panel-title">{{isCreatingFence ? '新建围栏' : '围栏详情'}}</text>
      <text class="panel-close" bindtap="closeOperationPanel">×</text>
    </view>
    
    <view class="panel-content">
      <view wx:if="{{isCreatingFence}}" class="create-fence-form">
        <view class="form-item">
          <text class="form-label">围栏名称:</text>
          <input class="form-input" placeholder="请输入围栏名称" value="{{newFence.name}}" bindinput="onFenceNameInput"/>
        </view>
        <view class="form-item">
          <text class="form-label">围栏类型:</text>
          <picker class="form-picker" range="{{fenceTypes}}" value="{{newFence.typeIndex}}" bindchange="onFenceTypeChange">
            <view class="picker-text">{{fenceTypes[newFence.typeIndex] || '请选择类型'}}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="form-label">描述:</text>
          <textarea class="form-textarea" placeholder="请输入围栏描述" value="{{newFence.description}}" bindinput="onFenceDescInput"/>
        </view>
        <view class="form-item">
          <text class="form-label">坐标点 ({{newFence.coordinates.length}}):</text>
          <view class="coordinates-list">
            <view wx:for="{{newFence.coordinates}}" wx:key="index" class="coordinate-item">
              <text>点{{index + 1}}: {{item.lng}}, {{item.lat}}</text>
              <text class="remove-point" bindtap="removeCoordinate" data-index="{{index}}">删除</text>
            </view>
          </view>
        </view>
        <view class="form-actions">
          <button class="btn-cancel" bindtap="cancelCreateFence">取消</button>
          <button class="btn-save" bindtap="saveFence" disabled="{{!canSaveFence}}">保存围栏</button>
        </view>
      </view>

      <view wx:else class="fence-detail">
        <view class="detail-item">
          <text class="detail-label">围栏名称:</text>
          <text class="detail-value">{{selectedFence.name}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">围栏类型:</text>
          <text class="detail-value">{{selectedFence.type}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">面积:</text>
          <text class="detail-value">{{selectedFence.area}}平方米</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">放牧状态:</text>
          <text class="detail-value">{{selectedFence.grazingStatus}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">围栏内数量:</text>
          <text class="detail-value">{{selectedFence.insideCount}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">围栏外数量:</text>
          <text class="detail-value">{{selectedFence.outsideCount}}</text>
        </view>
        <view class="detail-actions">
          <button class="btn-edit" bindtap="editFence">编辑</button>
          <button class="btn-delete" bindtap="deleteFence">删除</button>
        </view>
      </view>
    </view>
  </view>

  <!-- 浮动操作按钮 -->
  <view class="fab-container">
    <view class="fab-main" bindtap="toggleFab">
      <text class="fab-icon">{{fabExpanded ? '×' : '+'}}</text>
    </view>
    <view class="fab-menu" wx:if="{{fabExpanded}}">
      <view class="fab-item" bindtap="startCreateFence">
        <text class="fab-item-icon">📍</text>
        <text class="fab-item-text">新建围栏</text>
      </view>
      <view class="fab-item" bindtap="refreshFences">
        <text class="fab-item-icon">🔄</text>
        <text class="fab-item-text">刷新数据</text>
      </view>
    </view>
  </view>

  <!-- 加载提示 -->
  <view class="loading-overlay" wx:if="{{loading}}">
    <view class="loading-content">
      <text class="loading-text">{{loadingText}}</text>
    </view>
  </view>
</view>