<template>
    <view class="map-container">
      <u-notice-bar mode="horizontal" :list="tipsList"></u-notice-bar>
      <map 
        id="editMap" 
        class="map" 
        :latitude="latitude" 
        :longitude="longitude" 
        :polygons="polygons" 
        :markers="markers"
        :show-location="true" 
        @tap="handleMapTap" 
        @markertap="handleMarkerTap" 
        @markerdragend="handleMarkerDrag" 
        scale="19"
      ></map>
  
      <!-- 定位按钮 -->
      <cover-image 
        class="location-btn" 
        src="https://lxnapi.ccttiot.com/bike/img/static/uoxanRjBrBrtcYwRGXKa" 
        @tap="moveToLocation"
      ></cover-image>
  
      <!-- 提示文本 -->
      <cover-view class="tip-text" v-if="isDrawing">
        {{ editMode ? '点击锚点进行删除' : '点击地图添加锚点，拖动锚点可调整位置' }}
      </cover-view>
  
      <!-- 控制按钮组 -->
      <cover-view class="controls">
        <!-- 未开始绘制时显示开始按钮 -->
        <cover-view class="control-btn" @tap="startDrawing" v-if="!isDrawing">
          开始绘制
        </cover-view>
  
        <!-- 绘制过程中显示的按钮组 -->
        <block v-else>
          <cover-view class="control-btn-group">
            <cover-view 
              class="control-btn" 
              :class="{'control-btn-active': !editMode}"
              @tap="toggleEditMode('draw')"
            >
              绘制锚点
            </cover-view>
  
            <cover-view 
              class="control-btn" 
              :class="{'control-btn-active': editMode}"
              @tap="toggleEditMode('delete')"
            >
              删除锚点
            </cover-view>
          </cover-view>
  
          <cover-view class="control-btn-group">
            <cover-view 
              class="control-btn" 
              @tap="finishDrawing" 
              :class="{'btn-disabled': points.length < 3}"
            >
              完成绘制
            </cover-view>
  
            <cover-view 
              class="control-btn control-btn-danger" 
              @tap="clearPolygon"
            >
              清除
            </cover-view>
          </cover-view>
        </block>
      </cover-view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'EditMap',
    props: {
      boundaryStr: {
        type: String,
        default: ''
      },
      longitude: {
        type: Number,
        default: 0
      },
      latitude: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        // latitude:  parseFloat(this.latitude),
        // longitude: parseFloat(this.longitude),
        points: [],
        polygons: [],
        markers: [],
        isDrawing: false,
        editMode: false,
        mapContext: null,
        tipsList: [
          '提示：点击"开始绘制"按钮开始绘制区域',
          '点击地图添加锚点',
          '点击锚点可删除',
          '至少需要3个锚点才能形成有效区域'
        ]
      }
    },
    mounted() {
      this.mapContext = uni.createMapContext('editMap', this)
      this.initBoundary()
    },
    watch: {
      boundaryStr: {
        handler() {
          this.initBoundary()
        },
        immediate: true
      }
    },
    methods: {
      // 初始化边界数据
      initBoundary() {
        if (!this.boundaryStr) return
        
        try {
          const points = JSON.parse(this.boundaryStr)
          if (Array.isArray(points) && points.length > 0) {
            this.points = points.map(point => ({
              longitude: Number(point[0]),
              latitude: Number(point[1])
            })).filter(point => 
              !isNaN(point.latitude) && !isNaN(point.longitude)
            )
            
            // 设置地图中心点
            
            
            this.updateMarkers()
            this.updatePolygonWithNearestNeighbor()
          }
        } catch (error) {
          console.error('解析边界数据失败:', error)
        }
      },
  
      // 更新标记点
      updateMarkers() {
        this.markers = this.points.map((point, index) => ({
          id: index,
          latitude: point.latitude,
          longitude: point.longitude,
          width: 20,
          height: 20,
          draggable: true
        }))
      },
  
      // 移动到当前位置
      async moveToLocation() {
        try {
          const [err, res] = await uni.getLocation({ type: 'gcj02' })
          if (err) throw new Error('获取位置失败')
  
          this.latitude = res.latitude
          this.longitude = res.longitude
  
          await new Promise(resolve => setTimeout(resolve, 100))
          this.mapContext.moveToLocation({
            latitude: res.latitude,
            longitude: res.longitude
          })
        } catch (error) {
          uni.showToast({
            title: '定位失败,请检查定位权限',
            icon: 'none'
          })
        }
      },
  
      // 开始绘制
      startDrawing() {
        this.isDrawing = true
        this.editMode = false
        if (this.points.length === 0) {
          uni.showToast({
            title: '请点击地图添加锚点',
            icon: 'none'
          })
        }
      },
  
      // 切换编辑模式
      toggleEditMode(mode) {
        this.editMode = mode === 'delete'
        uni.showToast({
          title: this.editMode ? '请点击锚点进行删除' : '请点击地图添加锚点',
          icon: 'none'
        })
      },
  
      // 处理地图点击
      handleMapTap(e) {
        if (!this.isDrawing || this.editMode) return
        
        const { latitude, longitude } = e.detail
        this.points.push({ latitude, longitude })
        this.updateMarkers()
        this.updatePolygonWithNearestNeighbor()
      },
  
      // 处理标记点击（删除）
      handleMarkerTap(e) {
        if (!this.editMode) return
        
        const markerId = e.detail.markerId
        this.points = this.points.filter((_, index) => index !== markerId)
        this.updateMarkers()
        this.updatePolygonWithNearestNeighbor()
      },
  
      // 处理标记拖动
      handleMarkerDrag(e) {
        const { markerId, latitude, longitude } = e.detail
        this.points[markerId] = { latitude, longitude }
        this.updateMarkers()
        this.updatePolygonWithNearestNeighbor()
      },
  
      // 更新多边形
      updatePolygonWithNearestNeighbor() {
        if (this.points.length < 3) {
          this.polygons = []
          return
        }
  
        // 计算中心点
        const centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
        const centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
        
        // 按角度排序
        let sortedPoints = [...this.points].sort((a, b) => {
          let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
          let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
          return angleA - angleB
        })
  
        // 闭合多边形
        sortedPoints.push(sortedPoints[0])
  
        this.polygons = [{
          points: sortedPoints,
          strokeWidth: 2,
          strokeColor: '#FF0000',
          fillColor: '#FF000050',
          zIndex: 1
        }]
      },
  
      // 完成绘制
      finishDrawing() {
  if (this.points.length < 3) {
    uni.showToast({
      title: '至少需要3个锚点才能形成区域',
      icon: 'none'
    })
    return
  }

  // 计算中心点
  const centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
  const centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
  
  // 按角度排序
  let sortedPoints = [...this.points].sort((a, b) => {
    let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
    let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
    return angleA - angleB
  })

  // 返回排序后的坐标点数组
  const coordinates = sortedPoints.map(point => [
    point.longitude,
    point.latitude
  ])
  
  this.$emit('on-complete', JSON.stringify(coordinates))
  
  // 清除绘制状态但保留图形
  this.isDrawing = false
  this.editMode = false
},
  
      // 清除绘制
      clearPolygon() {
        this.points = []
        this.markers = []
        this.polygons = []
        this.isDrawing = false
        this.editMode = false
        
        uni.showToast({
          title: '已清除绘制',
          icon: 'none'
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  .map-container {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .map {
    width: 100%;
    height: 100%;
  }
  
  .location-btn {
    position: fixed;
    right: 30rpx;
    bottom: 300rpx;
    width: 80rpx;
    height: 80rpx;
    z-index: 100;
  }
  
  .tip-text {
    position: fixed;
    top: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 16rpx 30rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    z-index: 100;
  }
  
  .controls {
    position: fixed;
    bottom: 60rpx;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
  }
  
  .control-btn-group {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
  }
  
  .control-btn {
    min-width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
    text-align: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    margin: 0 10rpx;
  }
  
  .control-btn-active {
    background-color: #007AFF;
    color: #ffffff;
  }
  
  .control-btn-danger {
    background-color: #ff4444;
    color: #ffffff;
  }
  
  .btn-disabled {
    opacity: 0.5;
    background-color: #cccccc;
    pointer-events: none;
  }
  </style>