<template>
	<view >

		<view class="content-top-con">
			<view class="content-img" @click="returnlog">
				<image src="@/static/images/xiangyou.png" mode=""></image>
			</view>

			<view class="">
				订单信息
			</view>
		</view>
		<view class="container-content">
			<view class="container-content-left">
				<view class="content-left-one">
					<!-- <view ref="mapContainer" class="map-container"></view> -->
					<!-- 	<map :latitude="latitude" :longitude="longitude" show-location class="map-container" scale='12'
						:polyline="polyline" :markers='markers'><cover-image class="map_btn" @tap="getoption()"
							src="@/static/images/DH.png">
						</cover-image></map> -->
					<a-map-walking :startPoint="startPoint" :endPoint="endPoint" @sbai='onshibai'
						style="width: 100%;height: 265rpx;"></a-map-walking>
					<view class="walking-img">
						<image src="@/static/images/DH.png" mode="aspectFit" @click="getoption()"></image>
					</view>
					<view class="left1" v-if="lisobj.logistics">
						<view class="leftdd"></view>
						<view class="leftdd1">起点：{{lisobj.logistics.shop_address}}</view>
					</view>

					<view class="left1" v-if="lisobj.logistics">
						<view class="leftdd2"></view>
						<view class="leftdd1">终点：{{lisobj.logistics.receiver_address}}</view>
					</view>


				</view>

				<view class="btn" @click="openCamera(lisobj.logistics)" v-if="lisobj.logistics">
					<view class="btn1">


						<image src="@/static/images/er.png" mode=""></image>
					</view>
					<view class="btn2"> 扫码取货</view>
				</view>
			</view>


			<scroll-view scroll-y="true" style="height: 400rpx;overflow: hidden;">
				<view class="">
					<view class="container-content-right" v-if="lisobj.logistics">
						<view class="content-right-two" v-if="lisobj.logistics">
							<view class="two-lefta">
								订单号信息：
							</view>
							<view class="two-leftb">
								订单编号：{{lisobj.logistics.order_sn}}
							</view>
							<view class="two-leftb">
								商户名称：{{lisobj.logistics.shop_name}}
							</view>

							<view class="two-leftb">
								店铺地址：{{lisobj.logistics.shop_address}}
							</view>

							<view class="two-leftb">
								联系电话：{{lisobj.logistics.shop_phone }}
							</view>

						</view>

						<view class="content-one">

							<view class="content-one-con">
								<view style="margin-bottom: 10rpx;">物流信息:</view>
								<view>用户名称:{{lisobj.logistics.receiver_name}}</view>
								<view>联系方式:{{lisobj.logistics.receiver_phone}}</view>
								<view>联系地址:{{lisobj.logistics.receiver_address}}</view>
								<view>下单时间:{{lisobj.logistics.create_time}}</view>

							</view>

						</view>


					</view>
					<view class="container-content-right" v-if="lisobj.logistics">

						<view class="content-one">

							<view class="shop-content">
								<view class="shop-content-a">
									<view class="shop-content-a1">商品信息：</view>


								</view>
								<view class="shop-list">

									<view class="shop" v-for="(items,j) in lisobj.product" :key="j">
										<view style="display: flex;">
											<view class="shop-img">
												<image :src="items.goods_pic" mode="aspectFit"></image>
											</view>
											<view class="container-txt">
												<text class=" centered-multi-line shop-txt">
													{{ items.goods_name }}</text>
											</view>
										</view>
										<view style="line-height: 34rpx;">X{{ items.product_num}}</view>
									</view>

								</view>




							</view>
							<view class="shop-botxt">
								请详细核对订单信息。 <text
									style="margin-left: 50rpx;color: #0022C7;">共计：{{ lisobj.product.length }}件</text>
							</view>
						</view>


					</view>

				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		detail,
		takeGoods
	} from '@/api/oa.js'
	const ttAMapNavi = uni.requireNativePlugin('TT-AMapNavi');
	import AMapWalking from "@/components/a-map-walking.vue";
	export default {
		props: {
			type: ''
		},
		components: {
			AMapWalking
		},
		data() {
			return {

				lisobj: [],
				page_no: 1,
				page_size: 1,
				keyword: '',
				latitude: 39.90469,
				longitude: 116.40717,
				// 标记点

				// markers: [ // 商家
				// 	{
				// 		id: 1,
				// 		latitude: undefined,
				// 		longitude: undefined,
				// 		width: 30,
				// 		height: 30,
				// 		iconPath: '../../static/img/logistics/SJ.png', //显示的图标        
				// 	},
				// 	// 骑手
				// 	{
				// 		id: 2,
				// 		latitude: undefined,
				// 		longitude: undefined,
				// 		width: 30,
				// 		height: 30,
				// 		iconPath: '../../static/img/logistics/QS.png', //显示的图标        
				// 	}
				// ],
				startPoint: [],
				endPoint: [],
				// // 路线数据
				// polyline: [{
				// 	points: [],
				// 	color: "#FF0000DD",
				// 	width: 3
				// }]
			}
		},


		mounted() {

			this.getlist(this.type)
			this.getLocation()


			// this.$refs.globalPopup.open()
		},

		methods: {

			//返回
			returnlog() {

				this.$emit('outfun', '1')
			},
			mapUpdated(e) {
				console.log('Map updated:', e);
				// 在地图更新后，可以根据用户选择的起点和终点，调用地图服务的规划路线接口，获取路线数据并更新polyline和markers
			},
			//监听失败
			onshibai(e) {
				if (e == 1) {
					uni.showToast({
						title: '路线规划失败',
						icon: none
					})
				}
			},



			//导航
			getoption() {

				// 传入高德地图key
				ttAMapNavi.initParams({
					androidKey: 'bbf571cadf2782f69f0eb373d516b4e0',
					iOSKey: ''
				});
				// 开始导航，传入的坐标均为高德坐标系
				ttAMapNavi.startNavi({
					// 起点（只支持传入一个），选填，不传使用当前位置
					startPoints: [{
						name: '起点名称',
						latitude: this.startPoint[1],
						longitude: this.startPoint[0]
					}],
					// 终点（只支持传入一个）
					endPoints: [{
						name: '终点名称',
						latitude: this.endPoint[1],
						longitude: this.endPoint[0]
					}],
					// 途径点（最多支持三个），选填
					wayPoints: [],
					// 驾车路径规划策略
					drivingStrategy: 10,
					// 是否直接进入导航界面（跳过路径规划页面）
					naviDirectly: true,
					// 导航组件的主题皮肤类型
					themeType: 1
				});

				// uni.navigateTo({
				// 	url: '/pages/submap/index?task_id=' + this.type
				// })

				// console.log(this.lisobj.logistics.shop_lat, this.lisobj.logistics.shop_long)
				// if (this.lisobj.logistics.shop_lat && this.lisobj.logistics.shop_long) {

				// uni.openLocation({
				// 	latitude: Number(this.lisobj.logistics.shop_lat),
				// 	// 传入你要去的经度
				// 	longitude: Number(this.lisobj.logistics.shop_long),
				// 	address: this.lisobj.logistics.receiver_address,
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// })
				// }

				// uni.openLocation({
				// 	latitude: Number(this.lisobj.logistics.shop_lat),
				// 	// 传入你要去的经度
				// 	longitude: Number(this.lisobj.logistics.shop_long),
				// 	address: this.lisobj.logistics.receiver_address,
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// })

				// let that = this;
				// uni.getSystemInfo({
				// 	success(e) {
				// 		if (e.platform === 'ios') {
				// 			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[that.markers.length-1].latitude}&dlon=${that.markers[that.markers.length-1].longitude}&dname=${that.lisobj.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('启动出错')
				// 				}

				// 			});

				// 		}
				// 	}
				// })

			},

			//获取定位
			async getLocation() {

				uni.getLocation({
					type: 'gcj02',
					timeout: '1000',
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						// this.markers.unshift({
						// 	latitude: Number(res.latitude),
						// 	longitude: Number(res.longitude),
						// 	iconPath: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/zhongdian.png', // 起点图标路径
						// 	width: 30,
						// 	height: 30
						// })
						this.startPoint = [Number(res.longitude), Number(res.latitude)]
						// this.markers[0].latitude = Number(res.latitude)
						// this.markers[0].longitude = Number(res.longitude)
						// this.polyline[0].points.unshift({
						// 	latitude: Number(res.latitude),
						// 	longitude: Number(res.longitude),
						// })


					},
					fail: (res) => {
						console.log(res)

					}
				});
			},

			//提取商品
			getDocumentListApi(item, oredr) {

				let data = {
					id: item.id,
					order_id: item.order_id,
					order_sn: oredr
				}



				takeGoods(data).then(res => {

					// Toast(res.msg)
					if (res.code == 1) {

						const subNVue = uni.getSubNVueById('concat'); // 通过 id 获取 nvue 子窗体
						subNVue.show('none', 1000); // 打开 nvue 子窗体
						setTimeout(() => {
							this.$emit('outfun', '1')
						}, 1500)

					}
				})
			},
			// 打开相机
			openCamera(item) {
				console.log(item)
				uni.scanCode({
					success: (res) => {
						this.getDocumentListApi(item, res.result)

					}
				});

			},
			resultsaoma() {

			},
			async getlist(id) {
				detail({
					id: id
				}).then(res => {

					if (res.code == 1) {
						this.lisobj = res.data

						if (res.data.logistics.shop_lat || res.data.logistics.shop_long) {

							// this.markers[1].latitude = Number(res.data.logistics.shop_lat)
							// this.markers[1].longitude = Number(res.data.logistics.shop_long)
							// this.polyline[0].points.push({
							// 	latitude: res.data.logistics.shop_lat,
							// 	longitude: res.data.logistics.shop_long,
							// })
							this.endPoint = [Number(res.data.logistics.shop_long), Number(res.data.logistics
								.shop_lat)]

						}



					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content-top-con {
		display: flex;
		height: 35rpx;
		line-height: 35rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 9px 9px 9px 9px;
		font-size: 13rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 10rpx;

		.content-img {
			width: 22rpx;
			height: 22rpx;
			margin: auto 0;
			margin-right: 5rpx;



			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.popup-content {
		width: 308rpx;
		height: 220rpx;
		/* 根据需要调整弹窗内容的宽度 */
		background-color: #fff;
		/* 设置弹窗内容的背景色 */
		padding-top: 30rpx;
		/* 根据需要设置内边距 */
		border-radius: 9rpx 9rpx;
	}

	.popup-content-a {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
	}

	.popup-item {
		font-size: 13rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #0022C7;
		margin-bottom: 10rpx;
		/* 可根据需要调整项之间的间距 */
	}

	.container-top {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 24rpx 24rpx;

		.serch {
			width: 59rpx;
			height: 31rpx;
			line-height: 31rpx;
			border-radius: 15rpx 15rpx;
			opacity: 1;
			border: 1px solid #0022c7;
			text-align: center;
			font-size: 12rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #0022c7;

		}
	}

	.container-content {

		display: flex;
		justify-content: space-between;
		position: relative;
		padding-top: 10rpx;


	}

	.container-content-left {

		position: relative;

	}

	.content-left-one {

		width: 276rpx;
		height: 330rpx;
		background: #ffffff;
		box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
		border-radius: 15rpx 15rpx 15rpx 15rpx;

		margin-bottom: 10rpx;
		position: relative;

		.walking-img {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			bottom: 80rpx;
			right: 20rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.left1 {
		display: flex;

		font-size: 12rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;

		.leftdd {
			width: 12rpx;
			height: 12rpx;
			background: #40bc5e;
			border-radius: 50%;
			opacity: 1;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: 5rpx;
		}

		.leftdd2 {
			width: 12rpx;
			height: 12rpx;
			background: #fe7d32;
			border-radius: 50%;
			opacity: 1;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: 5rpx;
		}
	}

	.map-container {
		width: 100%;
		height: 254rpx;
		border-radius: 15rpx 15rpx 0 0;
	}

	.content-right-two {
		width: 256rpx;

		background: #ff7c32;
		border-radius: 12rpx 12rpx;
		margin-left: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		position: relative;

		.two-lefta {
			padding-left: 18rpx;

			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 12rpx;
			margin-bottom: 10rpx;


		}

		.two-leftb {
			padding-left: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 12rpx;

		}


	}

	.container-content-right {}

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

	.content-one {
		margin-left: 20rpx;
		width: 256rpx;

		background: #ffffff;
		box-shadow: 0px 3px 6px 1px rgba(51, 51, 51, 0.2);
		border-radius: 12px 12px 12px 12px;
		opacity: 1;
		margin-top: 10rpx;
	}

	.content-one-title {
		height: 53rpx;
		line-height: 53rpx;
		padding-left: 20rpx;
		background: #0022c7;
		border-radius: 12px 12px 0px 0px;
		font-size: 13rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}

	.content-one-con {
		border-radius: 12px 12px 12px 12px;
		background: #46BE61;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
		font-size: 12rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;


		view {}
	}

	.shop-content {

		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		background-color: #40bc5e;



	}

	.shop-content-a {
		display: flex;
		justify-content: space-between;

		margin-bottom: 10px;
	}

	.shop-content-a1 {
		font-size: 12rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #fff;
	}

	.shop-content-a2 {
		font-size: 12rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0022C7;
	}

	.shop-list {
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}

	.shop {
		display: flex;
		justify-content: space-between;
		font-size: 10rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #fff;

	}

	.shop-img {
		width: 34rpx;
		height: 34rpx;

		border-radius: 6px 6px 6px 6px;

		image {
			width: 34rpx;
			height: 34rpx;
			border-radius: 6px 6px 6px 6px;
		}
	}





	.container-txt {
		margin-left: 10rpx;
		width: 130rpx;
		/* 设置容器高度 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.centered-multi-line {
		text-align: left;
		/* 文本水平居中 */
		width: 100%;
		/* 宽度占满父容器 */
	}

	.shop-txt {
		display: inline-block;
		/* 转换为行内块元素 */
		white-space: normal;
		/* 允许自动换行 */
		word-break: break-all;
		/* 单词内断行 */
	}

	.shop-botxt {
		font-size: 12rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #737373;
		padding-left: 18rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
	}


	.btn {
		width: 276rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #0022c7;
		border-radius: 23rpx 23rpx;
		display: flex;



	}

	.btn1 image {
		width: 23rpx;
		height: 23rpx;

	}

	.btn2 {
		font-size: 12rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #ffffff;
	}

	.btn1 {
		width: 23rpx;
		height: 23rpx;
		margin-left: 100rpx;
		margin-top: 0rpx;
		margin-right: 10rpx;
	}
</style>