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

<script>
	import { getCleanWay } from '@/api/unclear.js'
	export default{
		data(){
			return{
				latitude: null,  //  纬度
				longitude: null,  //  经度
				markers: [
					// {
					// 	latitude: 34.211901,  // 雁塔区
					// 	longitude: 108.995039,
					// 	width: '60rpx',
					// 	height: '60rpx',
					// 	iconPath: '/static/store.png',
					// 	label: {
					// 		content: '文本111',
					// 		bgColor: '#fff'
					// 	}
					// }, {
					// 	latitude: 34.296789,
					// 	longitude: 108.971456,
					// 	width: '60rpx',
					// 	height: '60rpx',
					// 	iconPath: '/static/store.png',
					// 	label: {content:'文本1', bgColor: '#fff'}
					// }, {
					// 	latitude: 34.293145,  //  未央区政府
					// 	longitude: 108.946715,
					// 	width: '60rpx',
					// 	height: '60rpx',
					// 	iconPath: '/static/store-s.png',
					// 	label: {
					// 		content: '文本111',
					// 		bgColor: '#fff'
					// 	}
					// }, {
					// 	latitude: 34.313445,  //  灞桥区
					// 	longitude: 109.018233,
					// 	width: '60rpx',
					// 	height: '60rpx',
					// 	iconPath: '/static/store.png',
					// 	label: {
					// 		content: '文本111',
					// 		bgColor: '#fff'
					// 	}
					// }
				],
				polyline: null  //  路线
			}
		},
		onShow() {
			this.getLocation()
		},
		methods: {
			//  获取当前位置
			getLocation(){
				const _this = this
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						console.log(res.latitude,res.longitude)
						_this.latitude = res.latitude  //  纬度
						_this.longitude = res.longitude  //  经度
						_this.getCleanWay()  //  获取个人待清运清单
						// _this.onPolyline()
				    }
				})
			},
			// 
			getCleanWay(){
				getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
					if(res.status == 200){
						this.markers = []
						res.data.map(item => {
							this.markers.push({
								latitude: item.lat,
								longitude: item.lng,
								width: '60rpx',
								height: '60rpx',
								iconPath: '/static/store.png',
								label: {
									content: item.stationName || '--',
									bgColor: '#fff',
								}
							})
						})
						this.onPolyline()
					}
				})
			},
			//  连线
			onPolyline(){
				const _this = this
				//  连线需至少两个点
				if(_this.markers.length>0){
					_this.polyline = []
					_this.markers.map((item,index) => {
						_this.polyline.push({
							points: [
								{latitude: null, longitude: null},
								{latitude: null, longitude: null}
							],
							width: 4,
							color: '#'+(~~(Math.random()*(1<<24))).toString(16)
						})
						if(index==0){
							_this.polyline[index].points[0].latitude = _this.latitude
							_this.polyline[index].points[0].longitude = _this.longitude
							_this.polyline[index].points[1].latitude = item.latitude
							_this.polyline[index].points[1].longitude = item.longitude
						}else{
							_this.polyline[index].points[0].latitude = _this.markers[index-1].latitude
							_this.polyline[index].points[0].longitude = _this.markers[index-1].longitude
							_this.polyline[index].points[1].latitude = item.latitude
							_this.polyline[index].points[1].longitude = item.longitude
						}
					})
				}
			}
		}
	}
</script>

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