var me = new Vue({
    el: '#mapVue',
    data: {
        map: null,//map
        getdata: null,
        marker: null,
        layuiLayer: null,
        nowIndex: null,
		
		LXdhStart: null,
		LXdhEnd: null,
		LxdhLine: null,

        activeName: 'first',

        move: null,//存放移动实例
		
		//存放实时坐标
		lat: "",
		lng: "",
		

        seedata: '',

        nowPosition: '',

        shipingPopupShow: false,
        shipingM3u8Url: '',
        resultFeedbackPopupShow: false,
        popupDisplay: "none",
    },
    methods: {
        getDataList() {
            var that = this;
            // var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
            // axios.get(url).then((res) => {
            //     that.getdata = res.data.data;
                // console.log(that.getdata)
                that.beginCome();
            // })
        },
        beginCome() {
            var data = [{
                "id": '100000',
                "place": '无数据',
                "state": '0',
                "dtype": '0',
                "size": '300',
                "jd": "115.822311",
                "wd": "28.646341"
            }]
            this.getdata = this.getQueryVariable('data') || data;//url解码
            console.log(this.getdata)
            // this.getdata = [{
            //     jd: 115.91042800000002,
            //     wd: 28.68094757898212,
            //     state: 0,
            //     dtype: 0,
            //     size: 300,
            //     title: '第一个'
            // }];//url解码
            this.map = this.beginMap(this.map, this.getdata);//创建并接受map
            this.move = new myDomMove('#seedata', '.title', '#map');
            // var dy = document.documentElement.clientHeight - 50;
            // $('#seedata').animate({ top: dy + "px" }, 10);
            // $('#map').css("height", (index, value) => {//改变地图高度
            //     return '100%';
            // // })
            this.map.invalidateSize(true);//应用地图高度
            this.move.followFinger(this.map, 'down');
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); }//解码url 和 JSON
            }
            return (false);
        },
        beginMap(map, data) {
            var that = this,
                center = [data[0].wd, data[0].jd],
                url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            // console.log(center)
            this.nowPosition = center;
            axios.post(url).then((res) => {
                // console.log(res)
                if (res.data.data.length != 0) {
                    var dat = res.data.data[0];
                    for (var key in dat) {
                        if (dat[key] == null || dat[key] == '') {
                            dat[key] = '暂无'
                        }
                    }
                    this.seedata = dat;

                } else {
                    this.seedata = data[0];
                }
                // console.log(this.seedata, 1524545453)
            })


            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: center,
                    zoom: 12,
                    minZoom: 2,
                    maxZoom: 17,
                    attributionControl: false, //去掉右下角
                    zoomControl: false, //去掉缩放
                });
                L.tileLayer( //添加切片图层
                    // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
                    "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {//顺丰地图
                    // "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {

                    // subdomains: ["1", "2", "3", "4"],
                    // attribution: "高德"
                }
                ).addTo(map);
            }
            createMap();
            var markers = L.markerClusterGroup();

            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [30, 30], // 图标尺寸
                    // iconAnchor: [30, 30], // 图标偏移量
                    // popupAnchor: [-20, -20] // 弹出框偏移量
                }
            });
            var carIcon = new transportIcon({ //引入图标
                iconUrl: './img/gray.png'
            }),
                planeIcon = new transportIcon({
                    iconUrl: './img/green.png'
                }),
                busIcon = new transportIcon({
                    iconUrl: './img/red.png'
                });
            // console.log(data, 43545343)
            var setData = (a) => {//定义图标
                marker = L.marker([a.wd, a.jd], {
                    icon: planeIcon, 
                    // icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
                    // title: title,
                    myData: {//自定义数据
                        ...a
                    }
                });
            }
            for (var i = 0; i < data.length; i++) {
                var a = data[i];
                // var title = a.title;
                // if (a.dtype == 0) {
                //     setData(a);
                // } else if (a.dtype == 1) {
                //     setData(a);
                // } else if (a.dtype == 2) {
                //     setData(a);
                // }
                if (a.jd == '' || a.wd == '') {
                    console.log('没有坐标', i)
                } else {
                    setData(a);
					that.getDHLine(a.jd,a.wd);
                }
                // marker.bindPopup(title);
                markers.addLayer(marker);
            }
            map.addLayer(markers);

            markers.on('click', function (a) {
                // that.drawer = true;
                that.seedata = a.layer.options.myData;
                that.nowPosition = [that.seedata.wd,that.seedata.jd]
                console.log(that.seedata)
                $('#seedata').css('top', '');
                $('#map').css("height", (index, value) => {//改变地图高度
                    return '50%';
                })
                map.invalidateSize(true);//应用地图高度
                // console.log(a.layer.options.myData);
                that.move.destruction();
                that.move.followFinger(map, 'down');

            });
            // that.seedata = data[0];
            this.nowPosition = center;
            // map.on('mousemove', (e) => {//实时显示坐标
            //     let latlng = e.latlng;
            //     console.log(latlng);// {lat: 30.59, lng: 114.32}
            // });
            return map;//抛出map
        },
		getDHLine(x, y) {
		
			var that = this;
		
			//获取导航信息
			axios({
				method: "get",
				url: `https://web.byisf.com/sf/rp/v2/api`,
				params: {
					ak: "1986afc8a5744263971b7f2482253dfc",
					x1: that.lng,
					y1: that.lat,
					x2: x,
					y2: y,
					type: "1",
					strategy: "0",
					opt: "sf2"
				},
			}).then((res) => {
				var resdata = res.data.result.coords;
				var data = [];
				for (var i = 0; i < resdata.length; i++) {
					var xy = [];
					xy.push(resdata[i][1]);
					xy.push(resdata[i][0]);
					data.push(xy);
				}
		
				if (that.LXdhEnd != null) {
					that.map.removeLayer(that.LXdhEnd);
				}
				if (that.LxdhLine != null) {
					that.map.removeLayer(that.LxdhLine);
				}
		
				//绘制起点和终点
				that.LXdhEnd = L.markerClusterGroup();
				
				var transportIcon = L.Icon.extend({ //图标初始化
					options: {
						iconSize: [56, 32], // 图标尺寸
					}
				});
		
				var zd = new transportIcon({
					iconUrl: './img/zd.png'
				});
				// var qd = new transportIcon({
				// 	iconUrl: './img/qd.png'
				// });
		
				var qdzb = res.data.result.query;
		
				var x = resdata[resdata.length - 1][0];
				var y = resdata[resdata.length - 1][1];
		
				that.LXdhEnd.addLayer(L.marker([y, x], {
					icon: zd,
				}));
				// markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
				// 	icon: qd,
				// }));
		
				that.map.addLayer(that.LXdhEnd);
		
				that.showPolyLine(data);
			});
		},
		showPolyLine(xy) {
			var that = this;
			that.LxdhLine = L.polyline(xy, {
				color: 'red'
			}).addTo(that.map);
		
			// zoom the map to the polyline
			that.map.fitBounds(that.LxdhLine.getBounds())
		},
        getLocation() {
            // if (navigator.geolocation) {
            //     // console.log(navigator.geolocation)
            //     navigator.geolocation.getCurrentPosition(onSuccess, onError);
               
            // } else {
            //     alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
            // }

            // function onSuccess(position) {
            //     console.log('纬度: ' + position.coords.latitude + '\n' +
            //         '经度: ' + position.coords.longitude + '\n' +
            //         '海拔: ' + position.coords.altitude + '\n' +
            //         '水平精度: ' + position.coords.accuracy + '\n' +
            //         '垂直精度: ' + position.coords.altitudeAccura)
            // }
            // function onError(error) {
            //     switch (error.code) {
            //         case error.PERMISSION_DENIED:
            //             alert("您拒绝对获取地理位置的请求");
            //             break;
            //         case error.POSITION_UNAVAILABLE:
            //             alert("位置信息是不可用的");
            //             break;
            //         case error.TIMEOUT:
            //             alert("请求您的地理位置超时");
            //             break;
            //         case error.UNKNOWN_ERROR:
            //             alert("未知错误");
            //             break;
            //     }
            // }
            // this.map.locate({
            //     setView: true,
            //     maxZoom: 16
            // });
            // console.log(this.map)
            // this.map.on('locationfound', function (e) {
            //     // var radius = e.accuracy / 2;
            //     // L.marker(e.latlng).addTo(mapid).bindPopup("你就在这个圈内");
            //     // L.circle(e.latlng, radius).addTo(mapid);
            //     console.log(e)
            // });
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        titleClick(){
            this.map.setView(this.nowPosition, 12);
        },
        locationMap() {//定位
            // this.map.setView(this.nowPosition, 12);//定警情位置
            // this.getLocation();
            // console.log(wx,12);
            // wx.miniProgram.navigateTo({url: 'pages/workbench/workbench'})
        },
        shipingClick(open) {//打开视频
            if (open) {
                this.openRealVideoBox(this.seedata.serialNumber, this.seedata.channelNumber, this.seedata.deviceNumber, this.seedata.manufacturer);
            } else {
                this.shipingPopupShow = false;
            }
        },
        resultFeedbackClick() {//结果反馈跳转小程序
            this.gotoxcx('policeDetails');
        },
        openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) {//获取视频地址
            var that = this;
            if (manufacturer == "HK") {
                axios
                    .get(
                        `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
                    )
                    .then((result) => {
                        that.videoSource = result.data.data.address;
                        that.shipingM3u8Url = decodeURIComponent(that.videoSource);
                        that.shipingPopupShow = true;
                    })
                    .ce;
            } else {
                var newAxios = axios.create({
                    baseURL: "https://web.byisf.com:18000",
                    withCredentials: false,
                    headers: {
                        "Content-type": "application/x-www-form-urlencoded",
                    },
                });
                newAxios
                    .post(
                        "/api_control",
                        {},
                        {
                            params: {
                                param: JSON.stringify({ PktType: "GetAccessToken" }),
                            },
                        }
                    )
                    .then((res) => {
                        newAxios
                            .get(
                                `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
                            )
                            .then((result) => {
                                that.videoSource = result.data.data.m3u8;
                                that.shipingM3u8Url = decodeURIComponent(that.videoSource);
                                that.shipingPopupShow = true;
                            });
                    });
            }
        },
        upData() {
            console.log('上传信息成功')
        },
        gotoxcx(routs) {
            wx.miniProgram.navigateTo({
                url: `../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`,            //指定跳转至小程序页面的门路
                success: function () {
                    console.log('success');   //页面跳转胜利的回调函数
                }
            });
        },
		getLocationData() {
			var that = this;
			var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
			var positionNum = 0;
			var options = {
				timeout: 8000
			};
		
			function showPosition(position) {
				var adCode = position.adCode; //邮政编码
				var nation = position.nation; //中国
				var city = position.city; //城市
				var addr = position.addr; //详细地址
				that.lat = position.lat; //
				that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 
		
				if (that.LXdhStart != null) {
					that.map.removeLayer(that.LXdhStart);
				}
		
				//绘制起点和终点
				that.LXdhStart = L.markerClusterGroup();
		
				var transportIcon = L.Icon.extend({ //图标初始化
					options: {
						iconSize: [50, 50], // 图标尺寸
					}
				});
		
				var qd = new transportIcon({
					iconUrl: './img/dingw.gif'
				});
		
				that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
					icon: qd,
				}));
		
				that.map.addLayer(that.LXdhStart);
		
			};
		
			function showErr() {
				//TODO 如果出错了调用此方法 
			};
		
			geolocation.getLocation(showPosition, showErr, options);
		},

    },
    created() {
    },
    mounted() {
        this.getDataList();
		this.getLocationData();
    },
    wacth: {
    }
})