<template>
  <tlbs-map
    ref="mapRef"
    api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="handleClick"
    @map_inited="onMapInited"
  >
    <div style="position: absolute; top: 0; left: 0; z-index: 2000">
      <button @click.stop="mode = 'draw'">设置绘制模式</button>
      <button @click.stop="mode = 'edit'">设置编辑模式</button>
      <button @click.stop="drawPolygon">设置画多边形</button>
      <button @click.stop="activeId = 'circle'">设置画圆形</button>
      <button @click.stop="getOverlayList">获取图层列表</button>
      <button @click.stop="onSelectGeometry">选中图形</button>
      <button @click.stop="onGetSelectedList">获取选中集合图形</button>
      <button @click.stop="onClear">清空选中</button>
      <button @click.stop="onSavePointList">保存地址</button>
    </div>
    <!--vue2使用:active-overlay-id.sync="activeId" -->
    <!-- <tlbs-geometry-editor
      ref="editorRef"
      v-model:active-overlay-id="activeId"
      :action-mode="mode"
      polygon-id="polygon"
      :default-polygon-geometries="geometries"
      :polygon-styles="styles"
      selectable
      @select="onSelect"
      @draw_complete="onDrowComplet"
      @adjust_complete="onAdjustComplete"
      @draw_error="onDrawError"
      @click="handleClick1"
    /> -->

    <tlbs-multi-marker
      ref="markerRef"
      :geometries="geometries1"
      :styles="styles1"
      :options="options"
    />
  </tlbs-map>
</template>
<script setup>
import { ref, watch, onMounted, getCurrentInstance, nextTick } from 'vue'
import { getMapCoder } from '@/api/map'
import { updateDept } from '@/api/system/dept'
import { useRoute } from 'vue-router'
const { proxy } = getCurrentInstance()
const route = useRoute()
const deptForm = ref({})
const mapDeptRow = localStorage.getItem('mapDeptRow')

const coordinate = ref(JSON.parse(JSON.parse(mapDeptRow).pointList))

onMounted(() => {
  if (mapDeptRow) {
    deptForm.value = JSON.parse(mapDeptRow)
  }
  console.log(coordinate.value, '>>>>>>zuobiao')
})
// const paths = [
//   { lat: 40.041117253378246, lng: 116.2722415837743 },
//   { lat: 40.03942536171407, lng: 116.2726277820093 },
//   { lat: 40.03970460886076, lng: 116.27483769345417 },
//   { lat: 40.041404706498625, lng: 116.27443003983899 },
// ]
const mapRef = ref(null)
const center = ref({ lat: 40.040452, lng: 116.273486 })
const zoom = ref(17)
const editorRef = ref(null)
const mode = ref('edit')
const activeId = ref('polygon')
const latestPointList = ref([])
const onToggleMode = () => {
  mode.value = mode.value === 'draw' ? 'edit' : 'draw'
}

const onSelect = (e) => {
  console.log('select', e)
}
const onDrowComplet = (geomeytry) => { // 绘制完成
  const pointList = geomeytry.paths || geomeytry.pointList || [];
  latestPointList.value = pointList;
  console.log({ pointList }, '这是地址获取到的数据');
}
const onAdjustComplete = (geomeytry) => { // 调整完成
  const pointList = geomeytry.paths || geomeytry.pointList || [];
  latestPointList.value = pointList;
  console.log({ pointList }, '这是地址获取到的数据');
}
const onDrawError = (e) => {
  console.log(e)
}

const getOverlayList = () => {
  console.log(editorRef.value.editor.getOverlayList())
}

const onMapInited = () => {
  // 地图加载完成后，可以获取地图实例，调用地图实例方法
  console.log(mapRef.value.map, '>>>>>>>地图实例')

}

const control = {
  scale: {},
  zoom: {
    position: 'topRight',
  },
}

console.log(coordinate.value, '>>>>>>8888888');

const geometries = [
  {
    id: 'firstPolygon',
    styleId: 'polygon', // 样式id
    paths: coordinate.value, // 多边形的位置信息
    properties: {
      // 多边形的属性数据
      title: 'polygon',
    },
  },
]

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


const styles = {
  polygon: {
    color: '#3777FF', // 面填充色
    showBorder: false, // 是否显示拔起面的边线
    borderColor: '#00FFFF', // 边线颜色
  },
}

// function handleClick(e) {
//   console.log(e, '>>>>>>点击')
// }
function onClear() {
  editorRef.value.editor.select([])
}
function onSelectGeometry() {
  editorRef.value.editor.select(['firstPolygon'])
}
function onGetSelectedList() {
  console.log(editorRef.value.editor.getSelectedList())
}
function onSavePointList() {
  if (!latestPointList.value.length) {
    proxy.$modal.msgError('请先绘制或调整图形');
    return;
  }
  // 合并所有区域字段和 pointList
  const payload = {
    ...deptForm.value,
    pointList: JSON.stringify(latestPointList.value)
  }
  updateDept(payload).then((response) => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess('地址保存成功');
      open.value = false;
      getList();
    } else {
      proxy.$modal.msgError(response.msg || '地址保存失败');
    }
  })
}

// 设置绘制模式
function drawPolygon() {
  activeId.value = 'polygon'

  // 获取地图实例
  // const map = mapRef.value.map
  // console.log(editorRef.value, '>>>>>>>99999');
  // console.log(editorRef.value.polygon, '>>>>>>88888');

  // const paths = [
  // { lat: 40.041117253378246, lng: 116.2722415837743 },
  // { lat: 40.03942536171407, lng: 116.2726277820093 },
  // { lat: 40.03970460886076, lng: 116.27483769345417 },
  // { lat: 40.041404706498625, lng: 116.27443003983899 },
// ]

//   const polygon = new Polygon({
//     points: paths,
//     fillColor: "#ff0000",
//     strokeWidth: 12,
//     strokeColor: "#ffff00",
//     pattern: [10, 20, 30, 40],
//     holes: undefined
//   })
//   editorRef.value.polygon(polygon);
    
  
  // 设置绘制模式
  // map.setActionMode('draw')
  // // 设置绘制样式
  // map.setDrawStyle({
  //   color: '#3777FF', // 面填充色
  //   showBorder: false, // 是否显示拔起面的边线
  //   borderColor: '#00FFFF', // 边线颜色
  // })
  // // 设置绘制类型
  // map.setDrawType('polygon')
  // // 设置绘制回调
  // map.on('draw_complete', (e) => {
  //   console.log(e, '>>>>>>绘制完成')
  // })

  // const polygon = mapRef.value.map.addPolygon({
  //   paths: coordinate.value,
  //   style: {
  //     color: '#3777FF', // 面填充色
  //     showBorder: false, // 是否显示拔起面的边线
  //     borderColor: '#00FFFF', // 边线颜色
  //   }
  // })
}

const markerRef = ref(null)
let geometries1 = ref([
  //  {
  //     styleId: 'marker',
  //     position: {
  //       lat: 39.91799, lng: 116.397027
  //     }
  // },
  // {
  //   "styleId": "marker",
  //   "position": {
  //       "lat": 39.89497826231231,
  //       "lng": 116.40317446514734
  //   }
  // }
])
const styles1 = ref({
    marker: {
      width: 20,
      height: 30,
      anchor: { x: 10, y: 30 },
    }
})

const options = {
  minZoom: 5,
  maxZoom: 15,
  // enableClick: true,
  // enableDragging: false
}

function handleClick(e) {
  console.log(e, '>>>>>>>eeee88');

  const poin = {
    id: `marker-${Date.now()}`,
      styleId: `marker-${Date.now()}`,
      position: {
        lat: e.latLng.lat,
        lng: e.latLng.lng
      }
      // position: {
        // lat: 39.91799, lng: 116.397027
      // }
      
  }
    
  geometries1.value.push(poin)
  markerRef.value.geometries.push(poin)
  // updateMarkers

  console.log(markerRef.value, '.>>>>oin');

  console.log(markerRef.value.marker, '.>>>>oin');

  // 更新(markerRef.value.marker

  // console.log(mapRef.value.map.add, '>>>>>>markerRef.value');
  
  console.log(geometries1.value, '>>>>>>geometries1');

  //  nextTick(() => {
  //   mapRef.value.map.invalidateSize();
  // });
}

</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;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>
