<template>
	<view>
		<image src="@/static/bg.png" mode="widthFix" class="bg" style="width: 100%;height: 928rpx;"></image>
		<view class="top" :style="{'padding-top': top+'px'}">
			<view class="xuzou" @click="fanhui">
				<uni-icons type="left" size="22" style="margin-left: 25rpx;"></uni-icons>
				<text class="title">人脸录入</text>
			</view>
		</view>
		<view class="content" :style="{'top': (top+44)+'px'}">
			<view class="xinxirl">
				<view class="xinxirl1">请录入人脸</view>
				<view class="xinxirl2">本店需刷人脸进店，请点击拍摄提前录入人脸哦!</view>
				<view class="xinxirl3">
					<image class="xinxirl3img" src="@/static/相机.png" mode=""></image>
				</view>
				<view class="xinxirl4">拍摄</view>
			</view>
			<view class="fot">
				<view class="tg" @click="previous">跳过</view>
				<view class="ps" @click="pais">拍摄</view>
			</view>
			
			<uni-popup ref="popup" background-color="#fff" :mask-click='false'>
				<view class="imgCropper">
						<!-- <button @click="chooseImage">选择图片</button> -->
						<view style="text-align:center;">
							<image mode="widthFix" :src="path" @click="chooseImage"/>
						</view>
						<ksp-cropper  :width="10" :height="10" :maxWidth="500" :maxHeight="500" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
				</view>
				<view class="qudbtn" @click="qudbtn">确定</view>
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				url: "",
				path: "",
				yrenlianlist:[],
				jqrllist:[],
				userxixin:{}
			}
		},
		onLoad() {
			this.top = uni.getSystemInfoSync().statusBarHeight
			this.memberInfo()
		},
		methods: {
			fanhui(){
				uni.navigateBack({delta:1})
			},
			memberInfo() {
				this.$api.memberInfo().then(res => {
					this.userxixin = res.data
					console.log('this.userxixin',this.userxixin);
					if(this.userxixin.face_id!=0){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				})
			},
			pais(){
				// this.$refs.popup.open('center')
				this.chooseImage()
			},
			qudbtn(){
				// this.$refs.popup.close('center')
				// var tjlist=[...this.yrenlianlist,...this.jqrllist]
				
					uni.uploadFile({
								url: that.ymurl+'/api/uploadFile',
								filePath: that.path,
								name: 'file',
								formData: {
									'user': 'test'
								},
								fail(err) {
									console.log(11,err)
								},
								success: (res) => {
									console.log('tjlist',JSON.parse(res.data));
									var data=JSON.parse(res.data)
									if(data.code==200){
										that.$api.memberFace({face_id:data.data.file_id}).then(res=>{
											if(res.code=='200'){
												uni.showToast({
													icon: "none",
													title: '上传成功',
													duration: 2000,
												});
												
												setTimeout(function(){
													uni.switchTab({
														url:'/pages/user/index'
													})
												},2000)
											}
										})
									}else{
										uni.showToast({
											icon: "none",
											title: data.msg,
											duration: 2000,
										});
									}
									
								}
							});
				
				
			},
			chooseImage() {
				const that = this;
				that.yrenlianlist=[]
				uni.chooseImage({
					count: 1,
					success: function(res) {
						uni.uploadFile({
							url: that.ymurl+'/api/uploadFile',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							fail(err) {
								console.log(11,err)
							},
							success: (res1) => {
								console.log('tjlist',JSON.parse(res1.data));
								var data=JSON.parse(res1.data)
								if(data.code==200){
									that.$api.memberFace({face_id:data.data.file_id}).then(res2=>{
										if(res2.code=='200'){
											uni.showToast({
												icon: "none",
												title: '上传成功',
												duration: 2000,
											});
											
											setTimeout(function(){
												uni.switchTab({
													url:'/pages/user/index'
												})
											},2000)
										}
									})
								}else{
									uni.showToast({
										icon: "none",
										title: data.msg,
										duration: 2000,
									});
								}
								
							}
						});
					},
					fail(err) {
						console.log(err)
							// that.$refs.popup.close('center')
					}
				});
			},
			onok(ev) {
				this.jqrllist=[]
				this.url = "";
				this.path = ev.path;
				this.jqrllist.push(this.path)
				console.log('this.path',this.path);
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			previous() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
		}
	}
</script>

<style scoped>
	.qudbtn{
		height: 100rpx;
		background: #F8A617;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(19,14,4,0.14);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-bottom: 50rpx;
	}
	.imgCropper{
		width: 750rpx;
		height: 1200rpx;
		position: relative;
	}
	.fot {
		display: flex;
		justify-content: space-around;
		position: fixed;
		left: 24rpx;
		bottom: 103rpx;
	}

	.tg {
		width: 330rpx;
		height: 100rpx;
		background: rgba(248, 166, 23, 0);
		border-radius: 50rpx;
		border: 1px solid #CCCCCC;
		text-align: center;
		line-height: 100rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
	}

	.ps {
		width: 330rpx;
		height: 100rpx;
		background: #F8A617;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(19, 14, 4, 0.14);
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-left: 42rpx;
	}

	.xinxirl3img {
		width: 170rpx;
		height: 144rpx;
		margin-top: 120rpx;
	}

	.xinxirl {
		text-align: center;
		margin-top: 150rpx;
	}

	.xinxirl2 {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #999999;
		margin-top: 49rpx;
	}

	.xinxirl1 {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 48rpx;
		color: #222222;
	}
	.xinxirl4 {
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
		margin-top: 35rpx;
	}
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		background: #f5f5f5;
	}
	.content{
		width: 100%;
		position: relative;
		left: 0;
		top: 0;
		z-index: 2;
	}
	.top {
		width: 100%;
		left: 0;
		z-index: 22;
		top: 0;
		height: 88rpx;
		overflow: hidden;
		position: fixed;
	}
	.top .xuzou{
		width: 100%;
		height: 88rpx;
		display: flex;
		position: fixed;
		align-items: center;
		position: relative;
		z-index: 23;
	}
	.top .hs{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.title {
		padding-left: 14rpx;
	}

	.mddz1img2 {
		width: 44rpx;
		height: 44rpx;
		float: right;
	}

	.mddz2 {
		margin-top: 32rpx;
	}

	.dz {
		margin-left: 17rpx;
	}

	.mddz1img1 {
		width: 22rpx;
		height: 27rpx;
	}

	.mddz1 {
		display: flex;
	}

	.mddz1img {
		width: 60rpx;
		height: 60rpx;
	}

	.mddz1wz {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #222222;
		margin-left: 21rpx;
		margin-top: 12rpx;
	}

	.mddz {
		width: 680rpx;
		height: 152rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(19, 14, 4, 0.08);
		border-radius: 20rpx;
		margin-top: 24rpx;
		padding: 20rpx 17rpx;
	}

	.mendian {
		position: absolute;
		top: 152rpx;
		left: 24rpx;
	}
</style>