<template>
    <div @dragenter.prevent="onDragEnter" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="drop" id="map"
        :style="{ width: '70vw', height: '70vh' }"></div>
</template>

<script setup lang="ts" name="Role">
import "leaflet/dist/leaflet.css";
import { LatLngBoundsExpression, Layer, LayerGroup, Map } from 'leaflet';
import { monitorType } from '../type'
import * as L from 'leaflet'
import { filterTreeItem } from '@/utils/comm'
import bg from '/images/bind/bdt.png'
import { deviceIcons,stateIcons } from '@/assets/diviceIcon'
interface MarkerType extends Layer {
    markerId?: string | number
}
const props = defineProps({
    listData: {
        type: Array,
        default: []
    }
})
const url = ref<string>(bg)
const map = ref<Map>()
const markers = ref<LayerGroup>()
const mapMonitorList = ref<monitorType[]>([])

const createMarkers = (info: monitorType): MarkerType => {
    let { id, name, monitorType, deviceNum, deviceIp, devicePort, positionX, positionY } = info

    const x = parseFloat(positionX as string);
    const y = parseFloat(positionY as string);
    const marker: MarkerType = L.marker(
        [y, x], {
        icon: L.icon({
            iconUrl: deviceIcons[1],
            iconSize: [30, 30],
        }),
        draggable: true,//开启拖拽
    })
    marker.markerId = id
    marker.bindTooltip('dsadas', {
        permanent: false, // 永久显示提示
        direction: 'top',// 提示显示的方向
        offset: L.point(0, -10)
    });
    console.log(marker)
    return marker
}
//初始化画板
const loadMap = () => {
    const imageBounds: LatLngBoundsExpression = [[0, 0], [1000, 1980]];
    if (map.value) {

    } else {
        map.value = L.map('map', {
            crs: L.CRS.Simple,
            minZoom: -1,
            maxZoom: 16,
            center: [0, 1],
            zoom: -1,
            maxBounds: imageBounds,
            attributionControl: false,//默认情况下，是否将 attribution 版权控件添加到地图中。
            zoomControl: false,//默认情况下，是否将 zoom 缩放控件添加到地图中。
            doubleClickZoom: false,//禁用双击放大
        });
        L.imageOverlay(url.value, imageBounds,).addTo(map.value);
        map.value.setMaxBounds(imageBounds);
        markers.value = L.layerGroup()
        map.value.addLayer(markers.value);
        map.value.on('dblclick', () => {
            map.value?.setZoom(-1)
        })
    }
}
const drop = (event: DragEvent) => {
    //event.preventDefault()
    const mouseEventLatLng = map.value?.mouseEventToLatLng(event);
    if (mouseEventLatLng) {
        const { lat, lng } = mouseEventLatLng;
        //const dragEvent = event as DragEvent;
        let monitorData = JSON.parse(event.dataTransfer?.getData('monitorData') || '');
        //存在则修改位置
        if (monitorData.positionX) {

            //不存在则创建marker
        } else {
            markers.value?.addLayer(createMarkers({ ...monitorData, positionX: lng, positionY: lat }))
        }

    }
}

const onDragEnter = (event: MouseEvent) => {
    console.log('Drag enter', event);
};
const onDragOver = (event: MouseEvent) => {
    //console.log('Drag over');
    //event.dataTransfer.dropEffect = 'move';
};
const onDragLeave = (event: MouseEvent) => {
    console.log('Drag leave');
};
onMounted(() => {
    loadMap()
    mapMonitorList.value = filterTreeItem(props.listData, 'children', (i) => i.level == 2 && i.positionX)
    mapMonitorList.value.forEach((i: monitorType) => {
        markers.value?.addLayer(createMarkers(i))
    })

})

</script>

<style lang="less" scoped>
.leaflet-container{
    background-color: #fff;
}
</style>
