<template>
    <!-- <div class="popupInfo">
        <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> -->
    <div class="radar" style="display:none"></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'
import {clearSpatial,addVector,clearOverLay} from '../base/poiQuery'
import { transform } from 'ol/proj'
import axios from 'axios'
import qs from 'qs'
import bus from '../eventBus.js'
export default{
    name:'carTestInfo',
    render () { },
    data() {
       return {
         selectValue:'100',
         windowMap:{},
         overlayToShowSelectedInfo:null,
       } 
    },
    props:{
        position: {
            type: Object 
        },
        poiMap:{
            type:Object
        }
    },
    mounted() {
        //    window.addEventListener('message', (ev)=> {
        //         let data = JSON.parse(ev.data);//传入html字符串
        //         if(data.type=='SZPro'){
        //             this.frontInfoWindow(data.layerId,data.title,data.position,data.html)
        //         }
        //     }, false);
    },
    watch: {
        position (val) {//父组件点击地图，将父组件的position传递给子组件，子组件监听父组件属性的变化
            this.pos = val
        }
    },
    //mixins: [commonMixin('overlay')],
    methods:{
        Trim(str,is_global)
        {
            var result;
            result = str.replace(/(^\s+)|(\s+$)/g,"");
            if(is_global.toLowerCase()=="g")
            {
                result = result.replace(/\s/g,"");
                }
            return result;
        },
        radarChart(id,map, pos, dom,offset) {
            dom.style.display = "block"
            this.overlayToShowSelectedInfo = new Overlay({
                id:id,
                element: dom,
                position: "bottom-center",
                offset: offset,
                position: pos
            })
            map.addOverlay(this.overlayToShowSelectedInfo)
        },
        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层
                            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){
        document.getElementsByClassName("radar")[0].style.display="block"
        this.overlayToShowSelectedInfo = new Overlay({
            element: document.getElementsByClassName("radar")[0],
            position:"bottom-center",
            offset:[0,-10],
            position:overyPosition
        })
        map.addOverlay(this.overlayToShowSelectedInfo)
        overlayElement.style.display="block"

    },
    /**构建前端DOM元素**/
    frontInfoWindow(layerId,title,position,html){
        let popupInfoDiv = document.createElement('div');
        popupInfoDiv.className = 'popupInfo';//创建父节点
        let titleDiv = document.createElement('div');
        titleDiv.className = 'popup-title';//创建第一个子节点
        popupInfoDiv.appendChild(titleDiv);//将第一个子节点赋予父节点
        let contentDiv = document.createElement('div');
        contentDiv.className = 'content';//创建第一个子节点
        popupInfoDiv.appendChild(contentDiv);//将第二个子节点赋予父节点
        let h1Div = document.createElement('h1');
        h1Div.className = 'popup-h1';
        h1Div.innerText=title;//添加title
        titleDiv.appendChild(h1Div);
        let aDiv = document.createElement('a');
        aDiv.className = 'popup-closer';
        titleDiv.appendChild(aDiv);
        aDiv.innerText="✖";//添加title
        var _this = this;
        aDiv.onclick =  function(e){//给每一个X注册事件
            //此处举例删除一个
           _this.clearOverLay(layerId, _this.poiMap)
        }
        // let html = "<table style='display:block'>"+"<tr><td>设备编号:</td><td>"+posArr[i].attributes.SBBH+"</td></tr>"+"<tr><td>设备名称:</td><td>456</td></tr>"+"</table>"//替换气泡的内容区域
        contentDiv.innerHTML =html//替换气泡的内容区域
        this.createSelectInfoPopInfo(layerId,position,_this.poiMap,popupInfoDiv)
    },
    /**弹出气泡元素**/
    createSelectInfoPopInfo(id,overyPosition,map,html){//***显示气泡***/
        if(this.overlayToShowSelectedInfo){
            this.overlayToShowSelectedInfo = null
        }
        this.clearOverLay(id,map)
        // let overlayElement = document.getElementsByClassName("popupInfo")[0]
        // this.$refs.content.innerHTML =html//替换气泡的内容区域
        this.overlayToShowSelectedInfo = new Overlay({
            id:id,
            element:html,
            position:"bottom-center",
            offset:[0,-10],
            position:overyPosition
        })
        map.addOverlay(this.overlayToShowSelectedInfo)
        html.style.display="block"//将html经过overlay封装之后显示到特定的位置
    },
    // createSelectInfoPopCircle(id,overyPosition,map,html,title){
    //     this.title = title;
    //     if(this.overlayToShowSelectedInfo){
    //         this.overlayToShowSelectedInfo = null
    //     }
    //     let overlayElement = document.getElementsByClassName("popupInfo")[0]
    //     this.$refs.content.innerHTML =html//替换气泡的内容区域
    //     this.overlayToShowSelectedInfo = new Overlay({
    //         id:id,
    //         element:overlayElement,
    //         position:"bottom-center",
    //         offset:[0,-10],
    //         position:overyPosition
    //     })
    //     map.addOverlay(this.overlayToShowSelectedInfo)
    //     overlayElement.style.display="block"//将html经过overlay封装之后显示到特定的位置
    // },
    close(obj) {
        console.log("11111")
        console.log(obj);
        this.clearOverLay('shizong', this.map)
    }
  }
}
</script>
 <style scoped>
    .popupInfo
     {
        position:absolute;
        background-color :rgba(255, 255, 255, .87);;
        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:100px;
        height: 150px;
    }
    .popupInfo:after, .popupInfo:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
    .popupInfo:after {
            border-top-color: #84C1FF;
            border-width: 10px;
            left: 45px;
            margin-left: -10px;
        }
    .popupInfo: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:"微软雅黑"
        }
        * {
  box-sizing: border-box;
    }

html {
  height: 100%;
  background-color: #111;
  font-size: 10px;
}

body {
  background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
  background-size: 7rem 7rem;
  background-position: -5.2rem -5.2rem;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
}
</style>