<view class="container">
  <map id="map" 
       longitude="{{longitude}}" 
       latitude="{{latitude}}" 
       scale="{{scale}}" 
       markers="{{markers}}"
       bindmarkertap="onMarkerTap"
       style="width: 100%; height: 100vh;">
       <!-- 自定义气泡 -->
        <!-- <cover-view wx:for="{{markers}}" wx:key="id" wx:if="{{markerId === item.id}}" class="custom-callout" style="left: {{40}}px; top: {{200}}px;">
            <cover-view class="callout-content">
            {{item.longitude}}--{{item.latitude}}
                <cover-view>闸井编号: {{item.manholeInfo.wellCode}}</cover-view>
                <cover-view>闸井类型:  {{item.manholeInfo.wellType}}</cover-view>
                <cover-view>闸井状态: {{item.manholeInfo.isInStall === '0' ? '未安装' : item.manholeInfo.isInStall === '1' ? '已安装' : item.manholeInfo.isInStall === '2' ? '井打不开' : '未知'}}</cover-view>
                <cover-view>详细地址: {{item.manholeInfo.position}}</cover-view>
                <cover-view wx:if="{{item.manholeInfo.isInStall === '0'}}" class="callout-button">
                <cover-button bindtap="onButtonClick">新建设备</cover-button>
                </cover-view> 
            </cover-view>
        </cover-view> -->
        <!-- <cover-view slot="callout">
        <block wx:for="{{markers}}" wx:key="id">
          <cover-view  class="customCallout" marker-id="{{item.id}}" >
            <cover-view class="content"> 
              {{num}}-{{item}}-{{index}}
            </cover-view>
          </cover-view>
        </block>
      </cover-view> -->
  </map>
  
  <view class="map-controls">
    <button class="control-btn" bindtap="zoomIn">+</button>
    <button class="control-btn" bindtap="zoomOut">-</button>
  </view>

  <button wx:if="{{activeMarker.manholeInfo.isInStall === '0'}}" class="create-btn" bindtap="createDevice">
    <view class="filter-btn-content">
      <image src="/images/addDevice.png" class="filter-icon" mode="aspectFit"></image>
      <text>安装</text>
    </view>
  </button>
  <button class="filter-btn" bindtap="showFilterPicker">
    <view class="filter-btn-content">
      <image src="/images/search.png" class="filter-icon" mode="aspectFit"></image>
      <text>搜索</text>
    </view>
  </button>
  
  <!-- 底部弹出层 -->
  <view class="action-sheet-mask" wx:if="{{showActionSheet}}" bindtap="hideActionSheet"></view>
  <view class="action-sheet" wx:if="{{showActionSheet}}">
    <view class="action-sheet-title">筛选条件</view>
    <view class="action-sheet-item" wx:for="{{filterOptions}}" wx:key="index" data-type="{{item.type}}" bindtap="onFilterSelect">
      {{item.name}}
    </view>
    <view class="action-sheet-cancel" bindtap="hideActionSheet">取消</view>
  </view>

  <!-- 筛选井类型 -->
  <picker bindchange="bindFromPickerChange" value="{{filterWellType}}" range="{{wellTypes}}">
    <view class="picker">
      {{wellTypes[fromIndex].label}}
    </view>
  </picker>

  <van-popup 
    show="{{showPopupSelect}}" 
    position="bottom" 
    bind:close="onCloseSelect"
  >
        <van-picker
            show-toolbar
            title="选择井类型"
            columns="{{ wellTypeList }}"
            bind:cancel="onCancelSelect"
            bind:confirm="confirmSelectWellType"
        />
    </van-popup>

  <van-popup 
    show="{{showPopup}}" 
    round 
    position="center" 
    bind:close="onClose"
  >
    <view class="popup-content">
        <text class="popup-title">{{defaultTitieText}}</text>
        <van-field 
            type="text" 
            placeholder="{{defaultText}}" 
            bind:input="onInput" 
            value="{{inputValue}}"
        />
        <view class="btn-group">
        <button class="cancel-btn" bindtap="onCancel">取消</button>
        <button class="confirm-btn" bindtap="onConfirm">确认</button>
        </view>
    </view>
    </van-popup>
</view>