<template>
	<view class="content">
		<view class="map">
			<map id="map" :markers='markers' :scale="scale" :enable-zoom="true" :polyline="polyline"
				style="width:100%;height: 100%;" :latitude="latitude" :enable-scroll="false"
				:longitude="longitude"></map>
		</view>
		<button @click="getDriverLine">叫我按钮</button>
	</view>
</template>

<script>
	import {
		getDetil
	} from "@/api/logistics.js"
	import {
		takeGoods
	} from "@/api/logistics.js"
	export default {
		data() {
			return {
				showPop: false,
				goodsDetil: undefined,
				scale: 17,
				latitude: 28.908854,
				longitude: 105.43639400000002,
				markers: [],
				polyline: [],
				// https://p4.itc.cn/images03/20200518/90137c12bbac485dbc5bb0fe9d8cf4bd.jpeg
				// https://t9.baidu.com/it/u=414099140,1072313909&fm=193
				// mark: [{
				// 		id: 0,
				// 		latitude: 28.908854,
				// 		longitude: 105.43639400000002,
				// 		iconPath: 'https://img2.baidu.com/it/u=3116155797,2219949885&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //显示的图标        

				// 		width: 40, //宽
				// 		height: 40, //高
				// 		title: '我在这里', //标注点名
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '我的位置', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '10',
				// 			bgColor: '#3274F9', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// 	{
				// 		id: 2,

				// 		latitude: 28.908447, //纬度
				// 		longitude: 105.439304,
				// 		//经度
				// 		iconPath: '../../static/img/contract/company.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '商家', //文本
				// 			color: 'white', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '10',
				// 			bgColor: '#3274F9', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},



				// ],

				// polyline: [{
				// 		points: [{
				// 			latitude: 28.908854,
				// 			longitude: 105.43639400000002,
				// 		}, {
				// 			latitude: 28.908447, //纬度
				// 			longitude: 105.439304,
				// 		}],
				// 		color: "#0091ff",
				// 		// dottedLine: true,
				// 		// colorList: true,
				// 		// dottedLine: true,
				// 		width: 15,
				// 		// arrowLine: true,
				// 		// colorList: true,
				// 		// colorList: true

				// 	}

				// ]


			}
		},
		methods: {
			confirm() {
				let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
				takeGoods({
					user_id: id,
					logistics_id: this.goodsDetil.logistics.id
				})
				this.showPop = false
			},
			/*
			地图相关
			*/
			// 路线规划
			getDriverLine() {
				const that = this;
				const key = "997c9a3d88154fa78f4d28bebc1dd84f";
				//起点坐标
				const origin = "105.43639400000002,28.908854";
				//给起点坐标一个图标
				this.startingPoint()
				//给终点坐标一个图标
				this.endPoint()
				//终点坐标
				const destination = "105.439304,28.908447";
				uni.request({
					// url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
					url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=${origin}&destination=${destination}`,
					success: (res) => {
						const data = res.data.data;
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								//将每一步的数据放到points数组中
								var poLen = steps[i].polyline.split(";");
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(",")[0]),
										latitude: parseFloat(poLen[j].split(",")[1]),
									});
								}
							}
							console.log(data.paths[0].steps[0].instruction)
							that.runningRoute = data.paths[0].steps[0].instruction;
							console.log('行驶路线-----------', that.runningRoute)
						}

						that.polyline = [{
							points: points,
							color: "#0091ff",
							dottedLine: true,
							width: 15,
							arrowLine: true,
							colorList: true,
						}, ];
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},
			// 规划路线的时候给起点一个marker，
			startingPoint() {
				let point = [{
					id: 1,
					width: 40,
					height: 40,
					latitude: 28.908854,
					longitude: 105.43639400000002,
					iconPath: "https://p4.itc.cn/images03/20200518/90137c12bbac485dbc5bb0fe9d8cf4bd.jpeg",
					anchor: {
						x: 0.5,
						y: 1,
					},
				}, ];
				this.markers = this.markers.concat(point);
			},
			// 规划路线的时候给终点一个marker，
			endPoint() {
				let point = [{
					id: 2,
					width: 40,
					height: 40,
					latitude: 28.908447, //纬度
					longitude: 105.439304,
					//经度
					iconPath: 'https://t9.baidu.com/it/u=414099140,1072313909&fm=193',
					anchor: {
						x: 0.5,
						y: 1,
					},
				}, ];
				this.markers = this.markers.concat(point);
			},

			// 地图结束




		},
		onLoad(options) {
			// getDetil({
			// 	logistics_id: options.id
			// }).then(res => {
			// 	this.goodsDetil = res.data
			// 	console.log(this.goodsDetil)
			// })
		},
		// onShow() {
		// 	let that = this
		// 	// uni.getLocation({
		// 	// 	type: 'wgs84',
		// 	// 	success: function(res) {
		// 	// 		that.mark[0].latitude = res.latitude
		// 	// 		that.mark[0].longitude = res.longitude
		// 	// 		console.log(that.mark[0])
		// 	// 		console.log(res)

		// 	// 	}
		// 	// });
		// }
	}
</script>

<style lang='scss' scoped>
	.map {
		height: 40vh;
		width: 100vw;

	}

	.custom-style {
		width: 100%;
		background-color: red;
		border: none;
		color: white;
		height: 90rpx;
		line-height: 90rpx;
	}

	.order_info {
		height: auto;
		background-color: white;
		border-radius: 6vw 6vw 0 0;
		transform: translateY(-5vh);
		padding: 5vh 3vw;
		box-sizing: border-box;

		.tit {
			font-weight: bold;
			font-size: 35rpx
		}

		.tit_a {

			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 35rpx
		}

		.total {
			text-align: right;
			color: #3274F9;
			font-weight: bold;
			font-size: 32rpx;
			margin: 20rpx 0;
		}

		.store_name {
			color: #999999;
			margin: 18rpx 0;
		}

		.store_time {
			color: #999999;
			padding: 0 0 20rpx 0;
			border-bottom: 1px solid #999999;
			margin-bottom: 20rpx;
		}

		.info {
			margin: 10rpx 0;

		}

		.pro_info {
			display: flex;
			justify-content: space-between;
		}


	}

	.goods_tit {
		display: flex;
		justify-content: space-between;
	}

	.icon {

		text-align: center;
		font-size: 50rpx;

		text {
			display: block;
			transform: rotate(90deg);
		}
	}
</style>