<template>
	<div class="mapDetails">
		<headNav
			@backPage="backPage"
			:iconName="'replay'"
			@rightClick="rightClick"
			:title="'地图详情'"
		></headNav>

		<div class="routeContainer">
			<div class="routeContent">
				<div class="icon">
					<div><span class="spot_green"></span></div>
					<div><span class="spot_red"></span></div>
				</div>
				<div class="location">
					<div class="route_myLocation">{{ myLocation }}</div>
					<div class="route_destination">{{ destination }}</div>
				</div>
			</div>
		</div>
		
		<div class="overLay" v-if="status == 1">
			驾车导航
		</div>

		<div class="mapContainer">
			<iframe id="frame" :src="mapSrc" frameborder="0" ref="iFrame"></iframe>
		</div>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';

export default {
	name: 'mapDetails',
	components: {
		headNav
	},
	data() {
		return {
			mapSrc: '',
			myLocation: '成都市',
			destination: '成都市',
			pointA: '',
			pointB: '',
			status: ''
		};
	},
	mounted() {
		this.init();
	},
	watch: {},
	methods: {
		// 初始化
		init() {
			let routeInfo = this.$route.params.description.split('&');
			this.myLocation = this.$route.params.myLocation;
			this.destination = this.$route.params.destination;
			routeInfo.map(item => {
				const itemArr = item.split('=');
				if (itemArr[0] === 'myLocation') {
					this.pointA = itemArr[1];
				} else if (itemArr[0] === 'destination') {
					this.pointB = itemArr[1];
				} else {
					this.status = itemArr[1];
				}
			});
			this.initMapDetail();
		},

		// 初始化地图信息
		initMapDetail() {
			if (this.status === '1') {
				const baseSrc = 'http://api.map.baidu.com/direction?';
				const myLocation = `origin=latlng:${this.pointA}|name:${this.myLocation}`;
				const destination = `destination=latlng:${this.pointB}|name:${this.destination}`;
				this.mapSrc = `${baseSrc}${myLocation}&${destination}&mode=driving&region=重庆&output=html&src=webapp.xy.openAPIdemo`;
			} else if (this.status === '2') {
				const baseSrc = 'https://uri.amap.com/navigation?';

				let pointA = this.bd_convert_gd(this.pointA.split(',').reverse());
				let pointB = this.bd_convert_gd(this.pointB.split(',').reverse());

				const myLocation = `from=${pointA}`;
				const destination = `to=${pointB}`;
				this.mapSrc = `${baseSrc}${myLocation}&${destination}&mode=car&policy=0&src=mypage&coordinate=wgs84&callnative=0`;
			} else {
				const baseSrc = '  https://apis.map.qq.com/uri/v1/routeplan?type=drive&';

				let pointA = this.bd_convert_gd(this.pointA.split(','));
				let pointB = this.bd_convert_gd(this.pointB.split(','));

				const myLocation = `fromcoord=${pointA}&from=${this.myLocation}`;
				const destination = `tocoord=${pointB}&to=${this.destination}`;
				this.mapSrc = `${baseSrc}${myLocation}&${destination}&referer=HLZBZ-I5GWS-JOSO7-6ZVAZ-UZK6K-OUFJM`;
			}
		},

		backPage() {
			this.$router.replace('/');
		},

		rightClick() {
			location.reload();
		},

		// 百度地图坐标转换为高德地图坐标
		bd_convert_gd(coordinate) {
			var bd_lng = coordinate[0];
			var bd_lat = coordinate[1];
			var pi = (3.14159265358979324 * 3000.0) / 180.0;
			var x = bd_lng - 0.0065;
			var y = bd_lat - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
			var gd_lng = z * Math.cos(theta);
			var gd_lat = z * Math.sin(theta);
			return [gd_lng, gd_lat];
		}
	}
};
</script>

<style lang="scss" scoped>
.mapDetails {
	background-color: #fff;

	.routeContainer {
		background-color: #fff;
		font-size: 14px;
		color: #424242;
		padding-top: 57px;

		.routeContent {
			margin: 0px 10px;
			margin-bottom: 10px;
			padding: 10px 15px;
			background-color: #f9f9f9;
			border-radius: 5px;
			display: flex;
			align-items: center;

			.icon {
				height: 54px;
				display: flex;
				flex-direction: column;
				margin-right: 10px;

				div {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					&:first-child {
						position: relative;

						&::after {
							display: block;
							position: absolute;
							left: 5px;
							top: 20px;
							content: '';
							height: 13px;
							width: 0px;
							border-right: 1px dashed #c7c7c7;
						}
					}
				}

				.spot_green {
					display: block;
					height: 10px;
					width: 10px;
					background-color: #42c761;
					margin-right: 10px;
					border-radius: 50%;
				}

				.spot_red {
					display: block;
					height: 10px;
					width: 10px;
					background-color: #d40000;
					margin-right: 10px;
					border-radius: 50%;
				}
			}

			.location {
				flex: 1;

				.route_myLocation {
					padding: 5px 0;
					border-bottom: 1px solid #eeeeee;
				}

				.route_destination {
					padding: 5px 0;
				}
			}
		}
	}

	.mapContainer {
		width: 100%;
		height: calc(100% - 150px);
		// position: absolute;

		iframe {
			width: 100%;
			height: 100%;
		}
	}
	
	.overLay {
		position: absolute;
		background-color: #fff;
		width: 100%;
		height: 35px;
		z-index: 2;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #00aaff;
	}
}
</style>

<style>
.mapDetails {
	height: 100vh;
}

#fis_elm__5 {
	display: none !important;
}
</style>
