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",

		haveShishiweizhi: 1,
		isFromJQ: false,
		chulijieguo: '',
		wentifankui: '',
		oldlat: '',
		oldlng: '',
		haveJDWD: true,
		data: {}
		// {
		// 	type: 0,
		// 	city: "南昌市",
		// 	content: "按路线巡逻",
		// 	district: "青山湖区",
		// 	id: 5,
		// 	integral: "14",
		// 	jnum: 2,
		// 	line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
		// 	num: 0,
		// 	province: "江西省",
		// 	raddress: null,
		// 	rname: "巡逻任务",
		// 	rtype: "0",
		// 	serid: null,
		// 	time: "2021-11-17 00:00:00",
		// 	url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
		// }
	},
	methods: {
		openAPP(type) {
			// console.log(type)
			let that = this;
			if (type != 1) {
				//反馈
				uni.navigateTo({
					url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data)
				});
			} else {
				this.$confirm('是否参与活动：' + this.data.rname + "?", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'success',
					center: true,
					customClass: "customClass"
				}).then(() => {
					let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
						dataAppend = that.data;
					axios.post(url, dataAppend).then(res => {
						// console.log(res);
						if (res.data.msg == "抢单成功") {
							that.data.type = 0;
							that.$message({
								message: res.data.msg,
								type: 'success'
							});
							return;
						}
						that.$message({
							message: res.data.msg,
							type: 'warning'
						});
					})
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
				// return;
				//抢单
				// console.log(this.data)
				// let up = this.data.appenUrl == '/api' ? "http://192.168.0.107:85" : this.data.appenUrl;
				// let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
				// 	dataAppend = this.data;
				// axios.post(url, dataAppend).then(res => {
				// 	console.log(res);
				// 	if (res.data.msg == "抢单成功") {
				// 		this.data.type = 0;
				// 		this.$message({
				// 			message: res.data.msg,
				// 			type: 'success'
				// 		});
				// 		return;
				// 	}
				// 	this.$message({
				// 		message: res.data.msg,
				// 		type: 'warning'
				// 	});
				// })
			}
		},
		getDataList() {
			var that = this;
			that.beginCome();
		},
		beginCome() {
			var data = {
				city: "无数据",
				content: "无数据",
				district: "无数据",
				id: 5,
				integral: "14",
				jnum: 2,
				line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
				num: 2,
				province: "无数据",
				raddress: "",
				rname: "无数据",
				rtype: "0",
				serid: "1123598821738675201,",
				time: "无数据",
				url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
				buttype: "0",
				type:'1'
			}
			//url解码
			this.data = this.getQueryVariable('data') || data;
			// this.getdata = data;
			// this.changeDom(this.getdata[0]);//改变地图高度
			// console.log(this.getdata[0]);
			let lines = this.data.line
			let position = lines.slice(lines.indexOf("(") + 1, lines.indexOf(",")).split(" ");
			// console.log(position)
			// return
			this.map = this.beginMap(this.map, position); //创建并接受map
			// this.move = new myDomMove('#seedata', '.title', '#map');
			this.map.invalidateSize(true); //应用地图高度
			// this.move.followFinger(this.map, 'down');
			// this.lat = data[0].wd;
			// this.lng = data[0].jd;
			// this.oldlat = data[0].wd;
			// this.oldlng = data[0].jd;
			// this.oldlat = this.getdata[0].wd;
			// this.oldlng = this.getdata[0].jd;
		},
		changeDom(data) {
			// console.log(data, 'changeDom');

			function changeDoms(dom, item) {
				$(dom).empty();
				$(dom).append(item);
			}
			changeDoms('#um-m-t-bz', data.bz);
			changeDoms('#um-m-t-dz', data.place);
			$("#um-m-t-rw").find('span:eq(0)').text(data.alarmType + "-");
			// console.log(data.jtype, data.securityId, '11111111111')
			if (data.jtype == 1 && data.securityId != '') {
				changeDoms('#um-m-t-states', '处理中');
				$('#jieshou').hide();
				$('#wanchen').show();
			} else if (data.jtype == 2) {
				changeDoms('#um-m-t-states', '已处理');
			} else if (data.securityId == null || data.securityId == '') {
				changeDoms('#um-m-t-states', '未处理');
				$('#jieshou').show();
				$('#wanchen').hide();
			}

		},
		//url解码
		getQueryVariable(variable) {
			var that = this;
			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) {
					that.isFromJQ = true; //确认是警情进来
					return JSON.parse(decodeURI(pair[1]));
				} //解码url 和 JSON
			}
			return (false);
		},
		beginMap(map, data) {
			var that = this,
				center = data.reverse();
			// console.log(center)
			// desc = "+proj=longlat +datum=WGS84 +no_defs ",
			// crs = new L.CRS("EPSG:4326", desc, {});
			// center = [data[0].wd, data[0].jd],
			// url = `http://223.82.109.183:2082/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
			// url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
			// this.nowPosition = center;
			// axios.post(url).then((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];
			// 	}
			// })

			var createMap = () => {
				map = L.map('map', { //初始化地图
					center: center,
					zoom: 14,
					// crs: crs,
					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", { //顺丰地图
					"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", {}
				).addTo(map);
			}
			createMap();
			var markers = L.markerClusterGroup();

			var transportIcon = L.Icon.extend({ //图标初始化
				options: {
					iconSize: [50, 30], // 图标尺寸
				}
			});
			var carIcon = new transportIcon({ //引入图标
					iconUrl: './img/gray.png'
				}),
				planeIcon = new transportIcon({
					iconUrl: './img/zd.png'
				}),
				busIcon = new transportIcon({
					iconUrl: './img/red.png'
				});
			var setData = (a) => { //定义图标
				marker = L.marker(a, {
					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 = center;
			// if (a.jd == '' || a.wd == '') {
			// 	console.log('没有坐标', i);
			// 	that.haveJDWD = false;
			// } else {
			// setData(a);
			// 	}
			// }
			// if (that.haveJDWD) {
			// markers.addLayer(marker);
			// map.addLayer(markers);

			// // }
			// var i = 0;
			// markers.on('click', function(a) {
			// 	if (i == 0) {
			// 		// console.log(that.getdata)

			// 		console.log(a)
			// 	} else if (i == 1) {
			// 		i = -1
			// 	}
			// 	i++
			// });
			// console.log(markers)
			this.nowPosition = center;
			this.addlines(map);
			return map; //抛出map
		},
		Submit() {
			var data = this.getdata[0];
			// console.log(data)
			// receives() {// 接受任务
			var url = data.url,
				Pid = data.id,
				id = data.userid, //警察id
				name = data.username, //警察id
				datas = {
					id: Pid,
					securityId: id,
					alarmPeople: name
				};
			// console.log(datas);
			axios({
				url: url +
					`?securityId=${datas.securityId}&id=${datas.id}&alarmPeople=datas.alarmPeople`,
				// data: datas,
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				method: 'POST',

			}).then(res => {
				// console.log(res, 123);

				$('#loding').show();
				var time = setTimeout(() => {
					$('#loding').hide();
				}, 1000)
				$('#jieshou').hide();
				$('#wanchen').show();
				$('#um-m-t-states').empty();
				$('#um-m-t-states').append('处理中');
			})
			// console.log( 123);

		},
		SubmitDown() {
			// $('#SubmitDown').show();
			// console.log(uni.navigateTo)
			uni.navigateTo({
				url: '/pages/poput/mapJQtijiao/mapJQtijiao/mapJQtijiao?id=' + this.getdata[0].id
			});
		},
		SubmitSD() {
			console.log(this.chulijieguo, 'chulijieguo')
			console.log(this.wentifankui, 'wentifankui')
		},

		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())
		},
		//定位警情位置
		// titleClick() {
		// 	this.map.setView(this.nowPosition, 20);
		// },
		//定位当前位置
		locationMap() {
			// console.log([this.lat, this.lng])
			this.map.setView([this.lat, this.lng], 20);
		},
		toJQposition() {
			this.map.setView([this.oldlat, this.oldlng], 20);
		},
		// 获取实时位置
		getLocationData() {

			var that = this;
			var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
			var positionNum = 0;
			var options = {
				timeout: 1000
			};

			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 实现业务代码逻辑 
				that.haveShishiweizhi++; //控制只执行一次
				// console.log(that.haveShishiweizhi)
				if (that.haveShishiweizhi == 2) {
					// console.log(position)
					if (that.LXdhStart == null) {
						//点位
						var position = [that.lat, that.lng];

						//把map定位到点位上，13为地图的级别，也可以直接marker.getLatLng()
						that.map.setView(position, 15);
						console.log(position, 'position')

					} else {
						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,
					}));
					if (that.haveJDWD == false) {
						that.map.setView([that.lat, that.lng], 20);
					}

					that.map.addLayer(that.LXdhStart);
					that.getDHLine(+that.oldlng, +that.oldlat)
					// console.log(that.lat, that.lng);
					// console.log(+that.oldlat, +that.oldlng);

				};
			};

			function showErr() {
				//TODO 如果出错了调用此方法 
				// console.log(15)
			};

			geolocation.getLocation(showPosition, showErr, options);
			// console.log(geolocation);
		},
		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) => {
				if (res.data.result.coords == undefined) {
					// console.log('目标太远 或不存在路径')
				} else {

					var resdata = res.data.result.coords;
					// console.log(res)
					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);
					}
					// var w = resdata[0][0] - resdata[resdata.length - 1][0];
					// w = Math.abs(w);
					// w = w / 0.00000899;
					// w = w.toFixed(2);
					// console.log(w);
					$('#t-mi').empty();
					$('#t-mi').append(res.data.result.dist + '米');
					$('#t-fz').empty();
					$('#t-fz').append(res.data.result.flen + '分钟');

					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/zd2.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: '#169BD5'
			}).addTo(that.map);
			that.map.fitBounds(that.LxdhLine.getBounds())
		},
		refreshMap() {
			console.log('shuaxin')

		},
		addlines(map) {
			let line = this.data.line;
			line = line.slice(line.indexOf('(') + 1, line.indexOf(')')).split(",");
			for (let k in line) {
				line[k] = line[k].split(" ").reverse();
			}
			// console.log(line)

			// var latlngs = [
			// 	['28.67705200351289', '115.88518439579809'],
			// 	['28.68755200354289', '115.88518439574809'],
			// 	['28.68755200354289', '115.85518439574809'],
			// ]
			// var polygon = L.polygon(latlngs, {
			// 	color: '#000eff',
			// 	fillColor: '#0000ed',
			// 	weight: 2
			// });
			var polyline = L.polyline(line, {
				color: '#FC5E20'
			})
			// let point = L.circle([28.67705200351289,115.88518439579809],{color:'#FF0000',fillColor:'#FF0000',radius:1000000,fillOpacity:1});
			map.addLayer(polyline)
		}
	},
	created() {},
	mounted() {
		this.getDataList();
		// var time = setInterval(() => {
		// 	if (this.haveShishiweizhi == 1) {
		// 		this.getLocationData();
		// 		// console.log(this.haveShishiweizhi)

		// 	} else if (this.haveShishiweizhi == 2) {
		// 		clearInterval(time);
		// 		time = null;
		// 	}
		// }, 1000)
	},
	wacth: {}
})