<template>
    <div class="max-w max-h hidden" >
        <div class="max-w" style="height: calc(100% + 35px);" id="distribution_map"></div>
    </div>
    
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs } from "vue";
import xianjiegeojson from "/public/config/临沂市县界.json";
import { postMethodCommon, getMethodCommon } from "../../../api/common";
export default defineComponent({
    components: {
        
    },
    setup(props, context) { 
        const data = reactive({
            mapBox: '',    
        })
        onMounted(() => {           
            methods.mapInit()       
        });
        const methods = {
            mapInit() {
                mapboxgl.accessToken = 'pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ';
                var map = new mapboxgl.Map({
                    container: 'distribution_map',
                    style: {
                        glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                        "version": 8,
                        "sources": {},
                        "layers": []
                    },
                    zoom: 8,
                    center: [ 118.33206615680547, 35.280140501608024 ],
                });
                data.mapBox = map
                let bigCount = 0;
                let smallCount = 99999;
                let unit = (bigCount - smallCount) / 12;
                let colorSelect;
                colorSelect = ['interpolate', ['linear'], ['get', 'count'],
                    smallCount, '#43E1F8',
                    smallCount + unit * 2, '#49B0F9',
                    smallCount + unit * 3, '#3EABFA',
                    smallCount + unit * 4, '#27A2FB',
                    smallCount + unit * 5, '#34E6B1',
                    smallCount + unit * 6, '#1099FB',
                    smallCount + unit * 7, '#0695FB',
                    smallCount + unit * 8, '#058DEE',
                    smallCount + unit * 9, '#09C78E',
                    smallCount + unit * 10, '#047DD4',
                    smallCount + unit * 11, '#94D515',
                    smallCount + unit * 12, '#0568B0',
                ]
                map.on('load', function () {
                    methods.getListData()
                    // 镇界图层面
                    map.addSource("townshipSource", {
                        'type': 'geojson',
                        'data': xianjiegeojson
                    });

                    // map.addLayer({
                    //     'id': 'townshipLayer',
                    //     'type': 'fill',
                    //     'source': 'townshipSource',
                    //     'layout': {
                    //         "visibility": "none"
                    //     },
                    //     'paint': {
                    //         'fill-color': colorSelect,
                    //         'fill-opacity': 1,
                    //     }
                    // });
                    // 镇界图层线
                    map.addLayer({
                        'id': 'townshipLayerLine',
                        'type': 'line',
                        'source': 'townshipSource',
                        'layout': {},
                        'paint': {
                            'line-color': "#216EFA",
                            'line-width': 1,
                            // 'line-pattern':1
                        }
                    });
                    map.addSource("states", {
                        "type": "geojson",
                        "data": xianjiegeojson
                    });
                    map.addLayer({
                        "id": "state-fills",
                        "type": "fill",
                        "source": "states",
                        "layout": {},
                        "paint": {
                            "fill-color": "#62A8FF",
                            "fill-opacity": ["case",
                                ["boolean", ["feature-state", "hover"], false],
                                1,
                                0.6
                            ]
                        }
                    });
                    map.addLayer({
                        id: "china_symbol",
                        type: "symbol",
                        source: "states",
                        paint: {
                            "text-opacity": [
                            "case",
                            ["boolean", ["feature-state", "hover"], false],
                            1,
                            0.8,
                            ],
                        },
                        layout: {
                            "text-field": "{xzqmc}",
                            "text-font": ["Open Sans Semibold"],
                            "text-anchor": "center",
                            // "text-offset": [0, 0.6],
                            // "icon-image": "monument-15",
                            // "icon-anchor": "center",
                            // "icon-allow-overlap": true,
                            // "icon-keep-upright": false,
                            "symbol-placement": "point",
                        },
                    });

                    
                    let hoveredStateId = null;
                    let popup = new mapboxgl.Popup({
                        closeButton: false,
                        closeOnClick: false,

                    }); 
                    // map.on("mousemove", "townshipLayer", function (e) {
                    //     if (e.features.length > 0) {
                    //         if (hoveredStateId) {
                    //             map.setFeatureState({ source: 'townshipSource', id: hoveredStateId }, { hover: false });
                    //         }
                    //         hoveredStateId = e.features[0].id;
                    //         map.setFeatureState({ source: 'townshipSource', id: hoveredStateId }, { hover: true });
                    //     }
                    // });

                    // map.on("mouseleave", "townshipLayer", function () {
                    //     if (hoveredStateId) {
                    //         map.setFeatureState({ source: 'townshipSource', id: hoveredStateId }, { hover: false });
                    //     }
                    //     hoveredStateId = null;
                    // });
                    // map.on("mousemove", "state-fills", function (e) {
                    //     map.getCanvas().style.cursor = 'pointer';
                    //     // var str = "乡镇名称：" + e.features[0].properties.xzqmc + "<br> &nbsp;<br>案件数量：" + 1;
                    //     // popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(map);

                    //     // if (e.features.length > 0) {
                    //     //     if (hoveredStateId) {
                    //     //         map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
                    //     //     }
                    //     //     hoveredStateId = e.features[0].id;
                    //     //     map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: true });
                    //     // }
                    // });

                    // // When the mouse leaves the state-fill layer, update the feature state of the
                    // // previously hovered feature.
                    // map.on("mouseleave", "state-fills", function () {
                    //     if (hoveredStateId) {
                    //         map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
                    //     }
                    //     hoveredStateId = null;
                    //     popup.remove();
                    // });
                })
            },
            getListData(){
                let param = {
                    id: "03e356f2-dca5-4b62-884b-c42f69c7c881",
                    mid: "9c027ef9-cc04-4006-831d-e799982f6435",
                    paginationInputDto: {
                        page: 1,
                        rows: 1000
                    }
                }
                
                postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                    let rel = res.data.result.items
                    console.log('000000000')
                    let popup = new mapboxgl.Popup({
                        closeButton: false,
                        closeOnClick: false,

                    });
                    if(rel){
                        rel.forEach(item =>{
                            let el = document.createElement('div');
                            el.setAttribute("data-caseId", item.name);
                            let uavimgCon = document.createElement("div");
                            if(item.type=="数字乡村公司"){  
                                uavimgCon.className = "background1";
                            }else if(item.type=="订单服务"){  
                                uavimgCon.className = "background2";
                            }else if(item.type=="东蒙全流程服务"){  
                                uavimgCon.className = "background3";
                            }
                            uavimgCon.appendChild(el);
                            el.className = "uavmarker";
                            el.onclick = function(){
                                let str = "单位：" + item.name + "<br><br>地址：" + item.address + "<br><br>需求：" + item.type;
                                popup.setLngLat([item.lng, item.lat]).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(data.mapBox);
                            
                            }              
                            let coordinate = [item.lng, item.lat];
                        
                            let UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
                            UAVmarker.addTo(data.mapBox)
                        })
                
                    }
                })
            }
        };
        return {
            ...data,
            ...methods,
        };
    },
});
</script>
<style>
.uavmarker{
    width: 10px;
    height: 10px;
    border-radius: 10px;
}
.background1{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #F805F1;
}

.background2{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #fd6040;
}

.background3{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #F5CE06;
}
</style>