<template>
  <div ref="baiduMap"></div>
</template>

<script>
export default {
  name: 'BaiduMap',
  props:{
    onShowGridInfo:{
        type: Function
    }
  },
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    
    // 初始化地图 
    this.map = new BMapGL.Map(this.$refs.baiduMap); 
    const localCity = new BMapGL.LocalCity();
    localCity.get(result =>{
        this.map.centerAndZoom(result.center, 12);
        this.map.setCenter(result.name);
        this.map.enableScrollWheelZoom(true);
        this.$emit('map-loaded', result)
    })
     
  },
  methods: {
    // 加载多边形的方法
    async loadAreaPolygon(regionMapVO) {
        console.log(regionMapVO)
        this.map.clearOverlays();
        var allPoints = []
        var regionPoints = []
        regionMapVO['polygonList'].forEach(polygon => {
            polygon.forEach(points => {
                var areaPoints = []
                points.forEach(point => {
                    var point = new BMapGL.Point(parseFloat(point['x']), parseFloat(point['y']));
                    areaPoints.push(point);
                    allPoints.push(point)
                })
                regionPoints.push(areaPoints)
            });
            
        })
        var polygon = new BMapGL.Polygon(regionPoints, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
            polygon.addEventListener("mouseout", function () {
                polygon.setStrokeWeight(3);
                polygon.setFillOpacity(0);
            });
            polygon.addEventListener("mouseover", function () {
                polygon.setStrokeWeight(5);
                polygon.setFillOpacity(0.8);
            });
            this.map.addOverlay(polygon);
        this.map.setViewport(allPoints);
    },
    async loadAreaPolygonList(regionMapVOList){
        this.map.clearOverlays();
        var allPoints = []
        var regionPoints = []
        regionMapVOList.forEach(polygonList => {
            polygonList.forEach(polygon => {
                polygon.forEach(points => {
                    var areaPoints = []
                    points.forEach(point => {
                        var point = new BMapGL.Point(parseFloat(point['x']), parseFloat(point['y']));
                        areaPoints.push(point);
                        allPoints.push(point)
                    })
                    regionPoints.push(areaPoints)
                });
                
            })
        });
        var geom = new BMapGL.Polygon(regionPoints, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
                geom.addEventListener("mouseout", function () {
                    geom.setStrokeWeight(3);
                    geom.setFillOpacity(0);
                });
                geom.addEventListener("mouseover", function () {
                    geom.setStrokeWeight(5);
                    geom.setFillOpacity(0.8);
                });
                this.map.addOverlay(geom);
        this.map.setViewport(allPoints);
    },
    async loadGridPolygonList(gridRegionVOList){
        this.map.clearOverlays();
        var allPoints = []
        gridRegionVOList.forEach(gridRegionVO => {
            var regionPoints = []
            gridRegionVO['polygonList'].forEach(polygon => {
                polygon.forEach(points => {
                    var areaPoints = []
                    points.forEach(point => {
                        var point = new BMapGL.Point(parseFloat(point['x']), parseFloat(point['y']));
                        areaPoints.push(point);
                        allPoints.push(point)
                    })
                    regionPoints.push(areaPoints)
                });

            })
            var geom = new BMapGL.Polygon(regionPoints, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
            geom.addEventListener("mouseout", function () {
                geom.setStrokeColor("blue");
                geom.setStrokeWeight(3);
                geom.setFillOpacity(0);
            });
            geom.addEventListener("mouseover", function () {
                geom.setStrokeColor("red");
                geom.setStrokeWeight(5);
                geom.setFillOpacity(0.8);
            });
            geom.addEventListener("click", function () {
                // window.parent['mapProps']('SHOW_DETAIL:' + gridRegionVO['gridId']);
                this.onShowGridInfo(gridRegionVO['gridId'])
            });
            this.map.addOverlay(geom);

        });

        this.map.setViewport(allPoints);
    },
    loadAnchor(x, y){
        this.map.clearOverlays();
        var point = new BMapGL.Point(x, y);
        var marker = new BMapGL.Marker(point);
        this.map.centerAndZoom(point, 18);
        this.map.addOverlay(marker);
    },

    // 清除所有多边形
    clearPolygons() {
    //   this.polygons.forEach(polygon => {
    //     polygon.setMap(null)
    //   })
    //   this.polygons = []
        this.map.clearOverlays();

    }
  }
}
</script>
