<template>
	<view class="bg">
		<image class="returnBack" src="/static/login/returnBack.png" @click="goBack(1,'/pages/login/login')"></image>
		<view class="content">
			<view class="text-area">
				<uni-forms :modelValue="formData" label-position="left" :labelWidth='90' :rules="confirmRules"
					ref="form" validate-trigger="bind" err-show-type="undertext">
					<uni-forms-item name="phone" required label="手机号">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone"
							placeholder="请输入注册使用的手机号"></uni-easyinput>
					</uni-forms-item>
					<view style="display: flex;flex-flow: row nowrap;">
						<uni-forms-item name="captcha" required label="验证码">
							<uni-easyinput type="number" :inputBorder="true" v-model="formData.captcha"
								placeholder="请输入六位验证码"></uni-easyinput>
						</uni-forms-item>
						<button class="captchaButton" @click="sendCaptcha()">发送验证码</button>
					</view>
					<uni-forms-item name="newPassword" required label="新密码">
						<uni-easyinput type="password" :inputBorder="true" v-model="formData.newPassword"
							placeholder="请输入密码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="confirmPassword" required label="确认密码">
						<uni-easyinput type="password" :inputBorder="true" v-model="formData.confirmPassword"
							placeholder="请确认新密码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item>
						<button class="confirmButton" @click="confirm('form')">确认</button>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<uni-popup ref="popupDialog" type="center">
			<view class="mcaptcha">
				<view style="padding: 30px 20px;text-align: center;">
					<canvas canvas-id="canvas" @click="updateImageCode" class="canvas"></canvas>
					<input class="ginput" v-model="graphicVerifyCode" placeholder="请输入验证码" />
					<button style="margin-top: 10px;" :loading="loading" @tap="submitFcha" class="btn-big">验证</button>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	let code=200;
	import {
		Fcaptcha
	} from "@/common/fcaptcha.js"
	export default {
		name: 'login',
		components: {},
		data() {
			return {
				loading: false,
				graphicVerifyCode: "",
				formData: {
					phone: '',
					password: '',
					captcha: '',
					newPassword: ''
				},
				confirmRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value === '') {
									callback(new Error('手机号不能为空'))
								} else {
									const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
									const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
									if ((reg.test(value) || reg2.test(value))) {
										this.yzmshow = true
										callback()
									} else {
										callback(new Error('请输入正确的手机号'))
									}
								}
							}
						}]
					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入六位验证码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length !=6) {
									callback('验证码为六位！')
								} else {
									callback();
								}
							}
						}]
					},
					newPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else {
									callback();
								}
							}
						}]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请确认密码'

						}, {
							validateFunction: function(rule, value, data, callback) {
								// console.log(data.newPassword);
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else if (value != data.newPassword) {
									callback('密码不一致')
								} else {
									callback();
								}
							}
						}]
					}
				}
			}
		},
		methods: {
			async sendCaptcha() {
				await this.$refs['popupDialog'].open()
				await this.fcaptcha.refresh()
			},
			confirm(validateForm) {
				this.$refs[validateForm].validate(valid=>{
					if(!valid){
						this.calluniCloud()
					}
				})	
			},
			async calluniCloud(){
				await uniCloud.callFunction({
						name: 'fe-retrievePassword',
						data: {
							phone:this.formData.phone,
							password:this.formData.password,
							code:this.formData.captcha
						}
					})
					.then(res => {
						this.code=res.result.code
						console.log(res)
					})
					await this.showTorM()
			},
			showTorM(){
				if (this.code == 200) {
					console.log(this.code, 'this.code1')
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
				} else if(this.code==400){
					uni.showToast({
						title: '验证码错误或超时',
						icon:"error",
						duration: 2000
					});
				}
				else{
					uni.showToast({
						title: '错误',
						icon:"error",
						duration: 2000
					});
				}
			},
			goBack(index, url) {
				if (index == 1) {
					// 关闭所有页面，打开到应用内的某个页面。
					uni.reLaunch({
						url: url,
						animationType: 'pop-in',
						animationDuration: 300
					})
				}
			},
			// 刷新验证码
			updateImageCode() {
				this.fcaptcha.refresh()
			},
			// 提交前校验图形验证码
			submitFcha() {
				if (!this.graphicVerifyCode) {
					return uni.showToast({
						title: '请输入图形验证码',
						icon:'error'
					})
				}
				let validate = this.fcaptcha.validate(this.graphicVerifyCode)
				if (!validate) {
					this.updateImageCode();
					this.graphicVerifyCode=''
					 uni.showToast({
						title: '图形验证码错误',
						icon:'error'
					})
					this.fcaptcha.refresh()
				} else {
					uni.showToast({
						title: '图形验证码通过'
					})
					this.$refs['popupDialog'].close();
					uniCloud.callFunction({
							name: 'fe-auth-code',
							data: {
								phone:this.formData.phone
							}
						})
						.then(res => {
							this.code = res.result.code,
								console.log(this.userId)
						})
				}
			}
		},
		onReady() {
			this.fcaptcha = new Fcaptcha({
				el: 'canvas',
				width: 80,
				height: 35,
				createCodeImg: ""
			});
		},
	}
</script>

<style>
	.bg {
		background-color: #edeef0;
	}

	.content {
		background-color: #edeef0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

	/* .text-area {
		display: flex;
		justify-content: center;
	} */

	.confirmButton {
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 20px;
	}

	.confirmButton::after {
		border: 0;
	}

	.captchaButton {
		background-color: #f1992d;
		color: #fff;
		width: 90px;
		height: 35px;
		font-size: 0.7em;
		border: 0;
		border-radius: 20px;
	}

	.captchaButton::after {
		border: 0;
	}

	.mcaptcha {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 270px;
		height: 300px;
		border-radius: 10px;
	}

	.canvas {
		margin: auto;
		width: 200rpx;
		height: 100rpx;
	}
	.btn-big {
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 20px;
	}
</style>