<template>
	<view class="signIn content_box">
		<view class="mapArea">

			<view class="page-header">
				<view class="page-header-orderNo flex_center">
					访问单号： {{formNumber}}
				</view>
			</view>
			<view class="location">
				<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" />
						<view v-else>
							<u-loading-icon color="#2E75E6" size="40" mode="semicircle"></u-loading-icon>
						</view>
					</view>
				</bs-customCell>
				<map id="myAMap" style="width: 100%;min-height: 150rpx;margin-top: 24rpx;" :show-location='true'
					:markers="locationInfo.markers" :longitude="locationInfo.longitude"
					:latitude="locationInfo.latitude">
				</map>
			</view>
		</view>
		<view class="safe">
			<view class="safeTitle">
				入厂安全须知
			</view>
			<view class="safeText">

				<u--textarea border="none" v-model="safeText" disabled autoHeight maxlength="-1"></u--textarea>
			</view>

		</view>
		<view class="detailFoot">
			<button @click="back">返回</button>
			<button @click="signIn" :disabled="canSignIn"
				:style="canSignIn?'opacity: .3;':'' ">{{signInBtnText}}</button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="success_info" @click="isSuccess=false">
			<u-popup v-model="isSuccess" :show="isSuccess" mode="center">
				<img src="../../static/img/icon/success.png" />
				<view style="font-size: 36rpx; font-weight: bolder; margin-bottom: 24rpx;">签到成功</view>
			</u-popup>
		</view>
		<view class="success_info" @click="isError=false">
			<u-popup v-model="isError" :show="isError" mode="center">
				<img src="../../static/img/icon/fail.png" />
				<view style="font-size: 36rpx; font-weight: bolder; margin-bottom: 24rpx;">签到失败</view>
				<view style="font-size: 28rpx;margin-bottom: 56rpx;">{{messageInfo}}</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	const getUserLocation = require('../../mixins/getUserLocation')
	import {
		SAFETY_INSTRUCTION
	} from '../../publicConfig/config.js'
	import {
		CreatSubscribeArrowDelivery,
		SubscribeFormSign
	} from "../../api/apiList.js"
	export default {
		mixins: [getUserLocation],
		data() {
			return {
				formNumber: "",
				safeText: "",
				canSignIn: true,
				signInBtnText: '',
				waitInterval: null,
				deliveryId: '',
				type: '',
				appFenceRadius: '',
				latitude: '',
				longitude: '',
				isSuccess: false,
				messageInfo: '',
				isError: false
			}
		},
		onLoad: function(options) {
			let data = JSON.parse(options.data)
			this.formNumber = data.formNumber
			this.deliveryId = data.deliveryId
			this.type = data.type
			this.safeText = SAFETY_INSTRUCTION
			this.appFenceRadius = data.appFenceRadius
			this.latitude = data.latitude
			this.longitude = data.longitude
			this.getUserSetting()
		},
		onReady: function(options) {
			// #ifdef H5
			this.initSignMap()
			// #endif
		},
		methods: {
			//初始化地图
			initSignMap() {
				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]
			},
			back() {
				uni.navigateBack()
			},
			waitButton() {
		
					let data = 10
					this.waitInterval = setInterval(() => {
						if (data === 0) {
							this.signInBtnText = `签到`
							this.canSignIn = false
							return clearInterval(this.waitInterval)
						}
					
						this.signInBtnText = `阅读${data}s后可签到`
						data--
					}, 1000)
				
				
			},
			signIn() {
				if (this.type === "delivery") {
					CreatSubscribeArrowDelivery({
						"args": {
							"selectedIds": [this.deliveryId],
							"additionalIds": null
						}
					}).then(res => {
						if (res.data.messageType === "success") {
							const data = {
								subscribeInfo: res.data.data
							}
							uni.hideToast()
							// this.isSuccess = true
							uni.redirectTo({
								url: `/subpkg/orderTime/orderTime?data=${JSON.stringify(data)}`,
							})
							// setTimeout(() => {
							// 	this.isSuccess = false
							// 	uni.redirectTo({
							// 		url: `/subpkg/orderTime/orderTime?data=${JSON.stringify(data)}`,
							// 	})
							// }, 3000)

						} else {
							uni.hideToast()
							this.isError = true
							this.messageInfo = res.data.message
							setTimeout(() => {
								this.isError = false
							}, 3000)
						}
					}).catch(err => {
						
						uni.hideToast()
						this.isError = true
						this.messageInfo = err.data.message
						
						setTimeout(() => {
							this.isError = false
						}, 3000)
					})
				} else {
					if (this.siteVerify(this.locationInfo)) {
						SubscribeFormSign({
							"args": {
								"selectedIds": [this.deliveryId],
							}
						}).then(res => {
							if (res.data.messageType === "success") {
								uni.hideToast()
								this.isSuccess = true
								setTimeout(() => {
									this.isSuccess = false
									uni.navigateBack()

								}, 3000)
							} else {
								uni.hideToast()
								this.isError = true
								this.messageInfo = res.data.message
								setTimeout(() => {
									this.isError = false
								}, 3000)
							}
						}).catch(err => {
							uni.hideToast()
							this.isError = true
							this.messageInfo = err.message
							setTimeout(() => {
								this.isError = false
							}, 3000)
						})
					}

				}


			},
			// 到站经纬度校验
			siteVerify(info) {
				let lo1 = info.longitude
				let la1 = info.latitude
				let lo2 = this.longitude
				let la2 = this.latitude
				console.log('当前经纬度：',this.longitude,this.latitude )
				console.log('预约单经纬度：',info.longitude,info.latitude )
				let fenceRadius = this.appFenceRadius
				let distance = this.distance(la1, lo1, la2, lo2)
				if (fenceRadius > 0) {
					if (+distance > fenceRadius) {
						uni.hideToast()
						this.isError = true
						this.messageInfo = `当前位置距离签到位置偏差${Math.round(+distance-fenceRadius)}千米`
						setTimeout(() => {
							this.isError = false
						}, 3000)
						return false
					} 
					if(Number.isNaN(Number(distance))){
						uni.hideToast()
						this.isError = true
						this.messageInfo = `无法获取当前设备位置信息`
						setTimeout(() => {
							this.isError = false
						}, 3000)
						return false
					}else {
						return true
					}
				} 
				else {
					return true
				}
			},
			// 计算两点之间距离
			distance(la1, lo1, la2, lo2) {
				let La1 = la1 * Math.PI / 180.0;
				let La2 = la2 * Math.PI / 180.0;
				let La3 = La1 - La2;
				let Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(
					Math.sin(Lb3 / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},
		},
		mounted() {
			this.waitButton()
		},
		destroyed() {
			if (this.waitInterval) {
				clearInterval(this.waitInterval)
			}
		}
	}
</script>

<style lang="scss">
	.signIn {
		.page-header {
			padding: 40rpx 24rpx 0;
			border-radius: 0 0 32rpx 32rpx;
			background-color: #2E75E6;

			.page-header-orderNo {
				color: #2E75E6;
				padding: 30rpx 24rpx;
				background: linear-gradient(90deg, rgba(46, 117, 230, .1), rgba(46, 117, 230, .1));
				background-color: #EDEFFD;
				border-radius: 16rpx 16rpx 0 0;
				font-size: 28rpx;
			}
		}

		.location {
			padding: 8rpx 23rpx 24rpx 23rpx;
			margin: 0 24rpx;
			background-color: #FFFFFF;
			border-bottom-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;
		}

		.mapArea {
			position: sticky;
			background-color: #FAFAFA;
			top: 0;
			z-index: 100;
			padding-bottom: 24rpx;
		}

		.safe {
			padding: 0 24rpx;
			background-color: #FFFFFF;

			.safeTitle {
				color: #434343;
				font-size: 36rpx;
				font-weight: bolder;
				text-align: center;
				margin-top: 32rpx;
				margin-bottom: 24rpx;

			}

			/deep/.u-textarea {
				padding: 0;
			}

			/deep/.u-textarea--disabled {
				background-color: #FFFFFF;
			}
		}

		.detailFoot {
			position: sticky;
			display: flex;
			justify-content: space-between;
			bottom: 0;
			width: 100%;
			padding-bottom: 28rpx;
			background-color: #FFFFFF;
			padding-top: 24rpx;
			z-index: 100;

			button {
				width: 339rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #2E75E6;
				padding: 0 24rpx;
				border: 3rpx solid transparent;
				position: relative;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(90deg, #FAFAFA, #FAFAFA), linear-gradient(90deg, #2E75E6, #5E58EE);

				&:after {
					content: "";
				}

				&:last-child {
					background-image: linear-gradient(90deg, #2E75E6, #5E58EE), linear-gradient(90deg, #2E75E6, #5E58EE);
					color: #FFFFFF;
				}
			}

		}

		.success_info {
			opacity: 1;

			/deep/.u-popup__content {

				border-radius: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 620rpx;

				img {
					height: 120rpx;
					width: 120rpx;
					margin-bottom: 34rpx;
					margin-top: 60rpx;
				}
			}
		}

	}
</style>
