import React from "react";
import { Amap } from '../amap';
//气泡
const bubble = x => {
    var div = document.createElement('div');
    div.innerText = 1;
    div.style.textAlign = 'center';
    div.style.lineHeight = '20px';
    div.style.backgroundColor = 'rgba(235, 127, 251, 0.2)';
    div.style.width = '20px';
    div.style.border = 'solid 1px rgba(235, 127, 251, 1)';
    div.style.borderRadius = "50%";
    div.style.boxShadow = '0px 0px 16px 0px rgba(237,156,246,1) inset,0px 0px 3px 0px rgba(237,156,246,.4)';
    div.style.height = "20px";
    div.style.color = "rgba(252, 222, 253, 1)";
    return div;
}
const _renderClusterMarker = (context, count) => {
    var div = document.createElement('div');
    div.style.backgroundColor = 'rgba(235, 127, 251, 0.2)';
    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
    div.style.width = div.style.height = size + 'px';
    div.style.border = 'solid 1px rgba(235, 127, 251, 1)';
    div.style.borderRadius = size / 2 + 'px';
    div.style.boxShadow = '0px 0px 16px 0px rgba(237,156,246,1) inset,0px 0px 3px 0px rgba(237,156,246,.4)';
    div.innerHTML = context.count;
    div.style.lineHeight = size + 'px';
    div.style.color = "rgba(252, 222, 253, 1)";
    div.style.fontSize = '14px';
    div.style.textAlign = 'center';
    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
    context.marker.setContent(div);
};
let cluster = '';
//海量点标记
const MarkerClusterer = props => {
    const { __map__: map, config: {
        data: {
            list = [],
            updateList = function(){}
        }
    } } = props;
    if (!map) {
        console.log('组件必须作为 Map 的子组件使用');
        return;
    }

    updateList(add);

    function add(list){
        if (cluster) {
            cluster.setMap(null);
        }
        function mc() {
            const arr = list.map(x => {
                const lon = parseFloat(x.lon), lat = parseFloat(x.lat);
                if (lon && lat) {
                    const marker = new AMap.Marker({
                        position: [lon, lat]
                    });
                    marker.setContent(bubble(x));
                    marker.on("click", e => {
                    });
                    return marker;
                }
            }).filter(x => {
                if (x) return x;
            });
            cluster = new AMap.MarkerClusterer(map, arr, {
                gridSize: 80,
                renderClusterMarker(a) {
                    _renderClusterMarker(a, arr.length);
                }
            });
        }
        //添加聚合组件
        if (AMap.MarkerClusterer) {
            list.length && mc();
        } else {
            list.length && map.plugin(["AMap.MarkerClusterer"], mc);
        }
    }
    add(list);
    return list.length ? <Zg {...props} /> : "";
}
//全国地图边界
export const Zg = props => {
    const map = props.__map__;
    if (!map) {
        console.log('组件必须作为 Map 的子组件使用');
        return;
    }

    setTimeout(e => {
        if (!window.AMapUI) {
            return "";
        }
        window.AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
            //创建一个实例
            var districtExplorer = new DistrictExplorer({
                map
            });
            var adcode = 520000;
            districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
                //更新地图视野
                map.setBounds(areaNode.getBounds(), null, null, true);
                //清除已有的绘制内容
                districtExplorer.clearFeaturePolygons();
                //绘制子区域
                let markers = [];
                districtExplorer.renderSubFeatures(areaNode, function (feature, i) {
                    const { properties: { centroid, name } } = feature;
                    markers.push(new AMap.Marker({
                        position: centroid,
                        content: name
                    }));
                    return {
                        cursor: 'default',
                        bubble: true,
                        strokeColor: 'RGBA(14, 132, 217, 1)', //线颜色
                        strokeOpacity: 1, //线透明度
                        strokeWeight: 1, //线宽
                        fillColor: 'RGBA(12, 73, 125, 1)', //填充色
                        fillOpacity: 0.35, //填充透明度
                    };
                });
                map.add(markers);
                //绘制父区域
                districtExplorer.renderParentFeature(areaNode, {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: 'RGBA(14, 132, 217, 1)', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: null, //填充色
                    fillOpacity: 0.35, //填充透明度
                });
            });
        });
        setTimeout(()=>{
            map.setFitView(null,true,[-80,-80,-80,-80]);
        },Math.random(2000,3500,0));
    }, Math.random(800,3000,0));
    return "";
}

const SituationMap = props => {
    const { config: {
        data: {
            list = []
        }
    } } = props,
        activItem = (list[0] || {});
    //对类型数据进行不同样式赋值
    return (
        <Amap {...props} useAMapUI={e => { window.AMapUIProtocol = "https:" }}>
            <MarkerClusterer {...props}></MarkerClusterer>
        </Amap>
    )
}
export default SituationMap