<template>
	<view class="map-container">
		<map
			id="map"
			:latitude="latitude"
			:longitude="longitude"
			scale="12"
			show-compass
			show-location
			:markers="markers"
			:polyline="polyline"
			@markertap="markertap"
			style="width: 100%; height:100%;">
		</map>
	</view>
</template>

<script>
	import { getCleanWay } from '@/api/unclear.js'
	var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js')
	var qqmapsdk
	export default{
		data(){
			return{
				latitude: null,  //  纬度
				longitude: null,  //  经度
				markers: [],  //  所有网点标注点
				distanceMark: [],  //  按距离计算远近后的网点标注点
				polyline: null,  //  路线
			}
		},
		onLoad() {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'FRCBZ-IDZWW-FGDRR-O3SQM-ZW5C2-LRBDM'
			})
		},
		onShow() {
			this.getLocation()
		},
		methods: {
			//  获取当前位置
			getLocation(){
				const _this = this
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						_this.latitude = res.latitude  //  纬度
						_this.longitude = res.longitude  //  经度
						_this.getCleanWay()  //  获取个人待清运清单
				    }
				})
			},
			// 标注点信息
			getCleanWay(){
				getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
					if(res.status == 200){
						this.markers = []
						res.data.map((item, index) => {
							if(item.lat && item.lng){  //  经纬度为空的错误数据，网点信息不在地图上显示
								this.markers.push({
									id: index+1,
									latitude: item.lat,
									longitude: item.lng,
									width: '60rpx',
									height: '60rpx',
									iconPath: '/static/store.png',
									label: {
										content: item.stationName || '--',
										bgColor: '#fff',
									}
								})
							}
						})
						if(this.markers.length>0){
							this.onCalculateDistance()  //  计算距离
						}
					}
				})
			},
			//  将所有标注点与当前位置进行距离计算
			onCalculateDistance(){
				const _this = this
				const startPos = { latitude: _this.latitude, longitude: _this.longitude }
				let destPos = []
				_this.markers.map(item => {
					destPos.push({ latitude: item.latitude, longitude: item.longitude })
				})
				//调用距离计算接口
				qqmapsdk.calculateDistance({
					mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
					//from参数不填默认当前地址
					//获取表单提交的经纬度并设置from和to参数（示例为string格式）
					from: startPos, //若起点有数据则采用起点坐标，若为空默认当前地址
					to: destPos, //终点坐标
					success: function(res) {//成功后的回调
					  var res = res.result
					  _this.distanceMark = []
					  for (var i = 0; i < res.elements.length; i++) {
						//  将距离值加入标注点信息中
						_this.distanceMark.push({
							latitude: res.elements[i].to.lat,
							longitude: res.elements[i].to.lng,
							distance: res.elements[i].distance
						})
					  }
					  //  数组升序排序
					  _this.distanceMark.sort(_this.compare( 'distance', true ))
					  _this.onDirection()  //  路线规划
					},
					fail: function(error) {
					  console.error(error)
					},
					complete: function(res) {
					  // console.log(res)
					}
				})
			},
			//  数组排序
			compare(property, desc){
				return function (a, b) {
					var value1 = a[property]
					var value2 = b[property]
					if(desc==true){  // 升序排列
						return value1 - value2
					}else{  // 降序排列
						return value2 - value1
					}
				}
			},
			//  路线规划
			onDirection(){
				const _this = this
				_this.polyline = []
				//  将所有标注点都按距离进行路线规划
				var position = null
				position = [
					{ latitude: _this.latitude, longitude: _this.longitude },
					{ latitude: _this.distanceMark[0].latitude, longitude: _this.distanceMark[0].longitude }
				]
				_this.getDirection(position, 0)
			},
			//  路线规划
			getDirection(position, ind){
				const _this = this
				qqmapsdk.direction({
					mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
					//from参数不填默认当前地址
					from: {
						latitude: position[0].latitude,
						longitude: position[0].longitude
					},
					to: {
						latitude: position[1].latitude,
						longitude: position[1].longitude
					}, 
					success: function (res) {
						var ret = res
						var coors = ret.result.routes[0].polyline, pl = []
						//坐标解压（返回的点串坐标，通过前向差分进行压缩）
						var kr = 1000000
						for (var i = 2; i < coors.length; i++) {
						  coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						//将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
						  pl.push({ latitude: coors[i], longitude: coors[i + 1] })
						}
						//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
						_this.polyline.push({
							points: pl,
							arrowLine: true,
							width: 8,
							color: '#07c160'
						})
					},
					fail: function (error) {
						console.error(error)
					},
					complete: function (res) {
						// 腾讯地图使用限制
						// 为了保证我们的服务稳定，我们对每个key的每个服务接口的调用量做了如下限制：
						// 日调用量：1万次 / Key
						// 并发数：5次 / key / 秒
						
						//  递归调用避免并发限制
						if(ind < _this.distanceMark.length-1){
							let pos = [
								{ latitude: _this.distanceMark[ind].latitude, longitude: _this.distanceMark[ind].longitude },
								{ latitude: _this.distanceMark[ind+1].latitude, longitude: _this.distanceMark[ind+1].longitude }
							]
							let subInd = ind
							subInd++
							setTimeout(()=>{
								_this.getDirection(pos, subInd)
							},300)
						}
					}
				})
			},
			//  点击标注点，调用第三方地图查看规划路线
			markertap(e){
				this.markers.map(item => {
					if(item.id == e.detail.markerId){
						uni.openLocation({
							latitude: item.latitude,
							longitude: item.longitude,
							success: function () {
								
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map-container {
		width: 100%;
		height: 100vh;
	}
</style>
