<template>
    <div id="mapContainer"></div>
    
</template>

<script>
import { Loading } from 'element-ui';
    export default {
    name: "receiptResult",
    data() {
        return {
            loading : null
        };
    },
    created(){
        this.reloadData();
    },
    mounted() {
        
    },
    methods: {
        startLoading (){
            this.loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' });
        },
        reloadData() {
            let resultData = {
        orderNumber: this.$route.query.orderNumber,
      };
      this.startLoading();
        this.axios.post(
            "api/v1/getway/fullPathVisualization",resultData
            ).then((res) => {
        
        this.initMap(res.data);
            this.loading.close(); 
        }).catch(error => {
    
             this.$message('车辆未入网或没有开启定位，不能访问');
            
            this.loading.close(); 
            });;
        
            this.loading.close(); 
			    // $.ajax({
			    //     type: 'POST',
			    //     contentType: "application/json;charset=utf-8",
			    //     url: "http://localhost:8084/spring/toFullPathVisualization",
			    //     success: function success(data){
			    //         console.log(data);
			    //         this.initMap(data);
			    //     },
			    //     dataType: "json"
			    // });
		},
        initMap(data) {
			    var currentPointLat='31.08998096772078';
			    var currentPointLon='118.26959354386253';
			    //初始化地图
			    if (data.startAndEndRoutes[0].currentPoint!=null){
			        currentPointLat=data.startAndEndRoutes[0].currentPoint.lat;
			        currentPointLon=data.startAndEndRoutes[0].currentPoint.lon;
			    }
                
			    var map = new window.TMap.Map('mapContainer', {
			        center: new TMap.LatLng(currentPointLat,currentPointLon),//地图显示中心点
			        zoom:16	//缩放级别
			    });
			    var limeList= [];
			    var markList=[];
                data.startAndEndRoutes.forEach((element,index) => {
                    
                    var startPaths=[];
                    element.runRoute.forEach((element,index) => {
                         var path= new window.TMap.LatLng(element.lat,element.lon);
			            startPaths.push(path);
                    });
			       
			        var endPaths=[];
                    if(element.estimateRoute!=null){
                         element.estimateRoute.forEach((element,index) => {
                        var path= new window.TMap.LatLng(element.lat,element.lon)
			            endPaths.push(path);
                    });
                    }
                   
			       
			        if (element.startPoint!=null){
			            //起点
			            var startPoint= {
			                'id': 'start_'+index,
			                'styleId': 'start',
			                'position': new TMap.LatLng(element.startPoint.lat, element.startPoint.lon),
			            };
			            markList.push(startPoint);
			        }
			
			        //当前点
			        var currentPoint= {
			            'id': 'current_'+index,
			            'styleId': 'car',
			            'position': new window.TMap.LatLng(currentPointLat,currentPointLon),
			        };
			        markList.push(currentPoint);
			
			        //终点
			        if (element.endPoint!=null){
			            var endPoint= {
			                'id': 'end_'+index,
			                'styleId': 'end',
			                'position': new window.TMap.LatLng(element.endPoint.lat, element.endPoint.lon),
			            };
			            markList.push(endPoint);
			        }
			
			
			        //已行驶轨迹
                    if(startPaths.length>0){
                        console.log("startPaths",startPaths);
                            var startLine= {//第1条线
                            'id': 'pl1_'+index,//折线唯一标识，删除时使用
                            'styleId': 'style_green',//绑定样式名
                            'paths': startPaths,
                        };
                         limeList.push(startLine);
                    }
			        
			       if(endPaths.length>0){
                       console.log("endPaths",endPaths);
                        //预计轨迹
                        var endLine={//第2条线
                            'id': 'pl2_'+index,
                            'styleId': 'style_red',
                            'paths': endPaths,
                        };
                        limeList.push(endLine);
                   }
			        
                });
                console.log("data.startAndEndRoutes",data.startAndEndRoutes)
			    // $(data.startAndEndRoutes).each(function(index,element){
			       
			    // });
			    //创建 MultiPolyline
			    var polylineLayer = new window.TMap.MultiPolyline({
			        id: 'polyline-layer', //图层唯一标识
			        map: map,//绘制到目标地图
			        //折线样式定义
			        styles: {
			            'style_red': new TMap.PolylineStyle({
			                'color': '#FF0000', //线填充色
			                'width': 6, //折线宽度
			                'borderWidth': 5, //边线宽度
			                'borderColor': '#FFF', //边线颜色
			                'lineCap': 'butt' //线端头方式
			            }),
			            'style_green': new TMap.PolylineStyle({
			                'color': '#00FF00', //线填充色
			                'width': 6, //折线宽度
			                'borderWidth': 5, //边线宽度
			                'borderColor': '#CCC', //边线颜色
			                'lineCap': 'round' //线端头方式
			            })
			        },
			        //折线数据定义
			        geometries: limeList
			    });
			    //提示框
			    var infoWindow = new window.TMap.InfoWindow({
			        map: map,
			        enableCustom: true,
			        position: new TMap.LatLng(currentPointLat,currentPointLon),
			        offset: { y: -75, x: -5 },
			        content:
			            '<div class="info_card"><div class="title"><span class="title_name">'+this.$route.query.capacityNumber+'('+data.startAndEndRoutes[0].miled+')</span></div><div align="left" class="content" style="heigth:600px">'+data.startAndEndRoutes[0].currentPointName+'</div><span class="cancle bot"></span><span class="cancle top"></span></div>',
			    });
			    //绘制点
			    var marker = new window.TMap.MultiMarker({
			        id: 'marker-layer', // 图层id
			        map: map,
			        styles: {
			            'car': new window.TMap.MarkerStyle({
			                width: 40,
			                height: 40,
			                anchor: {
			                    x: 20,
			                    y: 20,
			                },
			                faceTo: 'map',
			                //rotate: 180,
                            src: require("@/assets/img/car1.png")
			                //src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
			            }),
			            start: new window.TMap.MarkerStyle({
			                width: 25,
			                height: 35,
			                anchor: { x: 16, y: 32 },
                            src: require("@/assets/img/start.png")
			                //src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
			            }),
			            end: new window.TMap.MarkerStyle({
			                width: 25,
			                height: 35,
			                anchor: { x: 16, y: 32 },
                            src: require("@/assets/img/end.png")
			                //src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
			            }),
			            // 点标注的相关样式
			            marker: new window.TMap.MarkerStyle({
			                width: 25,
			                height: 35,
			                anchor: { x: 16, y: 32 },
			                src:
			                    'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
			            }),
			        },
			        geometries: markList
			    });
			
			}
        }
    };
</script>
<style>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #mapContainer {
        width: 100%;
        height: 100%;
    }
</style>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    #mapContainer {
        width: 100vw;
        height: 100vh;
    }
    .info_card {
        display: inline-block;
        margin: 50px auto;
        position: absolute;
        width: 200px;
        height:150px;
        background-color: #c7c9c8AA;
        border: 5px solid #ffffff;
        color: #000000;
    }
    .info_card .title{
        width: 100%;
        height:40px;
        background-color: #000000AA;
        color: #ffffff;
    }

    .title span.title_name{
        position: relative;
        top: 7px;
        left: 10px;
        font-size: 18px;
    }


    .info_card .title .close_img{
        position: absolute;
        top:10px;
        right: 10px;
        width: 20px;
        height: 20px;
        background-color: #ffffff;
    }
    .info_card .title .close_img .min {
        width: 0;
        height: 0;
        font-size:0;
        overflow:hidden;
        position:absolute;
        border-width:10px;
    }

    .info_card .title .close_img .top_img {
        border-style:solid dashed dashed;
        border-color:#000000 transparent transparent transparent;
        top:-2px;
    }

    .info_card .title .close_img .right_img {
        border-style:solid dashed dashed;
        border-color:transparent #000000 transparent transparent;
        left:2px;
    }

    .info_card .title .close_img .bottom_img{
        border-style:solid dashed dashed;
        border-color:transparent transparent #000000 transparent;
        top:2px;
    }

    .info_card .title .close_img .left_img{
        border-style:solid dashed dashed;
        border-color:transparent transparent transparent #000000;
        left:-2px;
    }

    .info_card span.cancle{
        width:0;
        height:0;
        font-size:0;
        overflow:hidden;
        position:absolute;
    }

    .info_card span.bot{
        border-width:20px;
        border-style:solid dashed dashed;
        border-color:#ffffff transparent transparent;
        left:80px;
        bottom:-40px;
    }
    .info_card span.top{
        border-width:20px;
        border-style:solid dashed dashed;
        border-color:#c7c9c8AA transparent transparent;
        left:80px;
        bottom:-33px;
    }
    .info_card .content{
        margin-top: 10px;
        margin-left: 10px;
    }
</style>