<template>
  <div class="mapCom">
    <div class="mapMain">
      <div id="map"></div>
    </div>
    <div class="mapDetail">
      <span class="title">数据详情</span>
      <div class="detailMsg" v-for="(it, index) in drawLayers" :key="index">
        <div class="detailMsgTop">
          <span style="margin-right: 10px">绘制图形：{{ it.name }}</span>
          <span>绘制ID：{{ it.id }}</span>
        </div>
        <div class="detailMsgBot">
          <span style="margin-right: 10px">精度：{{ it.lat }}</span>
          <span>纬度：{{ it.lng }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted, reactive, watch } from 'vue'
import { CanvasLabel } from '@panzhiyue/leaflet-canvaslabel'
import img from '@/assets/mapdarw/images/marker-icon.png'
// import L from 'leaflet'
// import 'leaflet/dist/leaflet.css'

const map = ref(null)
const drawLayerGroup = ref(null)
const drawLayers = ref([])
const tilsUrl = ref('./static/kMapTiles/{z}/{x}/{y}.jpg')

const initMap = () => {
  map.value = L.map('map', {
    center: [39.918758195008294, 116.3972282409668], // 地图中心--北京
    zoom: 16, //缩放比列
    // drawControl: true
    zoomControl: false, //禁用 + - 按钮
    // doubleClickZoom: true, // 禁用双击放大
    attributionControl: false // 移除右下角leaflet标识
    // preferCanvas: true
  })
  let name = L.tileLayer(
    'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
  ).addTo(map.value)

  drawLayerGroup.value = new L.FeatureGroup()
  map.value.addLayer(drawLayerGroup.value)

  var MyCustomMarker = L.Icon.extend({
    options: {
      shadowUrl: null,
      iconAnchor: new L.Point(12, 12),
      iconSize: new L.Point(24, 36),
      iconUrl: img
    }
  })

  var options = {
    position: 'topleft',
    draw: {
      polyline: {
        shapeOptions: {
          color: '#f357a1',
          weight: 5
        }
      },
      polygon: {
        allowIntersection: false, // Restricts shapes to simple polygons
        drawError: {
          color: '#e1e100', // Color the shape will turn when intersects
          message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
        },
        shapeOptions: {
          color: '#bada55'
        }
      },
      // circle: false, // Turns off this drawing tool
      rectangle: false,
      // rectangle: {
      //   shapeOptions: {
      //     clickable: false
      //   }
      // },
      marker: {
        icon: new MyCustomMarker()
      }
    },
    edit: {
      featureGroup: drawLayerGroup.value, //REQUIRED!!
      remove: true
    }
  }

  initDrawTooltip()
  var drawControl = new L.Control.Draw(options)
  map.value.addControl(drawControl)

  map.value.on(L.Draw.Event.CREATED, function (e) {
    let type = e.layerType,
      layer = e.layer

    console.log('created====>>>', e)

    if (type === 'marker') {
      layer.bindPopup('A popup!')
    }

    drawLayerGroup.value.addLayer(layer)
    // getDrawArr(e)
  })

  map.value.on(L.Draw.Event.EDITED, function (e) {
    let type = e.layerType,
      layer = e.layer

    console.log('editmove====>>>', e)
  })
}
const getDrawArr = (value) => {
  if (value) {
    let obj = {
      id: value._leaflet_id,
      name: value.layerType,
      lat: value.layer._latlng.lat,
      lng: value.layer._latlng.lng
    }
    drawLayers.value.push(obj)
  }
}
const initDrawTooltip = () => {
  L.drawLocal.draw.handlers.polygon = {
    tooltip: {
      start: '点击地图开始绘制多边形',
      cont: '继续选择',
      end: '点击第一个顶点完成绘制'
    }
  }
  L.drawLocal.draw.toolbar.buttons.polyline = '绘制-线'
  L.drawLocal.draw.toolbar.buttons.polygon = '绘制-多边形区域'
  L.drawLocal.draw.toolbar.buttons.circle = '绘制-圆形区域'
  L.drawLocal.draw.toolbar.buttons.marker = '绘制-定点标记'
  L.drawLocal.draw.toolbar.buttons.circlemarker = '绘制-定点圆形标记'
  L.drawLocal.edit.toolbar.actions.save.text = '保存'
  L.drawLocal.edit.toolbar.actions.save.title = '保存'
  L.drawLocal.edit.toolbar.actions.cancel.text = '取消'
  L.drawLocal.edit.toolbar.actions.cancel.title = '取消'
  L.drawLocal.edit.toolbar.actions.clearAll.text = '清除全部'
  L.drawLocal.edit.toolbar.actions.clearAll.title = '清除全部'
  L.drawLocal.edit.toolbar.buttons.editDisabled = '暂无区域可编辑'
  L.drawLocal.edit.toolbar.buttons.removeDisabled = '暂无区域可删除'
  L.drawLocal.edit.handlers.remove.tooltip.text = '选中一个区域去清除'
  L.drawLocal.edit.toolbar.buttons.edit = '编辑'
  L.drawLocal.edit.toolbar.buttons.remove = '删除'
  L.drawLocal.edit.toolbar.buttons.cancel = '取消'
  L.drawLocal.edit.toolbar.buttons.save = '保存'
  L.drawLocal.draw.toolbar.actions.text = '取消'
  L.drawLocal.draw.toolbar.actions.title = '取消绘制'
  L.drawLocal.draw.toolbar.finish.text = '完成'
  L.drawLocal.draw.toolbar.finish.title = '完成绘制'
  L.drawLocal.draw.toolbar.undo.text = '撤销'
  L.drawLocal.draw.toolbar.undo.title = '撤销'
  L.drawLocal.edit.handlers.edit.tooltip.subtext = '点击取消以撤消更改'
  L.drawLocal.edit.handlers.edit.tooltip.text = '拖动标记以编辑图形'
}
const getData = (map) => {
  var latlngs = [
    [40.912569, 111.840153],
    [39.094994, 106.742496],
    [33.503718, 103.05109]
  ]
  L.polyline(latlngs, { color: 'red' }).addTo(map)
}

onMounted(() => {
  initMap()
})
</script>
<style scoped lang="sass">
.mapCom
  display: flex
  height: 85vh

  .iconLabel
    width: 80px !important

  .iconSty
    &Class
      width: 50px
      height: 100px
      position: relative
      top: 40px

.mapMain
  width: 80vw
  height: 100%
.mapDetail
  padding: 5px 10px
  width: calc(20vw - 20px)
  height: calc(100% - 10px)
  background: #fff
  .title
    font-size: 16px
    font-weight: bold
  .detailMsg
    margin: 10px 0
    .detailMsgTop
      span
        font-size: 14px
        font-weight: bold
    .detailMsgBot
      span
        display: inline-block
        font-size: 14px
        font-weight: bold

#map
  width: 100%
  height: 100%
</style>