<template>
	<view class="pagebody">
		<view class="mapbox">
			<view id="baiduimap" class="map" :mapEmit="mapEmit" :change:mapEmit="mapbaidu.mapgetEmit">
			</view>
			<view class="punctuation" v-if="showmap">
				<view class="name" @click.stop="getposition">
					<view class="txt" @click.stop="getposition">
						设备
						<block v-if="type==1">
							{{pointPosition1.id}}
						</block>
						<block v-if="type==2">
							{{pointPosition2.id}}
						</block>
						确定打点
					</view>
				</view>
				<view class="verticalLine"></view>
			</view>
		</view>
		<view class="right">
				<scroll-view :scroll-y="true" class="box" :scroll-top="scroll">
				<view class="title">预警设置</view>
				
				<view class="li">
					<view class="name">设备{{pointPosition1.id}}</view>
					<view class="text">
						<block v-if="pointPosition1.point">
							<view class="mapname">

								<textarea placeholder="请填写位置信息" :auto-height='true'
									v-model="pointPosition1.address.address"></textarea>
								<view class="position">
									{{pointPosition1.point.lng.toFixed(6)}}/{{pointPosition1.point.lat.toFixed(6)}}
								</view>
							</view>
							<view class="fn" @click.stop="setpointPosition(1,pointPosition1.id)">重新获取</view>
						</block>
						<text class="tips" v-if="!pointPosition1.point">请在地图中打点位置信息</text>
					</view>
				</view>
				<view class="li">
					<view class="name">设备{{pointPosition2.id}}</view>
					<view class="text">
						<block v-if="pointPosition2.point">
							<view class="mapname">
								<textarea placeholder="请填写位置信息" :auto-height='true'
									v-model="pointPosition2.address.address"></textarea>
								<view class="position">
									{{pointPosition2.point.lng.toFixed(6)}}/{{pointPosition2.point.lat.toFixed(6)}}
								</view>
							</view>
							<view class="fn" @click.stop="setpointPosition(2,pointPosition2.id)">重新获取</view>
						</block>
						<text class="tips" v-if="!pointPosition2.point">请在地图中打点位置信息</text>
					</view>
				</view>
				<view class="li">
					<view class="name">区间距离</view>
					<view class="input">
						<input placeholder="请输入" v-model="Distance" type="number" />
						<text>km</text>
					</view>
				</view>
				<view class="li">
					<view class="name">区间限速</view>
					<view class="input">
						<input placeholder="请输入" v-model="speed" type="number" />
						<text>km/h</text>
					</view>
				</view>
				<view class="li">
					<view class="name">预警级别</view>
					<view class="singleChoice">
						<view class="item" :class="{on:speeding==999}" @click="speeding=999">
							<uni-icons :type="speeding==999?'checkbox-filled':'circle'" size="16rpx"
								:color="speeding==999?'#fff':'#D1D6DF'"></uni-icons>
							<text class="type">全部超速</text>
						</view>
						<view class="item" :class="{on:speeding==1}" @click="speeding=1">
							<uni-icons :type="speeding==1?'checkbox-filled':'circle'" size="16rpx"
								:color="speeding==1?'#fff':'#D1D6DF'"></uni-icons>
							<text class="type">超速10%以上</text>
						</view>
						<view class="item" :class="{on:speeding==2}" @click="speeding=2">
							<uni-icons :type="speeding==2?'checkbox-filled':'circle'" size="16rpx"
								:color="speeding==3?'#fff':'#D1D6DF'"></uni-icons>
							<text class="type">超速20%以上</text>
						</view>
						<view class="item" :class="{on:speeding==5}" @click="speeding=5">
							<uni-icons :type="speeding==5?'checkbox-filled':'circle'" size="16rpx"
								:color="speeding==5?'#fff':'#D1D6DF'"></uni-icons>
							<text class="type">超速50%以上</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="fnbutton">
				<view @click="emptydata">清空</view>
				<view @click="submit">保存</view>
			</view>
		</view>
	</view>

</template>

<!-- renderjs 嵌入百度地图了 -->
<script module="mapbaidu" lang="renderjs">
	
	let BAIDUKEY="LuRvyI4RAQNUQzVYE0Z8negUY3AD3dOo";
	let suspend = false;
	let timing;
	let imgb64 =
		"data:image/png;base64,[encoded data, 13948 characters]"

	let _map="";
	export default {
		mounted() {
			this.createMap()
		},
		data() {
			return {
				marker1: {
					el: "",
					point: {}
				},
				marker2: {
					el: "",
					point: {}
				},
				
			}
		},
		methods: {
			createMap(fn=function(){}){
					// 加载百度地图JS
					window.BMAP_PROTOCOL = "https";
					window.BMapGL_loadScriptTime = new Date().getTime();
					var script = document.createElement('script');
					script.type = 'text/javascript';
					script.src =
						`https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${BAIDUKEY}&services=&t=2025082517022`;
					document.body.appendChild(script);
					
					var script = document.createElement('script');
					script.type = 'text/javascript';
					script.src =
						`https://api.map.baidu.com/getscript?v=3.0&ak=${BAIDUKEY}&services=&t=2025082517022`;
					document.body.appendChild(script);
					script.onload=function(){
						fn()
					}
					var link = document.createElement("link");
					link.rel = "stylesheet";
					link.type = "text/css";
					link.href = "https://api.map.baidu.com/res/webgl/10/bmap.css";
					document.body.appendChild(link);
					
					// 加载点位样式
					var style = document.createElement('style');
					style.type = 'text/css';
					style.innerText =
						`#imgs {
							display: inline-block;
							text-align: center;
							 margin-top: -17px;
						 }
						 #imgs .rq{
							 position: relative;
							 display: inline-block;
						 }
						  #imgs .rq span{
							 display: inline-block;
							 width: 15px;
							 height: 15px;
							 background: #4D7BFF;
							 position: absolute;
							 bottom: -6px;
							 left: 50%;
							 transform: translate(-50%,0) rotate(45deg);
						  }
						 #imgs #titl {
							background: #4D7BFF;
							color: #fff;
							font-size: 13px;
							padding: 7px 10px;
							border-radius: 5px;
							 position: relative;
							 z-index: 2;
							 white-space: nowrap;
						 }
						 
						 #imgs img {
							
							width: 20px;
							 margin-top: 13px;
							display: inline-block;
						 }`
					
					document.head.appendChild(style);
			},
			init(e) {
				let _this = this;
			
				if (typeof BMapGL != "undefined") {
					_map = new BMapGL.Map('baiduimap'); // 创建Map实例
					var point = new BMapGL.Point(116.404, 39.915); // 创建点坐
					_map.centerAndZoom(point, 13);
					_map.enableScrollWheelZoom();
					// 回执
					if(e){
						if(typeof e == "function"){
							e()
						}else{
							this.mapsetEmit({
								type: e.type,
								data: {}
							})
						}
						
					}
					
					
				}
			},
			clearmap(e){
				if(_map){_map.clearOverlays()}
				
				this.marker2={
					el: "",
					point: {}
				};
				this.marker1={
					el: "",
					point: {}
				};
				this.mapsetEmit({
					type: e.type,
					data: {}
				})
				
			},
			setcenter(e) {
				if (_map) {
					var point = new BMapGL.Point(e.longitude, e.latitude);
					_map.setCenter(point);
				}
			},
			showsetcenter(e) {
				if (_map) {
					console.log(6666666)
					_map.clearOverlays()
					var point = new BMapGL.Point(e.data.longitude, e.data.latitude);
					_map.setCenter(point);
					this.mapsetEmit({
						type: e.type,
						data: {}
					})
				}
			},
			// 绘制驾车路线
			drawpolyline(e) {

				let _this = this;
				var transit = new BMapGL.DrivingRoute(_map, {
					onSearchComplete: (results) => {
						let _Distance = 0; //单位KM
						let _Polylines = [];
						if(!results._plans){
							return 
						}
						results._plans.map(r => {
							_Distance += r._distance;
							r._routes.map(res => {
								res._points.map(item => {
									_Polylines.push(new BMapGL.Point(item.lng, item
										.lat))
								})
							})
						})
						// 绘制折线图
						var polyline = new BMapGL.Polyline(_Polylines, {
							strokeColor: "#00BF67",
							strokeWeight: 5,
							strokeOpacity: 1
						});
						_map.addOverlay(polyline);
						let mapViewObj = _map.getViewport(_Polylines);
						_map.centerAndZoom(mapViewObj.center, mapViewObj.zoom - 1)
						_this.mapsetEmit({
							type: e.type,
							data: {
								Distance: _Distance
							}
						})

					},

				});
				var start = new BMapGL.Point(this.marker1.point.lng, this.marker1.point.lat);
				var end = new BMapGL.Point(this.marker2.point.lng, this.marker2.point.lat);
				transit.search(start, end);

			},
			// 删除指定覆盖物
			removemarker(e) {

				let _Point;
				// 删除所有覆盖物
				_map.clearOverlays()
				if (e.data.type == 2 && this.marker2.point) {
					// 移动地图到删除的点位
					var point = new BMapGL.Point(this.marker2.point.lng, this.marker2.point.lat);
					_map.setCenter(point);
					this.marker2 = {}
					if (this.marker1.point) {
						// 重新绘制第一个
						draw(1, this.marker1.point, e.data.id)
					}
				}
				if (e.data.type == 1 && this.marker1.point) {
					var point = new BMapGL.Point(this.marker1.point.lng, this.marker1.point.lat);
					_map.setCenter(point);
					this.marker1 = {}
					if (this.marker2.point) {
						// 重新绘制第二个
						draw(2, this.marker2.point, e.data.id)
					}
				}
				// 绘制
				function draw(index, Point, id) {
					function createDOM() {
						var div = document.createElement('div');
						div.id = 'imgs'
						div.innerHTML = `
								 <div class="rq">
									 <div id="titl">设备${id}</div>
									 <span></span>
								 </div>
								 <img src="${imgb64}"/>
							 `
						return div
					}
					var customOverlay = new BMapGL.CustomOverlay(createDOM, {
						point: new BMapGL.Point(Point.lng, Point.lat)
					})
					_map.addOverlay(customOverlay);
				}
				this.mapsetEmit({
					type: e.type,
					data: {}
				})
			},
			getcenter(e) {
				let _this = this;
				// 获取中心点
				var center = _map.getCenter();
				// 地址逆解析
				var geoc = new BMapGL.Geocoder();
				geoc.getLocation(new BMapGL.Point(center.lng, center.lat), (res) => {
					// 传递参数回去
					_this.mapsetEmit({
						type: e.type,
						data: {
							point: center,
							address: res.content
						}
					})
				})

				function createDOM() {
					var div = document.createElement('div');
					div.id = 'imgs'
					div.innerHTML = `
							 <div class="rq">
								 <div id="titl">设备${e.data.id}</div>
								 <span></span>
							 </div>
							 <img src="${imgb64}"/>
						 `
					return div
				}
				var customOverlay = new BMapGL.CustomOverlay(createDOM, {
					point: new BMapGL.Point(center.lng, center.lat)
				})
				// 设置第一个标点
				if (e.data.type == 1) {
					_this.marker1.el = customOverlay;
					_this.marker1.point = center
				}
				// 设置第二个标点
				if (e.data.type == 2) {
					_this.marker2.el = customOverlay;
					_this.marker2.point = center
				}
				// 稍微移动下确认位置
				var _center = _map.getCenter();
				var _point = new BMapGL.Point(_center.lng, _center.lat - 0.02);
				_map.setCenter(_point);

				_map.addOverlay(customOverlay);

			},
			setpoint(e) {
				
				
				// 删除所有覆盖物
				if(_map){
					_map.clearOverlays()
				}
				
				
				// 设置坐标信息
				this.marker1.point = e.data.point1.point;
				this.marker2.point = e.data.point2.point;
					
					
				// 绘制坐标
				function createDOM() {
					var div = document.createElement('div');
					div.id = 'imgs'
					div.innerHTML = `
							 <div class="rq">
								 <div id="titl">设备${e.data.point1.id}</div>
								 <span></span>
							 </div>
							 <img src="${imgb64}"/>
						 `
					return div
				}

				function createDOM1() {
					var div = document.createElement('div');
					div.id = 'imgs'
					div.innerHTML = `
							 <div class="rq">
								 <div id="titl">设备${e.data.point2.id}</div>
								 <span></span>
							 </div>
							 <img src="${imgb64}"/>
						 `
					return div
				}
				var customOverlay = new BMapGL.CustomOverlay(createDOM, {
					point: new BMapGL.Point(this.marker1.point.lng, this.marker1.point.lat)
				})
				var customOverlay2 = new BMapGL.CustomOverlay(createDOM1, {
					point: new BMapGL.Point(this.marker2.point.lng, this.marker2.point.lat)
				})
				_map.addOverlay(customOverlay2);
				_map.addOverlay(customOverlay);
				this.drawpolyline(e);

			},
			// renderjs 和页面通讯相关方法
			mapgetEmit(e) {
				let _this=this;
				if(e.type){
					// 处理无网络打开应用地图二次加载
					if(typeof BMapGL == "undefined"){
						console.log(typeof BMapGL)
						_this.createMap(function(){
							// 延迟一会确保JS加载 完毕
							
							setTimeout(()=>{
								_this.init(function(){
									_this[e.type](e);
								})
							},1500)
						})
					}
					if(typeof BMapGL != "undefined" && !_map){
						this.init(()=>{
							this[e.type](e);
						})
						
					}
					if(typeof BMapGL != "undefined" && _map){
						if (e.type && suspend == false) {
							suspend = true;
							this[e.type](e);
							console.log(e.type)
						}
					}
				}
				
				
				
				clearTimeout(timing)
				// 一秒没回馈清除
				timing = setTimeout(function() {
					suspend = false;
				}, 1000);
			},
			mapsetEmit(e) {
				suspend = false;
				clearTimeout(timing)
				this.$ownerInstance.callMethod("getEmit", e)
			}

		}
	}
</script>


<script>
	import {
		getequipment,
		getpassingTheCar,
		setSettings
	} from "/appapi/index.js"
	
	export default {
		data() {
			return {
				pointPosition1: {
					point: "",
					id: '005',
					address: {
						address: "北京市东城区东华门街道中华路甲10号"
					}
				},
				scroll:0,
				pointPosition2: {
					point: "",
					id: '008',
					address: {
						address: "北京市丰台区西罗园街道马家堡路16号"
					}
				},
				showmap: false,
				type: 1,
				Distance: "",
				speed: '',
				speeding: 0,
				mapEmit: {
					type: "", //调用方法名
					data: "", //传递参数
					day: new Date().getTime()
				}
			}
		},
		
		methods: {
			
			emptydata(){
				this.pointPosition1.point="";
				this.pointPosition2.point="";
				this.pointPosition1.address="";
				this.pointPosition2.address="";
				this.Distance="";
				this.speed="";
				this.speeding=999;
				
				// 删除地图点位数据
				this.showmap=true;
				this.type=1;
				this.setEmit({
					type: "clearmap",
					data: {}
				}, () => {
				
				})
				
			},
			submit() {
				if (!this.pointPosition1.point) {
					uni.showToast({
						title: `请选择设备${this.pointPosition1.id}地址`,
						icon: "none"
					})
					return
				}
				if (!this.pointPosition2.point) {
					uni.showToast({
						title: `请选择设备${this.pointPosition2.id}地址`,
						icon: "none"
					})
					return
				}
				if (!this.Distance) {
					uni.showToast({
						title: `请输入区间距离`,
						icon: "none"
					})
					return
				}
				if (!this.speed) {
					uni.showToast({
						title: `请输入区间限速`,
						icon: "none"
					})
					return
				}
				setSettings({
					equipment: [{
							encoding: this.pointPosition1.id,
							position: this.pointPosition1.address.address,
							longitude: this.pointPosition1.point.lng,
							latitude: this.pointPosition1.point.lat,
						},
						{
							encoding: this.pointPosition2.id,
							position: this.pointPosition2.address.address,
							longitude: this.pointPosition2.point.lng,
							latitude: this.pointPosition2.point.lat,
						}
					],
					distance: this.Distance,
					speed: this.speed,
					warningLevel: this.speeding
				}).then(r => {
					uni.showToast({
						title: "已修改",
						icon: "success"
					})
				})
			},
			load() {
				console.log('load')
				// this.setEmit({
				// 	type: "init",
				// 	data: {}
				// }, () => {
				// 	this.show()
				// })
			},
			hide() {	
			},
			show() {
				let _this = this;
				this.type=1;
				this.scroll=10;
				
				getequipment().then(r => {
					this.scroll=0;
					
					this.pointPosition1 = {
						id: r.data.allDevices[0].encoding,
					}
					this.pointPosition2 = {
						id: r.data.allDevices[1].encoding,
					}

					if (r.data.allDevices[0].position) {
						this.pointPosition1.address = {
							address: r.data.allDevices[0].position
						}
						this.pointPosition1.point = {
							lng: Number(r.data.allDevices[0].longitude),
							lat: Number(r.data.allDevices[0].latitude)
						}
					}
					if (r.data.allDevices[1].position) {
						this.pointPosition2.address = {
							address: r.data.allDevices[1].position
						}
						this.pointPosition2.point = {
							lng: Number(r.data.allDevices[1].longitude),
							lat: Number(r.data.allDevices[1].latitude)
						}
					}
					this.Distance = r.data.distance;
					this.speeding = r.data.warningLevel;
					this.speed = r.data.speed;



					if (!this.pointPosition1.point && !this.pointPosition2.point) {
						this.showmap = true;
						uni.getLocation({
							type: "gcj02",
							success: (res) => {
								this.setEmit({
									type: "showsetcenter",
									data: {
										...res,
										type: this.type,
										id: this.pointPosition1.id
									}
								}, () => {
										
								})
							}
						});
					} else {
						this.showmap = false;
						this.setEmit({
							type: "setpoint",
							data: {
								point1: this.pointPosition1,
								point2: this.pointPosition2
							}
						}, () => {

						})
					}
				})
			},


			setpointPosition(index, id) {
				// 指定重绘某一个点

				this.showmap = true;
				this.type = index;
				// 删除指定的marker
				if (index == 1) {
					this.pointPosition1.point = "";
					this.pointPosition1.address = "";
				}
				if (index == 2) {
					this.pointPosition2.point = "";
					this.pointPosition2.address = "";

				}
				this.Distance = "";
				let _id;
				if (this.type == 1) {
					_id = this.pointPosition1.id;
				}
				if (this.type == 2) {
					_id = this.pointPosition2.id;
				}
				this.setEmit({
					type: "removemarker",
					data: {
						type: this.type,
						id: _id
					}
				}, () => {

				})
			},
			getposition() {
				let _id;
				if (this.type == 1) {
					_id = this.pointPosition1.id;
				}
				if (this.type == 2) {
					_id = this.pointPosition2.id;
				}
				this.setEmit({
					type: "getcenter",
					data: {
						type: this.type,
						id: _id
					}
				}, (e) => {
					if (this.type == 1) {
						this.pointPosition1 = {
							...this.pointPosition1,
							...e
						};
					}
					if (this.type == 2) {
						this.pointPosition2 = {
							...this.pointPosition2,
							...e
						};
					}
					this.isPositionall()
					
				})

			},
			isPositionall() {
				if (this.pointPosition1.point && this.pointPosition2.point) {
					this.showmap = false;
					// 绘制驾车路线
					this.setEmit({
						type: "drawpolyline",
						data: {

						}
					}, (e) => {

						this.Distance = e.Distance / 1000
					})
				} else {
					this.type = this.type == 1 ? 2 : 1;
				}

			},
			// renderjs 和页面通讯相关方法
			setEmit(e, fn) {
				uni.$off(e.type)
				uni.$once(e.type, function(data) {
					fn && fn(data || '')
				})
				this.$set(this, 'mapEmit', {
					...e,
					day: new Date().getTime()
				})
			},
			getEmit(e) {
				uni.$emit(e.type, e.data || '')
			}
		}
	}
</script>



<style scoped lang="scss">
	.punctuation {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		z-index: 22222222;
		margin-top: -26rpx;

		.name {
			color: #fff;
			border-radius: 3rpx;
			background: #FB3E7A;
			padding: 1rpx 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 30rpx;
			

			.txt {
				font-size: 9rpx;
				color: #fff;
			}

		}

		.verticalLine {
			display: inline-block;
			height: 30rpx;
			width: 4rpx;
			background: #FB3E7A;
			border-radius: 4rpx;
			margin-top: -3rpx;
		}
	}

	.pagebody {
		width: 100%;
		height: 100vh;
		display: flex;

		.ceshi {
			position: fixed;
			left: 100rpx;
		}

		.mapbox {
			width: 50%;
			height: 100%;
			background: #fff;
			position: relative;

			#baiduimap {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 222;
			}


		}

		.right {
			width: 50%;
			height: 100%;
			background: #E7E7ED;
			position: relative;

			.title {
				margin: 15rpx 0;
				text-align: center;
				font-weight: 500;
				font-size: 11rpx;

			}

			.fnbutton {
				background: #fff;
				position: absolute;
				width: 100%;
				left: 0rpx;
				display: flex;
				justify-content: space-around;
				text-align: center;
				bottom: 0rpx;
				padding: 10rpx 15rpx;
				gap: 15rpx;

				view {
					line-height: 31rpx;
					background: #E8EEF5;
					border-radius: 50rpx;
					width: 50%;
					font-weight: 500;
					font-size: 11rpx;

					&:nth-of-type(2) {
						color: #fff;
						background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
					}
				}
			}

			scroll-view {
				padding: 0 18rpx;
				box-sizing: border-box;
				height: calc(100% - 50rpx);

				.li {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;

					.name {
						width: 44rpx;
						font-size: 11rpx;
						padding: 8rpx 0;
						white-space: nowrap;

					}

					.text,
					.input,
					.singleChoice {
						width: calc(100% - 50rpx);
					}

					.input {
						border-radius: 3rpx;
						padding: 8rpx;
						display: flex;
						justify-content: space-between;
						background: #fff;
						align-items: center;

						text {
							font-size: 11rpx;
						}

						input {
							font-size: 11rpx;
						}
					}

					.singleChoice {
						.item {
							border-radius: 3rpx;
							padding: 8rpx 10rpx;
							display: flex;
							font-size: 11rpx;
							background: #fff;
							margin-bottom: 8rpx;
							align-items: center;

							.type {
								font-weight: 500;
								font-size: 11rpx;
								margin-left: 5rpx;
								color: #000;
							}

							&.on {
								background: #4D7BFF;

								.type {
									color: #fff;
								}
							}
						}
					}

					.text {
						background: #fff;
						border-radius: 3rpx;
						padding: 8rpx;
						display: flex;
						justify-content: space-between;
						align-items: start;
						min-height: 34rpx;

						.tips {
							font-size: 11rpx;
							color: #999999;
						}

						.mapname {
							width: calc(100% - 60rpx);
							line-height: 1;

							textarea {
								font-size: 11rpx;
								color: #333333;
								width: 100%;
							}

							.position {
								font-size: 11rpx;
								color: #333333;
								margin-top: 5rpx;
							}
						}

						.fn {
							background: #FB3E7A;
							color: #fff;
							border-radius: 3rpx;
							font-weight: 500;
							font-size: 9rpx;
							width: 59rpx;
							line-height: 25rpx;
							text-align: center;
						}

					}

				}
			}

		}
	}
</style>