<template>
	<view class="orderTruck content_box">
		<view class="location" style="padding: 0 32rpx 24rpx">
			<bs-customCell label="当前位置 :" :value="locationInfo.address" labelCol="3" wrapCol="8">
				<view slot="right-icon" class="flex_center">
					<view v-if="isLocation" class="t-icon t-icon-location" @click="getUserSetting" />
					<u-loading-icon color="#2E75E6" size="40" mode="semicircle" v-else />
				</view>
			</bs-customCell>
		</view>
		<view class="mapBox" style="padding: 16rpx 32rpx">
			<map id="myAMap" style="width: 100%;min-height: 150rpx;" :show-location='true'
				:markers="locationInfo.markers" :longitude="locationInfo.longitude" :latitude="locationInfo.latitude">
			</map>
			<!-- <view class="operation-btns flex">
				<button class="common_btn" @click="onNavSign">上报</button>
			</view> -->
		</view>
		<!-- <view class="scanQR flex_center flex_sb">
			<bs-autoInput placeholder="右侧扫码或输入单号" autoApi='/api/query/choice.tm.TransitType/action/auto_choice'
				@onSearch='onSearch' disabled style='flex-grow: 1' />
			<u-icon name="scan" color="#3070FF" size="48" @click="onScanQR" />
		</view> -->
		<view class="order-content">
			<view class="orderNo flex_center">
				<view class="t-icon t-icon-order" style="margin-right: 16rpx;" />
				订单号: {{orderInfo['orderNo'] || ''}}
			</view>
			<u-line style="margin: 20rpx 0;" />
			<view class="stations">
				<view class="start-station flex_center">
					<view class="t-icon t-icon-start-sddress" />
					{{orderInfo['originalAddress.name'] || '暂无'}}
				</view>
				<view class="end-station flex_center">
					<view class="t-icon t-icon-end-sddress" />
					{{orderInfo['destinationAddress.name'] || '暂无'}}
				</view>
			</view>
			<button class="order-delete" @click="onNavSign">上报</button>
		</view>
	</view>
</template>

<script>
	const getUserLocation = require('../../mixins/getUserLocation')
	import { OROrderReleaseDetail } from "../../api/apiList.js"
	import { TokenPrefix } from '../../publicConfig/config.js'
	export default {
		mixins: [getUserLocation],
		data() {
			return {
				orderInfo: '',
			}
		},
		onLoad: function(options) {
			const _this = this	
			let queryUrl = decodeURIComponent(options.q); // 获取到二维码原始链接内容	
			const time = setInterval(() => {
				let XSRFToken = uni.getStorageSync(`${TokenPrefix}_XSRFToken`)
				if (XSRFToken) {
					clearInterval(time)
					_this.initMapService() //初始化地图及JSSDK
					_this.onReloadMap()
					if (queryUrl != 'undefined') {
						// const orderNo = _this.getUrlValue(queryUrl, 'orderNo')
						const orderNo = 'OR' + queryUrl.split('OR')[1]
						_this.getOrderMovement(orderNo)
					}else if(options.orderNo){
						_this.getOrderMovement(options.orderNo)
					}				
				}
			}, 1000);
		},

		methods: {

			//截取url中的参数
			getUrlValue(url, kValue) {
				let reg = /([^?&=]+)=([^?&=]+)/g,
					obj = {},
					str = url;
				url.replace(reg, function() {
					obj[arguments[1]] = arguments[2];
				})
				for (var keyName in obj) {
					if (keyName == kValue) {
						return obj[keyName] || '';
						// break;
					}
				}
				return ''
			},

			//更新地图
			onReloadMap() {				
				setTimeout(() => {
					this.getUserSetting()
					// #ifdef H5
					const timer = setInterval(() => {
						const { MapIns, userLocation } = getApp().globalData
						const { latitude, longitude } = userLocation
						if(MapIns && latitude){
							this.initPageMap()
							clearInterval(timer)	
						}
					}, 1000);					
					// #endif		
				}, 500)
			},

			//初始化地图
			initPageMap() {
				const { MapIns, userLocation } = getApp().globalData
				const { latitude, longitude } = userLocation
				this.map = new MapIns.Map('myAMap', {
					center: [longitude, latitude], //中心点坐标
					zoom: 16
				});
				// 构造矢量圆形,如签到范围, 项目根据需要自行添加
				const circle = new MapIns.Circle({
					center: new MapIns.LngLat(longitude, latitude), // 圆心位置
					radius: 100, //半径
					strokeColor: "#F33", //线颜色
					strokeOpacity: 1, //线透明度
					strokeWeight: 3, //线粗细度
					fillColor: "#ee2200", //填充颜色
					fillOpacity: 0.35 //填充透明度
				});
				// 构造点标记
				const marker = new MapIns.Marker({
					position: [longitude, latitude],
					anchor: 'bottom-center'
				});
				this.map.add([marker]); //添加多个覆盖物[circle, marker]
			},

			// 点击扫码
			onScanQR() {
				// #ifdef H5
				const isWxBrowser = getApp().isWxBrowser()
				if (isWxBrowser) {
					this.$jwx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: (res) => {
							const orderNo = res.resultStr;
							this.getOrderMovement(orderNo)
						},
						fail: (err) => {
							uni.showToast({
								title: '扫码失败 !',
								icon: 'none',
								duration: 3000
							})
						}
					})
				}
				// #endif

				// #ifdef MP
				uni.scanCode({
					success: (res) => {
						let orderNo = res.result
						this.getOrderMovement(orderNo)
					},
					fail: (err) => {
						uni.showToast({
							title: '扫码失败 !',
							icon: 'none',
							duration: 3000
						})
					}
				})
				// #endif			
			},

			//单号输入查询
			onSearch(orderNo) {
				this.getOrderMovement(orderNo)
			},

			//获取订单信息
			async getOrderMovement(orderNo) {
				const orderInfo = await this.getAsyncData(orderNo)
				this.orderInfo = orderInfo
			},
			getAsyncData(orderNo){				
				return new Promise((reslove, reject) => {
					const reqData = {
						"args": {
							"pageNum": 1,
							"pageSize": 100,
							"restrictions": [{
								"field": 'orderNo',
								"type": "EQ",
								"value": orderNo
							}]
						}
					}
					OROrderReleaseDetail(reqData).then(res => {
						const newDatas = res.data.data.datas || []												
						reslove(newDatas[0] || {})
					})
				})
			},
			onNavSign() {
				const orderId = this.orderInfo['id']
				uni.navigateTo({
					url: `/subpkg/reportOrder/reportOrder?orderId=${orderId}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.orderTruck {
		font-size: 28rpx !important;
		background-color: #F3F3F3;

		.mapBox,
		.location {
			background-color: #ffff;
		}

		.scanQR {
			margin: 32rpx 32rpx 0;
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			background: #ffff;

			/deep/.uicon-scan {
				margin-left: 30rpx;
			}
		}

		.operation-btns .common_btn {
			width: 30%;
		}

		.order-content {
			margin: 32rpx;
			padding: 16rpx 20rpx;
			border-radius: 30rpx;
			background-color: #fff;
			// flex-grow: 1;
			position: relative;

			.orderNo {
				padding: 10rpx 0 26rpx;
				font-weight: bolder;
			}

			.stations {
				margin-top: 24rpx;
				margin-bottom: 32rpx;

				.start-station,
				.end-station {
					margin: 30rpx 0;
					font-size: 30rpx;
					font-weight: bolder;

					.t-icon {
						margin-right: 16rpx;
					}
				}
			}

			.order-delete {
				width: 80%;
				height: 96rpx;
				line-height: 96rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 44rpx;
				box-shadow: 1rpx 3rpx 12rpx 0px rgba(0, 0, 0, 0.04);
				background: linear-gradient(90deg, #2E75E6 0%, #5E58EE 100%);
				// position: absolute;
				// bottom: 16rpx;
				margin-top: 50rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>