<template>
    <!-- <div>
         
        <div class="noData" v-show="lineList.length==0">
            {{$t('system.content_noData')}}
        </div>
    </div> -->
    <div style="width:100%;height:90%;border:1px solid gray" id="container"></div>
</template>


<script>
import BMap from 'BMap'
export default {
    data(){
        return {
            time:'',
            lineList:[],
            Point:[],
            PositionList:[],
        }
    },
    methods:{
        getlineList(){   // 获取数据    
            this.apipost('app_get_visit_line',{visitDate:this.time},res=>{
                if(res.data.resultCode==1){
                    this.lineList = res.data.data;
                    if(this.lineList){
                        this.Point = this.lineList.visitPoint
                        this.Point.forEach(x=>{
                            x.xy = x.point.split(',')
                        })
                		this.creatMap()
                    }else{
                        let div = document.createElement("div")
                            div.style.width='100%';
                            div.style.height='90%';
                            div.style.border='none';
                            div.style.overflow='hidden';
                            div.style.position='relative';
                            div.style.zIndex='0';
                            div.style.backgroundColor='rgb(243, 241, 236)';
                            div.style.color='rgb(0, 0, 0)';
                            div.style.textAlign='center';
                        let parent = document.getElementsByClassName('flexParent');

                        var map = new BMap.Map("container");    // 创建Map实例
                        map.centerAndZoom(new BMap.Point(104.073652,30.664369), 11);  // 初始化地图,设置中心点坐标和地图级别
                        //添加地图类型控件
                        map.addControl(new BMap.MapTypeControl({
                            mapTypes:[
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                            ]}));	  
                        map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的
                        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                        this.displatDOM()
                    }
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        creatMap(){
            var _this = this;            
            var map = new BMap.Map('container');
            // 复杂的自定义覆盖物
            function ComplexCustomOverlay(point,name,head,timeS){
                this._point = point;
                this._name = name;
                this._head = head;
                this._time = timeS;
            }
            ComplexCustomOverlay.prototype = new BMap.Overlay();
            ComplexCustomOverlay.prototype.initialize = function(map){
                this._map = map;
                var div = this._div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                    div.style.backgroundColor = "";
                    // div.style.border = "1px solid #BC3B3A";
                    div.style.color = "#333333";
                    div.style.height = "auto";
                    div.style.padding = "5px";
                    div.style.lineHeight = "18px";
                    div.style.whiteSpace = "nowrap";
                    div.style.MozUserSelect = "none";
                    div.style.fontFamily = "PingFangSC-fine"
                    div.style.color="#FF6666"
                    div.style.fontWeight="bold"
                    div.style.fontSize = "12px"
                var name = this._Pname = document.createElement("p");
                    name.style.textAlign = "center";
                    div.appendChild(name);
                    name.appendChild(document.createTextNode(this._name));

                var time = this._Ptime = document.createElement("p");
                    time.style.textAlign = "center";
                    div.appendChild(time);
                    time.appendChild(document.createTextNode(this._time));  
                var headDiv =  this.headDiv = document.createElement("img"); 
                    headDiv.style.backgroundColor = "#ffffff";
                    headDiv.style.border = "5px solid #FF6666";
                    headDiv.style.color = "white";
                    headDiv.style.height = "50px";
                    headDiv.style.width = "50px";
                    headDiv.style.borderRadius = "50%";
                    headDiv.style.padding = "5px";
                    headDiv.style.lineHeight = "18px";
                    headDiv.style.whiteSpace = "nowrap";
                    headDiv.style.MozUserSelect = "none";
                    headDiv.style.fontSize = "12px";
                    headDiv.src = this._head
                    div.appendChild(headDiv);
                var sanjiao = document.createElement("div");
                    sanjiao.style.width= '0';
                    sanjiao.style.height= '0';
                    sanjiao.style.borderLeft= '3px solid transparent';
                    sanjiao.style.borderRight= '3px solid transparent';
                    sanjiao.style.borderTop= '16px solid #ff6666';
                    sanjiao.style.margin="0 auto";
                    sanjiao.style.position="relative"
                    sanjiao.style.top="-5px"
                    div.appendChild(sanjiao);
                var that = this;
                var arrow = this._arrow = document.createElement("div");
                    arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/mrep/fwmap/static/house/images/label.png) no-repeat";
                    arrow.style.position = "absolute";
                    arrow.style.width = "11px";
                    arrow.style.height = "10px";
                    arrow.style.top = "22px";
                    arrow.style.left = "10px";
                    arrow.style.overflow = "hidden";
                    div.appendChild(arrow);
                
                var raduis = document.createElement("p");
                    raduis.style.width = "14px";
                    raduis.style.height = "6px";
                    raduis.style.borderRadius = "5px";
                    raduis.style.backgroundColor = "#B21C1C";
                    raduis.style.margin = "0 auto 0 auto"
                    div.appendChild(raduis);
                    map.getPanes().labelPane.appendChild(div);
                return div;
            }
            ComplexCustomOverlay.prototype.draw = function(){
                var map = this._map;
                var pixel = map.pointToOverlayPixel(this._point);
                this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 20+"px";
                this._div.style.top  = pixel.y - 150 + "px";
            }
            function addMarker(point){
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
            }
        	map.centerAndZoom(new BMap.Point(this.Point[0].xy[0],this.Point[0].xy[1], 32.955),8);
            // map.centerAndZoom(new BMap.Point(120.129721,30.314429, 32.955),6);
            map.enableScrollWheelZoom();
            let PositionList = [];
            this.Point.forEach((x,index)=>{   // 循环数据添加坐标点
                if(true){
                    let src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3198678185,878755003&fm=27&gp=0.jpg"
                    let name = "无名大侠"
                    let time = "火星时间"
                    if(x.phtoto){
                        src = x.phtoto
                    }
                    if(x.name){
                        name = x.name
                    }
                    if(x.visitTime){
                        time = x.visitTime
                    }
                    PositionList.push(new BMap.Point(x.xy[1],x.xy[0]))
                    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(x.xy[1],x.xy[0]),name,src,time);
                    map.addOverlay(myCompOverlay);
                }
            })
            let leng = PositionList.length
            if(leng){  // 判断数据长度 来划路径图
                if(leng==1){
                    addMarker(PositionList);
                }else if(leng==2){
                    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                        driving.search(PositionList[0], PositionList[PositionList.length-1]);
                }else if(leng>2){
                    let newPositionList = JSON.parse(JSON.stringify(PositionList))  // 删除第一个 和最后一个 获取到中间数据 用来画途径坐标
                        newPositionList.pop()
                        newPositionList.shift()
                        let newDate = []
                        newPositionList.forEach(x=>{
                            newDate.push(new BMap.Point(x.lng,x.lat))
                        })
                    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                        driving.search(PositionList[0], PositionList[PositionList.length-1],{waypoints:newDate});
                }
                this.displatDOM()
            }
        },
        displatDOM(){
            let map = document.getElementById('container')
                map.style.border = "none"
        },
    },
    mounted(){
        this.time = this.$route.query.time
        this.getlineList()
    },
}
</script>
<style scoped>

</style>