<template>
  <div id='container' :style='mapStyle'>
    <div style="width: 500px; height: 180px" id="infoDiv"></div>
  </div>
</template>

<script>
import { tencentMap } from '../libs/tencent-map';
export default {
    name: 'map-control',
    props: {
        value: {
            default: function() {
                return {};
            }
        }, 
        height: {
            type: String,
            default: '300px'
        },
        width:{
            type:String,
            default:'100%'
        },
        longitude: {
            default: 116.397128
        },
        latitude: {
            default: 39.916527
        },
        markers: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    computed: {
        mapStyle() {
            let style = {};
            style.height = this.height + 'px';
            return style;
        }
    },
    data() {
        return {
            actual_markers: []
        };
    },
    watch: {
        markers: function(newVal, oldVal) {
            if (!this.map) {
                return;
            }
            var overlay;
            while ((overlay = this.actual_markers.pop())) {
                overlay.setMap(null);
            }
            var infoWin;
            var latlngBounds = new window.qq.maps.LatLngBounds();
            newVal.forEach(function(marker) {
                var overlay;
                switch (marker.type) {
                    case 'circle': {
                        overlay = new window.qq.maps.Circle({
                            map: this.map,
                            radius: marker.radius || 1000,
                            fillColor: marker.color
                ? window.qq.maps.Color.fromHex(marker.color)
                : new window.qq.maps.Color(100, 100, 100, 0.3),
                            strokeWeight: 0,
                            center: new window.qq.maps.LatLng(
                marker.latitude || marker.lat,
                marker.longitude || marker.lng
              )
                        });
          
                        break;
                    }
                    case 'polygon': {
                        overlay = new window.qq.maps.Polygon({
                            map: this.map,
                            radius: marker.radius || 1000,
                            fillColor: marker.color
                ? window.qq.maps.Color.fromHex(marker.color)
                : new window.qq.maps.Color(100, 100, 100, 0.3),
                            strokeWeight: 0,
                            center: new window.qq.maps.LatLng(
                marker.latitude || marker.lat,
                marker.longitude || marker.lng
              )
                        });
                        break;
                    }
                    default: {
                        overlay = new window.qq.maps.Marker({
                            map: this.map,
                            position: new window.qq.maps.LatLng(
                marker.latitude || marker.lat,
                marker.longitude || marker.lng
              )
                        });
                    }
                }
                this.actual_markers.push(overlay);
                window.qq.maps.event.addListener(
          overlay,
          'click',
          function(event) {
              this.$emit('marker-click', marker);
          }.bind(this)
        );
                window.qq.maps.event.addListener(
          overlay,
          'rightclick',
          function(event) {
              if (infoWin) {
                  infoWin.setMap(null);
              }
          }.bind(this)
        );
                latlngBounds.extend(
          new window.qq.maps.LatLng(
            marker.latitude || marker.lat,
            marker.longitude || marker.lng
          )
        );
            }, this);
            this.window.qq.maps.Map(document.getElementById('container'), {
                zoom: 10
            });
            if (this.markers.length) {
                this.map.fitBounds(latlngBounds);
            }
        }
    },
    methods: {
        updateMakers(fit) {
            if (!this.map) {
                return;
            }

            var overlay;
            while ((overlay = this.actual_markers.pop())) {
                overlay.setMap(null);
            }
            var infoWin;
            var latlngBounds = new window.qq.maps.LatLngBounds();
            this.markers.forEach(function(marker) {
                var overlay;
                switch (marker.type) {
                    case 'circle': {
                        overlay = new window.qq.maps.Circle({
                            map: this.map,
                            radius: marker.radius || 1000,
                            fillColor: marker.color
                ? window.qq.maps.Color.fromHex(marker.color)
                : new window.qq.maps.Color(100, 100, 100, 0.3),
                            strokeWeight: 0,
                            center: new window.qq.maps.LatLng(
                marker.latitude || marker.lat,
                marker.longitude || marker.lng
              )
                        });
                        break;
                    }
                    case 'polygon': {
                        overlay = new window.qq.maps.Polygon({
                            map: this.map,
                            radius: marker.radius || 1000,
                            fillColor: marker.color
                ? window.qq.maps.Color.fromHex(marker.color)
                : new window.qq.maps.Color(100, 100, 100, 0.3),
                            strokeWeight: 0,
                            center: new window.qq.maps.LatLng(
                marker.latitude || marker.lat,
                marker.longitude || marker.lng
              )
                        });
                        break;
                    }
                    default: {
                        overlay = new window.qq.maps.Marker({
                            map: this.map,
                            position: new window.qq.maps.LatLng(
                marker.latitude || marker.lat,
                marker.longitude || marker.lng
              )
                        });
                    }
                }
                this.actual_markers.push(overlay);
                window.qq.maps.event.addListener(
          overlay,
          'click',
          function(event) {
              this.$emit('marker-click', marker);
          }.bind(this)
        );
                window.qq.maps.event.addListener(
          overlay,
          'rightclick',
          function(event) {
              if (infoWin) {
                  infoWin.setMap(null);
              }
          }.bind(this)
        );
                latlngBounds.extend(
          new window.qq.maps.LatLng(
            marker.latitude || marker.lat,
            marker.longitude || marker.lng
          )
        );
            }, this);

            if (fit && this.markers.length) {
                this.map.fitBounds(latlngBounds);
            }
        },
        searchAndMoveToLocation(location) {
            var self = this;
            var latlngBounds = new window.qq.maps.LatLngBounds();
            new window.qq.maps.SearchService({
        //设置搜索范围为北京
                location: location,
        //设置搜索页码为1
                pageIndex: 1,
        //设置每页的结果数为5
                pageCapacity: 5,
        //设置展现查询结构到infoDIV上
        //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
                autoExtend: true,
        //检索成功的回调函数
                complete: function(results) {
                    var pois = results.detail.pois;
                    for (var i = 0; i < pois.length; i++) {
                        var poi = pois[i];
                        latlngBounds.extend(poi.latLng);
                    }
                    self.map.fitBounds(latlngBounds);
                },
            }).search('广场');
        }
    },
    mounted() {
        var self = this;
        tencentMap('O45BZ-TOI3Q-JK55J-GS3OE-LDPH6-ECBBN');

        window.initMap = function() {
            var center = new window.qq.maps.LatLng(self.latitude, self.longitude);
            self.map = new window.qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 10
            });
            window.qq.maps.event.addListener(self.map, 'click', function(event) {
                self.$emit('click', {
                    longitude: event.latLng.getLng(),
                    latitude: event.latLng.getLat()
                });
            });
            window.qq.maps.event.addListener(self.map, 'dblclick', function(event) {
                self.$emit('dbclick', {
                    longitude: event.latLng.getLng(),
                    latitude: event.latLng.getLat()
                });
            });
            self.updateMakers(true);
        };
    }
};
</script>