<template>
	<view>
		<map id="test_map" ref="map1" :style="'width: 100%; border-radius: 28rpx;height:'+height" :show-location="true"
			:longitude="map.longitude" :latitude="map.latitude" :polygons="polygons" :markers="markers"
			@updated="updated" :polyline="polyline" show-compass="ture" show-location="true" :controls="controls">
		</map>
		<!-- <button @click="graph()"> 绘制矩形</button> -->
	</view>
</template>



<script>
	import {
		routePost
	} from "@/api/company/path.js"
	export default {
		props: {
			height: {
				type: String,
				default: '713rpx'
			},
			isShow: {
				type: Boolean,
				default: true
			},
			getLocation: {
				type: Object,
				default: null,
			},
			starAddres: {
				type: Object,
				default: null,
			},
			isStar: {
				type: Boolean,
				default: false,
			},
			isEnd: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			starAddres(NewData) {
				if (NewData&&NewData.location) {
					let postion = NewData.location.split(',');
					// console.log(NewData, 'NewData');
					if (this.isStar) {
						this.endPoint(postion[1], postion[0], true);
					} else {
						this.startingPoint(postion[1], postion[0], true);
					}
				}
			},
			getLocation(NewData) {
				let _this = this;
				if (NewData != null) {
					// console.log("当前位置", this.getLocation);
					_this.map.longitude = NewData.longitude;
					_this.map.latitude = NewData.latitude;
					_this.startingPoint(NewData.latitude, NewData.longitude);
				}
			},
			isEnd(NewData) {
				if (NewData) {
					let data = this.markers.map(item => {
						return item.latitude+','+item.longitude
					})
					// this.path(data);
					// let data2 = [{
					// 		latitude: data[0].latitude.slice(0, data[0].latitude.length - 2) + 99,
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2) + 99,
					// 	},
					// 	{
					// 		latitude: data[0].latitude.slice(0, data[0].latitude.length - 2),
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2) + 99
					// 	},
					// 	{
					// 		latitude: data[0].latitude.slice(0, data[0].latitude.length - 2),
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2)
					// 	},
					// 	{
					// 		latitude: data[0].latitude,
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2),
					// 	},
					// ]
					let addres={
						"startPoint": data[0],
						"endPoint": data[1]
					}
					this.routePost(addres);
					
				}
			}
		},
		data() {
			return {
				mapContext: {},
				map: {
					longitude: "126.04684", //经度
					latitude: "42.68497", //纬度
				},
				form: {
					name: "",
					area: "",
					address: "",
					location: "",
				},
				runningRoute: "",
				polygons: [{
					points: [],
				}],
				polyline: [{
					// 每个点的经纬度
					points: [],
					// 颜色
					// color: "#000",
					// 宽度
					// width: 10,
					dottedLine: true,
					arrowLine: true,
					colorList: true,
				}, ],
				controls: [
					// {
					//   //在地图上显示控件，控件不随着地图移动
					//   id: 1, //控件id
					//   iconPath: "/static/c1.png", //显示的图标
					//   position: {
					//     //控件在地图的位置
					//     left: 15,
					//     top: 15,
					//     width: 50,
					//     height: 50,
					//   },
					// },
				],
				markers: [
					// {
					//   longitude: 118.769032,
					//   latitude: 31.975258,
					//   iconPath: "/static/c1.png",
					// },
				],
				startMarker: null
			};
		},
		created() {

		},
		mounted() {
			if (this.isShow) {

			} else {
				let that = this;
				var maps = uni.createMapContext("test_map", this).$getAppMap();
				maps.onclick = function(point) {
					console.log(that.isStar, 'that.isStar');
					console.log(that.isEnd, 'that.isEnd');
					if (that.isStar && that.isEnd) {
						console.log('清空啦');
						// that.path([]);
						that.graph([]);
						that.startingPoint(point.latitude, point.longitude);
						that.$emit('clearMarkers')
					} else if (that.isStar) {
						that.endPoint(point.latitude, point.longitude);

					} else {
						that.startingPoint(point.latitude, point.longitude);
					}
					that.$emit('isChange')
				};

			}
		},
		methods: {
			routePost(data){
				console.log(data,'参数');
				routePost(data).then(res=>{
					console.log(res,'获取到的坐标范围');
					let addres=res.data.map(items=>{
						return {
							latitude: items[0],
						    longitude: items[1],
						}
					})
					console.log(addres,'获取到的addres');
					this.graph(addres)
				})
			},
			updated() {
				console.log('更新完成了');
			},
			//绘制轨迹
			path(arrayData) {
				let polyline_obj = [{
					points: arrayData
				}];
				this.polyline = polyline_obj;
				// this.map.longitude = "116.478928"
				// this.map.latitude = "39.997761"
			},
			//绘制矩形
			graph(arrayData) {
				console.log(arrayData, 'arrayData');
				let polygons_obj = [{
					points: arrayData,
					fillColor: '#376af64d',
					width: 5,
					strokeColor: '#9BC2FC', //描边颜色
					strokeWidth: 1, //描边宽度
					zIndex: 100, //层级
				}]
				this.polygons = polygons_obj;
			},
			// 规划路线的时候给起点一个marker，
			startingPoint(latitude, longitude, is) {
				// console.log(latitude, longitude, '我是开始坐标');
				this.startMarker = {
					id: 1,
					width: 110,
					height: 156,
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/images/path/star.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				};
				this.markers = [this.startMarker];

				if (!is) {
					this.$emit('getAddres', latitude + ',' + longitude)
				}

			},
			// 规划路线的时候给终点一个marker，
			endPoint(latitude, longitude, is) {
				let point = [{
					id: 2,
					width: 82,
					height: 95,
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/images/path/end.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				}, this.startMarker];
				this.markers = point;
				// console.log(this.markers, 'this.markers')
				if (!is) {
					this.$emit('getAddres', latitude + ',' + longitude)
				}
			},
			setMap(res) {
				this.longitude = res.longitude;
				this.latitude = res.latitude;
				this.markers[0].longitude = res.longitude;
				this.markers[0].latitude = res.latitude;
			}
		}
	}
</script>

<style>

</style>
