<template>
	<view class="home__main">
		<!-- 暂无信息 -->
		<view v-if="content==1">
			<view class="home__main-top">
				<view class="home__main-top-box">
					<view class="home__main-top-text home__main-top-text1">
						<p v-if="type==1">暂无巡更点信息~</p>
						<p v-else>正在跟踪巡更点信息~</p>
					</view>
				</view>
			</view>
			<view class="home-content">
				<image src="/static/bg2.png" mode=""></image>
				<view class="myRenew_main-text">
					<p v-if="type==1">请将手机贴至巡更点处~({{timeOutNum}}s)</p>
					<p v-else>请耐心等待片刻~</p>
				</view>
				<view class="myRenew_main-text1">
					<p>巡更点</p>
				</view>
			</view>
		</view>
		<!--  -->
		<view v-if="content==2">
			<view class="home__main-top">
				<view class="home__main-top-box">
					<view class="top-box-address">
						<u-icon name="map-fill" color="#fff" size="20"></u-icon>
						<p class="top-box-address-text">巡更点</p>
					</view>
					<view class="top-box-name">
						{{nfcPositionInfo.text|| '--'}}
					</view>
				</view>
			</view>
			<!-- <PatrolPoints :positionName='positionInfo.positionName' /> -->
			<view class="home-content">
				<image src="/static/bg4.png" mode=""></image>
				<view class="myRenew_main-text">
					<p class="myRenew_main-text3">已跟踪到巡更点信息 即将进行人证比对</p>
				</view>
				<view class="home-btn">
					<view class="btn">
						<u-button type="primary" shape="circle" @click="goCompare"
							color="linear-gradient(to top, #1677FF, #61C6FF)">人证比对
							{{ countDown ? `(${countDown}s)` :'' }} </u-button>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view v-if="content==3">
			<view class="home__main-top">
				<view class="home__main-top-box">
					<view class="top-box-address">
						<u-icon name="map-fill" color="#fff" size="20"></u-icon>
						<p class="top-box-address-text">巡更点</p>
					</view>
					<view class="top-box-name">
						{{nfcPositionInfo.text|| '--'}}
					</view>
				</view>
			</view>
			<view class="home-content">
				<image src="../../static/home-cord.png" mode=""></image>
				<view class="home-content-main">
					<view v-if="positionInfo.patrolStartTime" class="home-content-main-time">
						签到时间段：{{positionInfo.patrolStartTime}}~{{positionInfo.patrolEndTime}}
					</view>
					<view v-else class="home-content-main-time">
					</view>
					<view v-if="msg" class="content-main-1">
						{{msg}}
					</view>
					<view v-if='showSuccessText' class="content-main-img">
						{{msg ? "" :'签到成功'}}
						<view class="main-img-box">
							<image :src="msg ?'' : require('@/static/home-1.png') " mode=""></image>
						</view>
					</view>
					<view v-if="positionInfo.signTime" class="content-main-info">
						<view class="content-main-info-img">
							<image :src="positionInfo.photo" mode=""></image>
						</view>
						<view class="content-main-info-right">
							<view class="info-right-1">
								签到时间:
							</view>
							<view class="info-right-2">
								{{positionInfo.signTime}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="home__main-time">
				{{countDown1}}s 后返回
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getPosition,
		getCheckPositionSign
	} from '@/api/login.js'
	import NFCTool, {
		NFC_STATUS_ENUM
	} from '@/utils/nfcTool.js'
	import {
		intoFace_wxrlxf,
		getFace_wxrlxf
	} from '@/api/faceCheck/faceCheck.js'
	// import PatrolPoints from '@/components/PatrolPoints.vue'
	import {
		userInfo
	} from 'os';
	let app = getApp();
	export default {
		// components: {
		// 	PatrolPoints
		// },
		data() {
			return {
				userInfo: null,
				positionInfo: null,
				msg: false,
				content: 1,
				type: 1,
				countDown: 5, //人证比对倒计时
				countDown1: 10, //签到成功倒计时
				flag: '',
				timerId: null,
				timerId1: null,
				nfcPositionInfo: null, //根据NFC获取的数据
				isOpen: true,
				phone: '', //获取的照片
				showSuccessText: false,
				timeOutNum: 60, // 识别倒计时
				// doFaceCheckTit: '',
				// requestTit: '',
				// faceCheckTit: '',
			};
		},
		methods: {
			// 人证比对
			goCompare() {
				clearTimeout(this.timerId)
				this.countDown = 0
				const inputName = this.userInfo?.idName
				const inputIdcard = this.userInfo?.idNumber
				intoFace_wxrlxf(inputName, inputIdcard).then(() => {
					this.flag = 1
				}).catch(err => {})
			},
			//验证人脸
			async doFaceCheck() {
				const that = this
				const taskId = wx.getStorageSync('wx_dateCode');
				// taskId = '00-98765411111111121';
				if (!taskId) return;
				// try {
				const res = await getFace_wxrlxf('/api/next/doQueryFaceSuccess', 'get', {
					taskId: taskId
				});
				// this.faceCheckTit = app.globalData.faceCheckTit
				// this.requestTit = app.globalData.requestTit
				// this.doFaceCheckTit = 'res：' + res
				if (res.data && res.data.status) {
					that.content = 3
					that.phone = res.data.avatar
					this.handlePosition(that.phone)
					this.countDownFunc1()
				} else {
					wx.showModal({
						title: '提示',
						content: '未查询到认证结果,请重新认证!',
						showCancel: false,
					})
				}
				// } catch (e) {
				// this.doFaceCheckTit = 'err：' + e
				//TODO handle the exception
				// }

			},
			// 判断是否可以点位签到
			handleCheckPosition() {
				const res = {
					accountId: this.userInfo.accountId,
					appUserId: this.userInfo.appUserId,
					encryptionCode: this.nfcPositionInfo.id,
				}
				console.log(res, 66);
				getCheckPositionSign(res).then(res => {
					this.countDownFunc()
				}).catch(err => {
					if (err.code == 400) {
						uni.showModal({
							title: '提示',
							content: err.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.switchTab({
										url: "/pages/signIn/signIn"
									})
								}
							}
						})
					}
				})
			},
			// 点位签到
			handlePosition(phone) {
				this.urlTobase64(phone)
					.then(res1 => {
						const resolve = {
							accountId: this.userInfo.accountId,
							appUserId: this.userInfo.appUserId,
							encryptionCode: this.nfcPositionInfo.id,
							photo: res1
						}
						getPosition(resolve).then(res => {
							this.positionInfo = res.data
							this.showSuccessText = true
						}).catch(err => {
							if (err.code == 400) {
								this.positionInfo = err.data
								this.msg = err.msg
							}
						})
					})

			},
			// 倒计时
			countDownFunc() {
				let count = this.countDown;
				if (count > 0) {
					this.timerId = setTimeout(() => {
						count--;
						this.countDown = count;
						this.countDownFunc();
					}, 1000);
				} else {
					clearTimeout(this.timerId)
					this.goCompare()
				}
			},
			// 签到成功倒计时
			countDownFunc1() {
				let count = this.countDown1;
				if (count > 0) {
					this.timerId1 = setTimeout(() => {
						count--;
						this.countDown1 = count;
						this.countDownFunc1();
					}, 1000);
				} else {
					clearTimeout(this.timerId1)
					uni.switchTab({
						url: '/pages/signIn/signIn'
					})
				}
			},
			// 识别倒计时
			countDownFunc2() {
				let count = this.timeOutNum;
				if (count > 0) {
					this.timerId2 = setTimeout(() => {
						count--;
						this.timeOutNum = count;
						this.countDownFunc2();
					}, 1000);
				} else {
					clearTimeout(this.timerId2)
				}
			},
			// URL转base64
			urlTobase64(img) {
				return new Promise((resolve, reject) => {
					wx.downloadFile({
						url: img,
						success(res) {
							wx.getFileSystemManager().readFile({
								filePath: res.tempFilePath, //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: res => { //成功的回调
									// console.log('data:image/png;base64,' + res.data)
									resolve(res.data)
								}
							})
						}
					})
				})
			},
			// 回调
			NFCToolCallBack({
				status,
				tip,
				data
			}) {
				// console.log('NFCToolCallBack', status, tip, data)
				switch (status) {
					case NFC_STATUS_ENUM.INIT_ERROR:
						clearTimeout(this.timerId2)
						uni.showModal({
							title: '提示',
							content: tip,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/signIn/signIn'
									})
								}
							}
						})
						break;
					case NFC_STATUS_ENUM.READ_SUCCESS:
						this.nfcPositionInfo = data;
						this.content = 2
						clearTimeout(this.timerId2)
						this.handleCheckPosition()
						break;
					case NFC_STATUS_ENUM.TIMEOUT_ERROR:
						uni.showModal({
							title: '提示',
							content: 'NFC读取超时，是否重试?',
							success: res => {
								if (res.confirm) {
									this.timeOutNum = 60
									this.countDownFunc2()
									this.read()
								} else {
									uni.switchTab({
										url: '/pages/signIn/signIn'
									})
								}
							}
						})
						break;
					case NFC_STATUS_ENUM.READ_FAIL:
						uni.showToast({
							title: tip,
							icon: 'none',
							duration: 1000,
						})
						this.content = 1
						this.type = 1
						break;
					case NFC_STATUS_ENUM.READING:
						this.content = 1
						this.type = 2
						break;
					default:
						break;
				}
			},
			// 开始调用
			start() {
				this.nfcTool = new NFCTool(this.NFCToolCallBack, {
					timeOutNum: this.timeOutNum * 1000
				});
				this.read();
				// 读取倒计时
			},
			read() {
				this.nfcTool?.startDiscovery();
				this.nfcTool?.readData();
			},
			/**
			 * 注销 NFCAdapter
			 */
			destroy() {
				// 调用 js 文件里面的方法
				this.nfcTool?.stopDiscovery()
				this.nfcTool = null;
			}
		},
		onLoad() {
			this.start();
		},
		onHide() {
			this.destroy()
		},
		onUnload() {
			// 清除定时器
			clearTimeout(this.timerId);
			clearTimeout(this.timerId1)
			clearTimeout(this.timerId2)
			this.destroy()
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.flag === 1) {
				this.flag = 0;
				this.doFaceCheck();
			}
			if (this.content == 1 && this.type == 1) {
				this.countDownFunc2()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.home__main {
		position: relative;
		width: 100%;
		height: 100%;

		// 背景
		.home__main-top {
			height: 140px;
			background: #3D8EFE;
			border-bottom-left-radius: 8%;
			border-bottom-right-radius: 8%;

			.home__main-top-box {
				height: 80px;
				box-sizing: border-box;
				padding-left: 15px;
				padding-top: 35px;

				.home__main-top-text {
					font-weight: 700;
					font-size: 20px;
					line-height: 30px;
					color: #fff;
				}

				.home__main-top-text1 {
					text-align: center;
				}

				.top-box-address {
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					color: #fff;
					font-size: 16px;

					.top-box-address-text {
						margin-left: 10px;
					}
				}

				.top-box-name {
					font-weight: 700;
					font-size: 20px;
					line-height: 30px;
					padding-left: 25px;
					color: #fff;
				}
			}
		}

		.home-content {
			margin-top: -30px;
			width: 100%;
			height: 530px;
			margin-bottom: 20px;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.myRenew_main-text {
				position: fixed;
				top: 145px;
				height: 80px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1677FF;
				font-weight: 700;
				font-size: 24px;
			}

			.myRenew_main-text1 {
				position: fixed;
				top: 400px;
				right: 48px;
				// color: #57597C;
			}

			.myRenew_main-text3 {
				width: 70%;
				text-align: center;
			}

			.home-btn {
				display: flex;
				justify-content: center;
				width: 100%;
			}

			.btn {
				position: fixed;
				top: 550px;
				width: 80%;
				text-align: center;
			}

			.home-content-main {
				width: 100%;
				height: 515px;
				position: fixed;
				top: 113px;
				padding: 20px;
				box-sizing: border-box;
				// background-color: rgba(255, 255, 255, 0.8);
				// border-radius: 15px;
				// box-shadow: 0 0 5px #ccc;

				.home-content-main-time {
					height: 20px;
					font-weight: 500;
					font-size: 15px;
					line-height: 23px;
					color: #fff;
					text-align: center;
				}

				.content-main-img {
					height: 200px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-weight: 700;
					font-size: 24px;
					color: #1677FF;
					margin-top: 25px;

					.main-img-box {
						margin-top: 15px;
						width: 120px;
						height: 120px;

						image {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}

				.content-main-info {
					margin-top: 100px;
					height: 132px;
					display: flex;
					align-items: center;
					padding: 0 10px;
					border-radius: 5px;
					background-color: #fff;

					.content-main-info-img {
						width: 100px;
						height: 100px;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}

					.content-main-info-right {
						margin-left: 5px;

						.info-right-1 {
							font-weight: 500;
							font-size: 16px;
							line-height: 24px;
						}

						.info-right-2 {
							font-weight: 500;
							font-size: 20px;
							line-height: 30px;
						}
					}
				}

				.content-main-1 {
					height: 400px;
					text-align: center;
					font-weight: 700;
					font-size: 20px;
					line-height: 400px;
					color: #57597C;
				}

			}
		}

		.home__main-time {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #57597C99;
			font-weight: 500;
			font-size: 14px;
		}
	}
</style>