<template>
	<view v-if="step==1">
		<view class="scan_box">
			<image class="avatar_frame" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/morentouxiang.png" mode=""></image>
			<image class="scan_img" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/saomiao.png"></image>
			
		</view>
		<view class="start_view" @click="startAttestation(2)">
			<view class="start_but">
				开始认证
			</view>
		</view>
	</view>
	<view class="page-content" v-else-if="step==2">
	        <view class="containerV">
	           <view class="headerV">
	                <view class="top-tips1 font15">
	                    <view>请把脸移入圈内保持不动</view>
	                </view>
	               <!-- <view class="top-tips2">
	                    为了便于识别认证，请拍摄本人头像
	                </view> -->
	            </view>
	            <view class="contentV">
	                <view class="mark"></view>
	                <image v-if="tempImg" mode="widthFix" :src="tempImg" />
	                <camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera"
	                    flash="off" resolution='high' />
	                <view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
	            </view>
	            <view class="footerV">
	                <view style="width: 100%;">
	                    <view v-if="!tempImg" style="width: 100%;">
	                     <!--   <view class="privacyV">
	                            <view class="icon"></view>
	                            <view class="text">
	                                照片隐私<text @click="handleJumpSecurityClick">安全保障</text>中…
	                            </view>
	                        </view>
	                        <view class="bottom-tips-2">该照片仅作为你认证的凭证</view> -->
	                        <view class="take-photo-bgV">
	                            <!-- 图片上传   -->
	                            <!-- <view v-show="true" class="btn-change-upload" @click="handleChooseImage" ></view> -->
	                            <!--拍照-->
	                            <view class="btn-take-photo" @click="handleTakePhotoClick" ></view>
	                            <!-- 切换镜头 -->
	                            <view class="btn-change-camera" @click="handleChangeCameraClick" ></view>
	                        </view>
	                    </view>
	                    <view class="confirmV" v-else>
	                        <view class="btn-cancel" @click="handleCancelClick">
	                            取消
	                        </view>
	                        <view class="btn-ok" @click="handleOkClick">
	                            确定
	                        </view>
	                    </view>
	                </view>
	            </view>
	        </view>
	    </view>
</template>

<script>
	export default {
		name: 'index',
		components: {
		},
		data() {
			return {
				step:1,
				tipsText: '', // 错误文案提示
				tempImg: '', // 本地图片路径
				// BASE_API,
				cameraEngine: null, // 相机引擎
				devicePosition: false, // 摄像头朝向
				isAuthCamera: true, // 是否拥有相机权限
			}
		},
 
		onLoad(options) {
			this.initData()
		},
		mounted(){
		},
		methods: {
			//
			startAttestation(type){
				this.step=type;
			},
			// 初始化相机引擎
			initData() {
				this.handleChangeCameraClick();
				// console.log(1111)
				// const session = wx.createVKSession({
				//   track: {
				//     face: { mode: 1 } // mode: 1 - 使用摄像头；2 - 手动传入图像
				//   },
				// })
				// console.log(222)
				// // 摄像头实时检测模式下，监测到人脸时，updateAnchors 事件会连续触发 （每帧触发一次）
				// session.on('updateAnchors', anchors => {
				//   anchors.forEach(anchor => {
				//     console.log('anchor.points', anchor.points)
				//     console.log('anchor.origin', anchor.origin)
				//     console.log('anchor.size', anchor.size)
				//     console.log('anchor.angle', anchor.angle)
				//   })
				// })
				// console.log(333)
				// // 当人脸从相机中离开时，会触发 removeAnchors 事件
				// session.on('removeAnchors', () => {
				//   console.log('removeAnchors')
				// })
				
				// // 需要调用一次 start 以启动
				// session.start(errno => {
				//   if (errno) {
				//     // 如果失败，将返回 errno
				//   } else {
				//     // 否则，返回null，表示成功
				//   }
				// })
				// console.log(444)
				
				
				this.cameraEngine = wx.createCameraContext()
				const listener = this.cameraEngine.onCameraFrame((frame) => {
					if (this.tempImg) {
						return;
					}
					wx.createVKSession({
					  track: {
						plane: {mode: 3},
					  },
					  version: 'v2',
					  // gl, // WebGLRenderingContext
					})
				})
				
				
				// // #ifdef MP-WEIXIN
				// // 1、初始化人脸识别
				// wx.initFaceDetect()
				// // 2、创建 camera 上下文 CameraContext 对象
				// this.cameraEngine = wx.createCameraContext()
				// // 3、获取 Camera 实时帧数据
				// const listener = this.cameraEngine.onCameraFrame((frame) => {
				// 	if (this.tempImg) {
				// 		return;
				// 	}
				// 	// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
				// 	wx.faceDetect({
				// 		frameBuffer: frame.data,
				// 		width: frame.width,
				// 		height: frame.height,
				// 		enablePoint: true,
				// 		enableConf: true,
				// 		enableAngle: true,
				// 		enableMultiFace: true,
				// 		success: (faceData) => {
				// 			let face = faceData.faceInfo[0]
				// 			if (faceData.x == -1 || faceData.y == -1) {
				// 				this.tipsText = '检测不到人'
				// 			}
				// 			if (faceData.faceInfo.length > 1) {
				// 				this.tipsText = '请保证只有一个人'
				// 			} else {
				// 				const {
				// 					pitch,
				// 					roll,
				// 					yaw
				// 				} = face.angleArray;
				// 				const standard = 0.5
				// 				if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
				// 					Math.abs(yaw) >= standard) {
				// 					this.tipsText = '请平视摄像头'
				// 				} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
				// 					0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
				// 					face.confArray.rightEye <= 0.8) {
				// 					this.tipsText = '请勿遮挡五官'
				// 				} else {
				// 					this.tipsText = '请拍照'
				// 					// 这里可以写自己的逻辑了
				// 				}
				// 			}
				// 		},
				// 		fail: (err) => {
				// 			if (err.x == -1 || err.y == -1) {
				// 				this.tipsText = '检测不到人'
				// 			} else {
				// 				this.tipsText = err.errMsg || '网络错误，请退出页面重试'
				// 			}
				// 		},
				// 	})
				// })
				// 5、开始监听帧数据
				// listener.start()
				// #endif
			},
			// 切换设备镜头
			handleChangeCameraClick() {
				this.devicePosition = !this.devicePosition;
			},
			// 图片上传
			handleChooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album','camera'],
					success: (res) => {
						console.log(res,'打印res，哈哈哈哈哈')
						if (res.errMsg === 'chooseImage:ok') {
							uni.showLoading({
								title: '照片上传中...'
							})
							const tempFilePaths = res.tempFilePaths[0]
							  this.upLoad(res.tempFilePaths);
						}
					},
					fail: (res) => {
					},
				});
			},
            // 拍照点击
			handleTakePhotoClick() {
				if (this.tipsText != "" && this.tipsText != "请拍照") {
					return;
				}
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.camera']) {
							this.isAuthCamera = false
							uni.openSetting({
								success: (res) => {
									if (res.authSetting['scope.camera']) {
										this.isAuthCamera = true;
									}
								}
							})
						}
					}
				})
				this.cameraEngine.takePhoto({
					quality: "high",
					success: ({
						tempImagePath
					}) => {
						this.tempImg = tempImagePath
					}
				})
				console.log(this.tempImg,2121)
			},
			// 点击确定上传
			handleOkClick() {
                //  这里的 this.tempImg 是经过人脸检测后  拍照拿到的路径  
				this.upLoadOne(this.tempImg)
				uni.navigateBack({
					delta: 1
				});
			},
			upLoad(tempFilePaths) {
                // #  注意  这里上传图片拿到的tempFilePaths是一个数组啊
			    // 图片上传
			    uni.showLoading({
			        title: "上传中，请稍后...",
			    });
			    let proAll = [];
			    tempFilePaths.forEach((item) => {
					console.log(item,'打印item')
			        proAll.push(this.upLoadOne(item));
			    });
			    Promise.all(proAll).then((res) => {
			        // 上传完成
			        uni.hideLoading();
			    });
			},
			upLoadOne(imgPath) {
			    //  然后这里imgPath 传过来的是 要上传的临时本地图片的路径
                //  具体上传方法根据自己的请求方式   请求自己的接口
			},
			// 点击 - 取消上传
			handleCancelClick() {
				this.tempImg = ''
			},
			// 点击 - 人脸安全保障按钮
			handleJumpSecurityClick() {
				uni.showToast({
					icon: "none",
					title: "假装跳转人脸安全保障",
					duration: 2000,
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.scan_box{width: 200px;height: 200px;margin: 70px auto;border: 3px solid #009688;border-radius: 50%;background-color: #EEEEEE;
	display: flex;justify-content: center;
	}
	.avatar_frame{width: 100%;height: 100%;}
	.scan_img{height: 98px;padding-top: 14px;    position: absolute;width: 200px;}
	.start_view{display: flex;justify-content: center;padding-top: 20px;}
	.start_but{width: 116px;height: 34px;border-radius: 29px;background: #009688;align-items: center;justify-content: center;display: flex;}
	
	.page-content {
		width: 100%;
		height: 100%;
		.containerV {
			width: 100%;
			height: 100%;
			.headerV {
				.top-tips1 {
					margin-top: 60rpx;
					color: #FFFFFF;
					font-size: 36rpx;
					text-align: center;
				}
				.top-tips2 {
					margin-top: 20rpx;
					color: #00AAFF;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.contentV {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 400rpx;
				margin-top: 30rpx;
				.tipV {
					bottom: 30rpx;
					position: absolute;
					line-height: 90rpx;
					padding-left: 24rpx;
					padding-right: 24rpx;
					max-width: calc(100vw - 50rpx * 2);
					text-align: center;
					font-size: 30rpx;
					background: #000000;
					opacity: 0.75;
					color: #FFFFFF;
					border-radius: 16rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					z-index: 5;
				}
				.camera {
					width: 400upx;
					height: 400upx;
					border-radius: 50%;
					border: 3px solid #009688;
				}
				.mark {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					width: 750rpx;
					height: 100%;
					// background:deeppink;
					background-size: 750rpx 661rpx;
				}
				image {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 3;
				}
			}
  
			.footerV {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.privacyV {
					padding-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.text {
						font-size: 30rpx;
						color: #1C1C1C;
						text-align: center;
						line-height: 42rpx;
						margin-left: 15rpx;
						text {
							font-size: 30rpx;
							color: #00AAFF;
							text-align: center;
							line-height: 42rpx;
						}
					}
					.icon {
						width: 40rpx;
						height: 47rpx;
						background:green;
						background-size: 100% auto;
					}
				}
  
				.bottom-tips-2 {
					margin-top: 20rpx;
					color: #999999;
					text-align: center;
					font-size: 26rpx;
				}
				.take-photo-bgV {
					width: 100%;
					margin-top: 300rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.btn-take-photo {
						margin: 0rpx 80rpx 0rpx 80rpx;
						width: 196rpx;
						height: 196rpx;
						background: yellow;
						background-size: 100% auto;
					}
					.btn-change-upload {
						left: 130rpx;
						width: 80rpx;
						height: 80rpx;
						background: blue;
						background-size: 100% auto;
					}
					.btn-change-camera {
						right: 130rpx;
						width: 80rpx;
						height: 80rpx;
						background:red;
						background-size: 100% auto;
					}
				}
				.confirmV {
					margin: 200rpx 100rpx 0rpx 100rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					.btn-cancel {
						font-size: 32rpx;
						color: #1C1C1C;
					}
					.btn-ok {
						font-size: 32rpx;
						color: #00AAFF;
					}
				}
			}
		}
	}
</style>
