<template>
  <div>
    <div style="margin-bottom: 30px;">
      <button @click.stop="onClear">清空选中</button>

      <!-- <button @click.stop="mode = 'draw'">设置绘制模式</button> -->
       <button  @click.stop="editDrawingPolygon()">编辑地图区域</button>

       <button  @click.stop="saveDrawingPolygon()">保存地址</button>

      
    </div>
    <div id="mapContainer"></div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import { updateDept } from '@/api/system/dept'
const { proxy } = getCurrentInstance()


const mapDeptRow = localStorage.getItem('mapDeptRow')

const storePolygonArr = ref([]);

try {
  const parsed = JSON.parse(mapDeptRow);
  if (parsed && parsed.pointList) {
    const points = JSON.parse(parsed.pointList);
    if (Array.isArray(points)) {
      storePolygonArr.value = points.map(point => {
        if (!Array.isArray(point) || point.length !== 2) {
          console.error('Invalid coordinate format:', point);
          return null;
        }
        const [lat, lng] = point;
        if (isNaN(Number(lat)) || isNaN(Number(lng))) {
          console.error('Invalid coordinate values:', point);
          return null;
        }
        return [Number(lat), Number(lng)];
      }).filter(Boolean);
    }
  }
} catch (error) {
  console.error('Error parsing coordinates:', error);
}

console.log(storePolygonArr.value, '>>>>>>>>>');


let map = null // 地图实例
let marker = null // 点标记实例
let polygon = null // 多边形实例
let editor = null // 几何图形编辑器实例

let mapCenter = ref([40.038515, 116.272185]) // 地图中心点坐标
let coordinates = ref([40.038515, 116.272185]) // 坐标点
let polygonArr = ref(storePolygonArr.value) // 多边形坐标点数组

// 初始化地图
function initMap() {
  //定义地图中心点坐标
  var center = new TMap.LatLng(40.038515, 116.272185)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  map = new TMap.Map(document.getElementById('mapContainer'), {
    center: mapCenter.value,//设置地图中心点坐标
    zoom: 17.2,   //设置地图缩放级别
    pitch: 43.5,  //设置俯仰角
    rotation: 45    //设置地图旋转角度
  });

  // 绘制多边形
  drawPolygon(polygonArr.value)

  // 改变地图中心点
  polygonArr.value[0] && map.setCenter(polygonArr.value[0])

}
  

// 绘制多边形公共方法
function drawPolygon(pathArr = polygonArr.value) {
  let path = pathArr.map(p => {
    // Validate that both lat and lng are valid numbers
    const lat = Number(p[0]);
    const lng = Number(p[1]);
    if (isNaN(lat) || isNaN(lng)) {
      console.error('Invalid coordinates:', p);
      return null;
    }
    return new TMap.LatLng(lat, lng);
  }).filter(Boolean); // Remove any null entries

  if (path.length === 0) {
    console.error('No valid coordinates to draw polygon');
    return;
  }

  //初始化polygon
  polygon = new TMap.MultiPolygon({
      id: 'polygon-layer', //图层id
      map: map, //设置多边形图层显示到哪个地图实例中
      //多边形样式
      styles: {
          'polygon': new TMap.PolygonStyle({
              // 'color': '#3777FF', //面填充色
              'showBorder':false, //是否显示拔起面的边线
              'borderColor': '#3777FF' //边线颜色
          })
      },
      //多边形数据
      geometries: [
          {
            'id': 'polygon133', //该多边形在图层中的唯一标识（删除、更新数据时需要）
            'styleId': 'polygon', //绑定样式名
            'paths': path, //多边形轮廓
          }
      ]
  });
}


// 显示点标记公共方法
function showMarker(point = coordinates.value ) { 
   marker = new TMap.MultiMarker({
        // id: "marker-layer", //图层id
        map: map,
        styles: { //点标注的相关样式
            "marker": new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "anchor": { x: 16, y: 32 },
                // "src": "img/marker.png"
            })
        },
        geometries: [{ //点标注数据数组
            // "id": "demo",
            // "styleId": "marker",
            "position": new TMap.LatLng(...point),
            // "properties": {
            //     "title": "marker"
            // }
        }]
    });

}

// 清空多边形
function onClear() {
  
  if (polygon) {
    polygon.setMap(null); // 从地图移除多边形
    // 清除编辑器
    polygon = null;
  }
  // 清空路径数据
  polygonArr.value = [];
}

// 绘制多边形
function editDrawingPolygon() { 
  if (!polygon) {
    console.warn('没有可编辑的多边形');


    // 初始化几何图形及编辑器
      editor = new TMap.tools.GeometryEditor({
        map, // 编辑器绑定的地图对象
        overlayList: [ // 可编辑图层
            {
                //GeometryEditor 以 MultiPolygon（可以理解为多边形图层）激活进行编辑
                id: 'polygon133',
                overlay: new TMap.MultiPolygon({
                    map
                }),
            }
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式
        snappable: false // 开启邻近吸附
      });

      // 监听绘制结束事件，获取绘制几何图形
      editor.on('draw_complete', (geometry) => {
        console.log('绘制完成:', geometry);
        
        // 获取绘制的路径点
        const paths = geometry.paths;
        // 更新多边形坐标数组
        polygonArr.value = paths.map(i => [i.lat, i.lng]);

        // 停止编辑器
        editor.stop();
        
        // 清除之前的多边形（如果存在）
        if (polygon) {
          polygon.setMap(null);
        }

        // 使用新的坐标绘制多边形
        drawPolygon(polygonArr.value);
      });
      //围栏绘制完成变成多边形

    return;
  }


  // 初始化几何图形编辑器
  editor = new TMap.tools.GeometryEditor({
    map, // 编辑器绑定的地图对象
    overlayList: [ // 可编辑图层
      {
        id: 'polygon133', // 多边形的ID
        overlay: polygon // 要编辑的多边形图层
      }
    ],
    actionMode: TMap.tools.constants.EDITOR_ACTION.EDIT, // 设置为编辑模式
    snappable: false, // 开启邻近吸附
    selectable: true // 开启点选功能
  });

   editor.on('adjust_complete', (result) => {
        const newPaths = result.paths
        polygonArr.value = newPaths.map(point => [point.lat, point.lng]);
        console.log('多边形更新:', polygonArr.value );
    });
  // 监听编辑完成事件
  // editor.on('draw_complete', (geometry) => {
  //     console.log(geometry);
  // });
  
}

function saveDrawingPolygon() {
  if (!polygonArr.value || !polygonArr.value.length) {
    console.log('>>>>>>xian hui zhi');
    return;
  }

  editor.stop()

  console.log(polygonArr.value, '.>>>>>pointList');
  
  const payload = {
    ...JSON.parse(mapDeptRow),
    pointList: JSON.stringify(polygonArr.value)
  }
  
  updateDept(payload).then((response) => {
    if (response.code === 200) {
      // 更新 localStorage
      localStorage.setItem('mapDeptRow', JSON.stringify(payload));
      proxy.$modal.msgSuccess('地址保存成功');
      open.value = false;
    } else {
      proxy.$modal.msgError(response.msg || '地址保存失败');
    }
  })
}


onMounted(() => { 
  initMap()
})

onUnmounted(() => { 
  // 注销地图实例
  map.destroy()
 })
</script>

<style>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
<style scoped>
.control-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}

button {
  padding: 4px;
  background-color: #fff;
  color: #333;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>
