<template>
	<view>
		<view v-if='showLoading'>
			<u-loading-page :loading="showLoading"></u-loading-page>
		</view>
		<view v-else>
			<view class="content">
				<u-toast ref="uToast"></u-toast>
				<view class="map">
					<map :class="mapClass" id="map" @markertap='mapFun' :enable-zoom="true" :polyline="polyline"
						:markers='markers' :scale="scale" style="width:100%;height: 70%;"
						:latitude="markers[0].latitude" :enable-scroll="true" :longitude="markers[0].longitude">
						<cover-image class="map_btn" @tap="test" src="../../static/img/logistics/DH.png">
						</cover-image>

					</map>
					<view class="map_address">
						<view style="display: flex;">
							<view style="flex-shrink: 0;margin-right: 16rpx;"><text class="cir"
									style="background-color: #40BC5E;"></text> 起点:</view>
							<view>{{nowAddress}}</view>
						</view>
						<view style="display: flex;">
							<view style="flex-shrink: 0;margin-right: 16rpx;"><text class="cir"
									style="background-color: #FF7C32;"></text>终点:</view>
							<view>{{goodsDetil.logistics.shop_address}}</view>
						</view>
					</view>
				</view>

				<view class="order_info">
					<view class="top">
						<view>
							订单号信息:
						</view>
						<view>订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}</view>
						<view>
							商户名称:&nbsp;&nbsp; {{goodsDetil.logistics.shop_name}}
						</view>
						<view @click.stop="callFn(goodsDetil.logistics.shop_phone)">
							联系电话:&nbsp;&nbsp; <u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
								color="#fff" size="22"></u-icon>{{goodsDetil.logistics.shop_phone}}
						</view>
						<view>
							店铺地址:&nbsp;&nbsp;{{goodsDetil.logistics.shop_address}}
						</view>
						<view style="margin-top: 10px;">
							订单备注:&nbsp;&nbsp;{{goodsDetil.logistics.mark}}
						</view>
					</view>
					<view class="mark">
						请详细核对订单信息
					</view>
				</view>
				<view class="order_info" style="background-color: #47BE62;">
					<view class="top">
						<view>
							物流信息:
						</view>
						<view>用户名称:&nbsp;&nbsp;{{fuzzyName( goodsDetil.logistics.receiver_name)}}</view>
						<view @click.stop="callFn(goodsDetil.logistics.shop_phone)">
							联系电话:&nbsp;&nbsp; <u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
								color="#fff" size="22"></u-icon>{{goodsDetil.logistics.shop_phone}}
						</view>
						<view>
							联系地址:&nbsp;&nbsp;{{goodsDetil.logistics.receiver_address}}
						</view>

						<view>
							下单时间:&nbsp;&nbsp;{{goodsDetil.logistics.create_time}}
						</view>
						<view class="pro_list">
							<view class="goods">
								<text>
									商品信息
								</text>
								<view class="goods-tit" style="align-items: center;"
									v-for="(item,index) in goodsDetil.product" :key="index">
									<u--image style="flex: 2;" radius='10' :showLoading="true" :src="item.goods_pic"
										width="100rpx" height="100rpx"></u--image>
									<text style="flex: 7;">{{item.goods_name}}</text>
									<text style="flex: 1;">X{{item.product_num}}</text>
								</view>
							</view>
						</view>

					</view>
					<view class="mark" style="display: flex; justify-content: space-between;">
						<text>请详细核对订单信息</text>
						<text style="color: #0122C7;">共计{{goodsDetil.product_count}}件商品</text>
					</view>
				</view>
				<view class="">

				</view>

				<view style="margin-top: 200rpx;height: 1px;">
					<!-- 565 -->
				</view>
				<view class="btn" v-if="!is_captain">
					<u-button @click="qrqodeFn" type="primary" style="background-color: #0122C7;border: 0;">
						<u-icon name="scan" color="white" size="30" style="margin-right: 10rpx;"></u-icon>
						扫码取货</u-button>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-overlay :show="showToast" @click="offMaskFn">
			<view class="warp">
				<view class="rect">
					<view class="cont">
						骑手送货完成
					</view>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import {
		getDetil
	} from "@/api/logistics.js"
	import {
		takeGoods
	} from "@/api/logistics.js"
	import {
		Toast
	} from "../../libs/uniApi";
	export default {
		data() {
			return {
				showToast: false,
				is_captain: 0,
				mapClass: 'custom-map',
				showLoading: true,
				showPop: false,
				goodsDetil: undefined,
				scale: 17,
				subNVue: null,
				nowAddress: "无",
				markers: [
					// 商家
					{
						id: 1,
						latitude: undefined,
						longitude: undefined,
						iconPath: '../../static/img/logistics/SJ.png', //显示的图标        
					},
					// 骑手
					{
						id: 2,
						latitude: undefined,
						longitude: undefined,
						iconPath: '../../static/img/logistics/QS.png', //显示的图标        
					}
				],
				polyline: []

			}
		},
		methods: {
			fuzzyName(name) {
				let length = name.length;
				let fuzzyChars = "*".repeat(length - 1);
				return name[0] + fuzzyChars;
			},
			callFn(num) {
				uni.makePhoneCall({
					phoneNumber: num
				});
			},
			// 获取位置
			// 位置
			locationFn() {
				let that = this
				//#ifdef APP
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: true,
					success: function async (res) {
						that.nowAddress = res.address.city + res.address.district + res.address.street + res
							.address.streetNum + res.address.poiName

						that.markers[1].latitude = res.latitude
						that.markers[1].longitude = res.longitude
						that.getDriverLine()
					}
				});
				//#endif
			},

			// 唤起高德
			test() {
				if (this.is_captain) return;
				let that = this;
				uni.getSystemInfo({
					success(e) {
						if (e.platform === 'ios') {
							// Toast('不支持');
							// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
							// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
							//（如urlschemewhitelist:["iosamap","baidumap"]）  
							plus.nativeUI.actionSheet({
								title: "选择地图应用",
								cancel: "取消",
								buttons: [{
									title: "高德地图"
								}]
							}, function(e) {
								if (e.index != 1) return;
								try {
									let url =
										`iosamap://viewMap?sourceApplication=applicationName&poiname=${that.goodsDetil.logistics.shop_name}&lat=${that.markers[0].latitude}&lon=${that.markers[0].longitude}&dev=0`;
									if (url != "") {
										url = encodeURI(url);
										plus.runtime.openURL(url, function(e) {
											plus.nativeUI.alert("您的手机没有安装高德地图");
										});
									}
								} catch (e) {
									console.log(e);
									Toast('暂不支持唤起地图')
								}
							})
						} else {
							plus.nativeUI.actionSheet({
								title: "选择地图应用",
								cancel: "取消",
								buttons: [{
									title: "高德地图"
								}]
							}, function(e) {
								if (e.index != 1) return;
								try {
									var packageName = 'com.autonavi.minimap';
									var main = plus.android.runtimeMainActivity();
									var packageManager = main.getPackageManager();
									var PackageManager = plus.android.importClass(packageManager)
									var packageInfo = packageManager.getPackageInfo(packageName,
										PackageManager.GET_ACTIVITIES);
									if (packageInfo) {
										var Uri = plus.android.importClass("android.net.Uri");
										var url =
											`amapuri://route/plan?sourceApplication=maxuslife+
                  		&sid=A&slat=36.702558&slon=116.876678&sname=我的位置&did=B&dlat=${that.markers[0].latitude}&dlon=${that.markers[0].longitude}&dname=${that.goodsDetil.logistics.shop_name}&dev=0&t=0`;
										var Intent = plus.android.importClass('android.content.Intent');
										var intent = new Intent();
										intent.setAction(Intent.ACTION_VIEW);
										intent.addCategory(Intent.CATEGORY_DEFAULT);
										var uri = Uri.parse(url);
										//将功能Scheme以URI的方式传入data  
										intent.setData(uri);
										intent.setPackage("com.autonavi.minimap");
										var main = plus.android.runtimeMainActivity();
										main.startActivity(intent);
									} else {
										// alert('未安装' + packageName + '')
										uni.showToast({
											title: `您的手机没有安装高德地图`,
											icon: 'none'
										})
									}
									console.log("唤醒高德线路规划")
								} catch (e) {
									console.log(e);
									Toast('启动出错')
								}

							});

						}
					}
				})
			},

			mapFun() {
				uni.openLocation({
					latitude: Number(this.goodsDetil.logistics.shop_lat),
					longitude: Number(this.goodsDetil.logistics.shop_long),
					address: this.goodsDetil.logistics.shop_address,
					name: this.goodsDetil.logistics.shop_name,
					scale: 15,
				});
			},

			getDriverLine() {
				const that = this;
				const key = "997c9a3d88154fa78f4d28bebc1dd84f";

				const origin = `${this.markers[1].longitude},${this.markers[1].latitude}`;

				const destination = `${this.markers[0].longitude},${this.markers[0].latitude}`;
				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]),
									});
								}
							}

							that.runningRoute = data.paths[0].steps[0].instruction;

						}
						that.polyline = [{
							points: points,
							color: "#0091ff",
							dottedLine: true,
							width: 30,

						}, ];
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},

			offMaskFn() {
				this.showToast = false
				this.subNVue.hide()

			},


			qrqodeFn() {
				let that = this
				console.log(6666)
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						that.takeGood(res.result)
					}
				});
			},
			// 取货{}
			takeGood(sn) {
				console.log(takeGoods)
				takeGoods({
					logistics_id: this.goodsDetil.logistics.id,
					order_id: this.goodsDetil.logistics.order_id,
					order_sn: sn
				}).then((res, err) => {
					this.showToast = true
					this.subNVue.show(300)
					setTimeout(() => {
						this.showToast = false
						this.subNVue.hide()
						uni.navigateBack()
					}, 1000)
				}).catch(err => {
					Toast(err.msg)
					// console.log(err, 65656)

				})

			},
		},
		onLoad(options) {
			// console.log()
			this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO")).is_captain
			getDetil({
				logistics_id: options.id
			}).then(res => {
				this.goodsDetil = res.data
				this.markers[0].latitude = res.data.logistics.shop_lat
				this.markers[0].longitude = res.data.logistics.shop_long
				this.locationFn()
				setTimeout(() => {
					this.showLoading = false
				}, 500)
			})
		},
		onShow() {
			this.subNVue = uni.getSubNVueById('map');
			this.subNVue.hide()
		}
	}
</script>

<style lang='scss' scoped>
	.custom-map /deep/ .polyline {
		stroke-width: 20px;
	}

	.content {
		padding: 2vh 3vw;
		background-color: #F6F7FC;
		height: 100vh;
		box-sizing: border-box;
	}

	.map {
		height: 40vh;
		border-radius: 2vw;
		overflow: hidden;

	}

	.map_address {
		background-color: white;
		padding: 20rpx 10rpx;

		.cir {
			display: inline-block;
			width: 2vw;
			height: 4vw;
			border-radius: 2vw;
			margin: 0 20rpx;
		}
	}

	.map_btn {
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 0px;
		right: 0;
		z-index: 9999999;
	}


	.order_info {
		border: none;
		background-color: #FF7C32;
		border-radius: 2vw;
		overflow: hidden;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		color: white;

		.top {
			padding: 1vw 3vw;

			view {
				margin: 10rpx 0;
			}

		}

		.mark {
			background-color: white;
			color: #A8A8A8;
			padding: 10rpx 20rpx;

		}

		.pro_list {
			display: flex;

			text {

				flex: 2
			}

			.goods {
				flex: 8;
				margin: 0;

				.goods-tit {
					margin: 0;
					display: flex;
					justify-content: space-around;

				}

			}
		}

	}

	.btn {

		position: fixed;
		bottom: 20rpx;
		width: 90vw;
		left: 50%;
		transform: translateX(-50%);

	}

	.rect {
		width: 455.61rpx;
		height: 210.28rpx;
		background-color: white;
		border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.cont {
			color: #0022C7;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 35.05rpx;
		}
	}

	.cover {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
	}
</style>