<template>
    <div class="popup" ref="popup">
        <div class="popup-title"> <h1 class="popup-h1">{{title}}</h1> <a class="popup-closer" @click="close">✖</a></div>
         <div class="content" ref="content">
            <slot>气泡内容</slot>
        </div>
        <div id="nearbySearch">
            <input name="type" value="point" ref="nearbySearch" id="nearbySearch" @click="drawCircle();" type="radio">  
            <label for="nearbySearch">周边搜索</label>    
            <select id="radius" v-model="selectValue" style="width:100px" >  
                <option value="100">100</option>  
                <option value="200">200</option>  
                <option value="500">500</option>
                <option value="1000">1000</option>  
                <option value="2000">2000</option>  
                <option value="3000">3000</option>    
            </select>  
            <label for="pointToggle">米</label>
        </div>
    </div>
</template>
<script>
import {Select} from 'ol/interaction'
import Circle from 'ol/geom/Circle'
import Overlay from 'ol/Overlay'
import  Feature  from 'ol/Feature'
import { Point } from 'ol/geom'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import WFS from 'ol/format/WFS'
import { and, isNull, not, bbox, between, contains, during, equalTo, greaterThan, 
    greaterThanOrEqualTo, intersects, lessThan, lessThanOrEqualTo, like, or, within } from 'ol/format/filter'
import {equalTo as equalToFilter,like as likeFilter,and as andFilter,within as withinFilter} from 'ol/format/filter.js';
import {circular as circularPolygon, fromCircle as fromCirclePolygon} from 'ol/geom/Polygon.js';
import { Fill, Stroke, Style, Text, Icon, Circle as CircleStyle } from 'ol/style';
import WKT from 'ol/format/WKT'
var overlayToShowSelectedInfo;
export default{
    name:'add-window',
    render () { },
    data() {
       return {
         selectValue:'100',
         windowMap:{}
       } 
    },
    props:{
        position: {
            type: Object 
        },
        title: {
            type: String,
            default: '属性'
        }
    },
    watch: {
        position (val) {//父组件点击地图，将父组件的position传递给子组件，子组件监听父组件属性的变化
            this.pos = val;
        }
    },
    //mixins: [commonMixin('overlay')],
    methods:{
        drawCircle(map,radius,center){
            // if(this.$refs.nearbySearch.checked){
                //let distance = parseInt(this.selectValue);
                if(radius!=undefined && radius!=''){
                    // let lat = this.$refs.content.innerText.substring(this.$refs.content.innerText.indexOf("t")+1);
                    // let lon = this.$refs.content.innerText.substring(this.$refs.content.innerText.indexOf("n")+1).substring(0,this.$refs.content.innerText.substring(this.$refs.content.innerText.indexOf("n")+1).indexOf("l"));
                    // lat = parseFloat(lat.substr(lat.indexOf(":")+1));
                    // lon = parseFloat(lon.substr(lon.indexOf(":")+1));
                    // let lon = center[0];
                    // let lat = center[1];
                    let lon = center[0]
                    let lat = center[1]
                    let circle = new Circle([lon, lat],0.1)
                    let feature = new Feature({
                         position:[[lon,  lat]],
                         radius:radius,
                         type: 'circle',
                         id: 'N',
                         geometry:fromCirclePolygon(circle)
                    })
                    this.clearLayer("spatialQuery",map);
                    this.clearLayer('nearbySearch',map);
                    let vectorSource = new VectorSource({ 
                        features:[feature],
                        projection:'EPSG:4326'
                    });
                    let vectorLayer = new VectorLayer({
                        id:'nearbySearch',
                        source: vectorSource,
                        style: new Style({
                            stroke: new Stroke({
                                color: '#ff3100',
                                width: 1
                            }),
                            fill: new Fill({
                                color: 'rgba(0, 0, 255, 0.1)'
                            })
                         })
                    });
                    map.addLayer(vectorLayer);
                    let geometry = feature.getGeometry();//获取圆转为多边形后的范围
                    let wkt = new WKT
                    let wktgeometry = wkt.writeGeometry(geometry);
                    localStorage.setItem("radiusCircle",wktgeometry)
                    // var featureRequest = new WFS().writeGetFeature({
                    //     srsName: 'EPSG:4326',
                    //     featureNS: 'http://openstreemap.org',
                    //     featurePrefix: 'osm',
                    //     featureTypes: ['osm:pass'],
                    //     outputFormat: 'application/json',
                    //     filter:withinFilter("the_geom",geometry,"")
                    // });
                    // fetch('http://192.168.10.19:8080/geoserver/osm/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=osm:pass&maxFeatures=2000', {
                    //     method: 'POST',
                    //     body: new XMLSerializer().serializeToString(featureRequest)
                    // }).then(function(response) { 
                    //     return response.json();
                    // }).then(function(json) {
                    //     console.log(json);
                    // });
                }
            // }
        },
        // iQueryLine(e){
        //     debugger
        //     var coordinate = evt.coordinate;
        // },
        addClick(map){
            this.windowMap = map;
            this.selectTool = new Select({
                    multi:true,
                    hitTolerance:4
            });
            map.addInteraction(this.selectTool)
            var _this = this;
            // map.un("click", this.iQueryLine)
            this.selectTool.on("select",function(e){
                        this.pos = [];
                        if(e.selected.length!==0){
                            _this.clearLayer('nearbySearch',_this.windowMap);
                            let coordinate = e.mapBrowserEvent.coordinate;//监听地图变化
                            _this.lon = coordinate[0];
                            _this.lat = coordinate[1];
                            let properties = e.selected[0].getProperties();
                            _this.createSelectInfoPop(coordinate,properties,map)
                            //this.originInstance = overlay
                            let vectorSource = new VectorSource({});
                            //创建图标特性
                            let iconFeature = new Feature({
                                geometry: new Point([_this.lon, _this.lat])
                            });
                            //将图标特性添加进矢量中
                            vectorSource.addFeature(iconFeature);
                            //创建图标样式
                            let iconStyle = new Style({
                                image: new Icon({
                                    imgSize: [30, 30],  // 及图标大小
                                    src:' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAC4jAAAuIwF4pT92AAAF62lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNC0xNVQxMzo1ODoxMSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNC0xNVQxMzo1ODoxMSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDQtMTVUMTM6NTg6MTErMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZTgyNDlmNWYtY2ZjMy04NTQ5LTlmOTUtNzVlYWJiNDdlY2Y1IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ODVmMDE0YWItMGQwOC0wMTQwLTg0M2QtOWQzOGQxZWNhZjkzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ODA4NWUwY2UtZjlkZi02NzQ3LTk4NGMtM2ViZjlhY2U2MTRkIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MDg1ZTBjZS1mOWRmLTY3NDctOTg0Yy0zZWJmOWFjZTYxNGQiIHN0RXZ0OndoZW49IjIwMTktMDQtMTVUMTM6NTg6MTErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU4MjQ5ZjVmLWNmYzMtODU0OS05Zjk1LTc1ZWFiYjQ3ZWNmNSIgc3RFdnQ6d2hlbj0iMjAxOS0wNC0xNVQxMzo1ODoxMSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7I/R8mAAADdUlEQVRIicXXTYgcRRjG8d/bPV8bdNkYjFHBg9GbkIsRBHPwpCAiEkTPgUjQixcRFUSFIIJelPiVg5d4UtGweDNBEFSiETSoJKAHQdwkhnyYzWxvprs81GzcDLubnSWQF4aumap6/1VdTz01FSkl1yJay1XMPLxt9KfADbgXD2ArbsZxHMKX+AYncdlsNk1/vXrwSPTwBHYOwbEwksRtw0E8je+xF/vQXynhasDr8CJegIjI1JSIEMNnQkpp63AQd+JVnF8ruI2X8BwUEVJK+oNaVdcGqVFGoVeWuq1SEaHJmnl22Pd5zI0LDjwyTCJQN41T/b6z1UUXm0ZKFEGrCJPdjg0TE9pFqPMKP4PD+MjImkOxAngSu/JEQ52SmdkLTlyYU9U1Kf0STKeUfq7qxskLc2bOz5pvkiJiIccurF8q+UrgLbgv50hO9yun5yrBXBnxWkRsj7AjIh4rI14pmD1TzTvVrzSSIfse3D0ueBu6IVR17WxV5Q4Rr+NlHMU/OIbdEbEb/q0q83VtKME27h8XfNdCYX7QGDSNIkM+xvxI24v4tODIoG5Ug2Zx3ZZxwTflR1KnZkGtMzizTPuzxN+NLMJFeto4Lvh4foR2lAuC2Sy71VKxiXRHiVZRGHoM2cnGAv+wUOi0Cp2y1HCr7F4bRtqux46G29utUrcsF9d9u1TylfbxVziXUppsl6WpXs/c7Kw6pSfLiA14DydwI3bWKT0OU72ubqs0PHz6ODAu+FccSDwamOp1XGwGTvUrddNsj4iHIuKvlNItKZkoIqyf6JrqdQSG8jqIn8YF9/EOHkwpTRTBxnUTukXp7Py8alD3aja3InTK0lSvY7LbUQzNRlb+Hsv49ZW8+iA+xFNNyl49NdF1Xbejqmt1SsoI3bLQKgsSzf/muE8+KpeMlcRFfmN78Bs5aUrZm9e1267vdKxrt7WKUmoug/6Ot+X9vSawIfT9hS/p0gDSpU+T0ugpsNcyazsOOGEa362iLfyIzy1xIo0Lhj/k7TNqlaMxkN/O0SslXC0YPsMnV2izX/byK8Y44HOy0I4vU39qWH/6aoPJ/yL3W3r9vpDdblUxLhjelNd8cfyJN5YZ0FUDH8O7spCglrfPkXGSrAVMVvihYfkw3ho3wVrBs/KsZ/GBLLyxYrU3iaViWr7S7F9L57hWl7b/AIaIQ+rqJJWKAAAAAElFTkSuQmCC'
                                }),
                            });
                            _this.clearLayer("carLayer",map)
                            //创建矢量层
                            let vectorLayer = new VectorLayer({
                                id:'carLayer',
                                source: vectorSource,
                                style: iconStyle
                            });
                            // map.getView().setCenter([_this.lon, _this.lat]);
                            // map.getView().setZoom(15);
                            //添加进map层
                            map.addLayer(vectorLayer);
                        }
                        else{
                            _this.close();
                        }     
                //     }
                       
                // }
                 
            })    
    },
    clearLayer(layerId,map){
        //清除第一次添加的矢量图层
        this.map = map;
        if(this.map.getLayers().array_.length!=0){
            for(var i = 0;i<this.map.getLayers().array_.length;i++){
                if(this.map.getLayers().array_[i].type==="VECTOR"){
                    if(this.map.getLayers().array_[i].values_.id===layerId){
                        this.map.removeLayer(this.map.getLayers().array_[i]);
                     
                    }
                }
            }
        }
    },
    createSelectInfoPop(overyPosition,properties,map){
        if(overlayToShowSelectedInfo){
            overlayToShowSelectedInfo = null;
        }
        let overlayElement = this.$refs.popup;
        this.$refs.content.innerHTML= "<table>"+"<tr><td>lon:"+properties.geometry.extent_[0]
                                     +"</tr></td>"+"<tr><td>lat:"+properties.geometry.extent_[1]+"</table>"
        let overlayToShowSelectedInfo = new Overlay({
            element:overlayElement,
            position:"bottom-center",
            offset:[0,-10],
            position:overyPosition
        })
        map.addOverlay(overlayToShowSelectedInfo)
        overlayElement.style.display="block";

    },
    close() {
        this.$refs.popup.style.display="none";
    //   this.originInstance.setPosition(undefined)
    //   this.$emit('close')
    }
    
  }
}
 </script>
 <style scoped>
    .popup
     {
        position:absolute;
        background-color:#e0e0e057;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        border:1px solid #ACD6FF;
        bottom:12px;
        left:-50px;
        min-width:270px;
        height: 150px;
    }
    .popup:after, .popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
    .popup:after {
            border-top-color: #84C1FF;
            border-width: 10px;
            left: 45px;
            margin-left: -10px;
        }
    .popup:before {
            border-top-color: #84C1FF;
            border-width: 11px;
            left: 45px;
            margin-left: -11px;
        }
    .popup-title{
           width:100%;
           height: 30px;
           border-top-left-radius:10px;
           border-top-right-radius:10px;
           border-bottom:1px solid #ACD6FF;
           background-color:	#84C1FF;
         }
     .popup-h1 {
        font-size: 13px;
        display: inline-block;
        margin: 0;
        line-height: 20px;
        margin-left: 5px;
        }
    .popup-closer
        {
          text-decoration:none;
          float:right;
          margin-right: 6px;
          margin-top: 3px;
          color: #000!important;
        }
    .content
        {
          font-size:14px;
          font-family:"微软雅黑";
        }
</style>