<!-- 注册页面 -->
<template>
	<view class="register">
		<view class="main">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				labelWidth="100"
				ref="form">
				<u-form-item label="用户名" prop="name" borderBottom :required="true">
					<u--input
						placeholder="请输入用户名"
						v-model="form.name"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="电子邮箱" prop="email" borderBottom :required="true">
					<u--input
						placeholder="请输入电子邮箱"
						v-model="form.email"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="密码" prop="password" borderBottom :required="true">
					<u--input
						placeholder="请输入密码"
						v-model="form.password"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="确认密码" prop="confirmPassword" borderBottom :required="true">
					<u--input
						placeholder="请输入确认密码"
						v-model="form.confirmPassword"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="手机号" prop="phone" borderBottom :required="true">
					<u--input
						placeholder="请输入手机号"
						v-model="form.phone"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="验证码" prop="code" borderBottom :required="true">
					<u--input
						placeholder="验证码"
						v-model="form.code"
						border="none"
					></u--input>
					<!-- <view class="code-img-wrapper" @click="updateImageCode">
					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
					</view> -->
					<image :src="canvasImgUrl" style="width: 140px;height: 80px;" @click="updateImageCode"></image>
				</u-form-item>
			</u--form>
		</view>
		<view class="button-bottom">
			<view class="button button-left" @click="register">立即注册</view>
			<view class="button button-right" @click="clear">清空</view>
		</view>
		<Message 
			:show="showMessage" 
			title="注册须知" 
			:content="messageContent" 
			@cancel="cancel"
			@close="close"
			@refuse="refuse"
		/>
		<canvas style="position: fixed;left: -100000px;280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
	</view>
</template>

<script>
	import Message from '../../../components/base/message.vue';
	import { Mcaptcha  } from '../../../common/mcaptcha.js';
	import { createCanvas, validateCode } from '../../../common/createCanvas.js';
	// import validate from '../../common/createCanvas.js';
	export default {
		components: {
			Message
		},
		data() {
			return {
				canvasImgUrl: '',
				showMessage: false, //注册须知弹框显隐
				messageContent: '依法打击网上有害不良信息，事关国家安全、民族团结、社会稳定、事关人民群众根本利益。\n\n举报中心欢迎广大网民积极举报网上有害不良信息，对举报有功人员继续给予奖励，对提供重大线索、为打击暴恐犯罪发挥重要作用的举报有功人员最高给予10万元奖励。',
				form: {
					name: '',  //用户名
					email: '', //电子邮箱
					password: '', //密码
					confirmPassword: '', //确认密码
					phone: '', //手机号
					code: '', //验证码
				},
				rules: {
					// 用户名
					'name': [
						{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						},
					],
					'email': [
						{
							required: true, 
							message: '请输入电子邮箱',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.email(value);
							},
							message: '请输入正确的电子邮箱',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					// 密码规则
					'password': [
						{
							type: 'string',
							required: true,
							message: '请填写新密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
					],
					// 确认密码规则
					'confirmPassword': [
						{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
						// 自定义规则判断是否包含字母"A"
						{
							validator: (rule, value, callback) => {
								console.log('---', value, this.form.password)
								if(value + '' === this.form.password + '') {
									console.log('true')
									return true;
								}
								callback(new Error('密码不一致'));
							}
						},
					],
					// 手机号验证规则
					'phone': [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确的手机号',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					// 验证码规则
					'code': [
						{
							type: 'string',
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// let validate = this.mcaptcha.validate(value)
								let validate = validateCode(value);
								if(validate) {
									return true
								}
								callback(new Error('验证码错误'));
							},
						}
					],
				},
			}
		},
		onShow() {
			this.showMessage = true;
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
			// this.mcaptcha = new Mcaptcha({
			// 	el: 'canvas',
			// 	width: 140,
			// 	height: 80,
			// 	createCodeImg: "",
			// });
			createCanvas({
				el: 'canvas',
				width: 140,
				height: 80,
				createCodeImg: "",
			}, this).then(res => {
				this.canvasImgUrl = res;
				console.log('绘画')
			})
		},
		methods: {
			// 立即注册
			register() {
				this.$refs.form.validate().then(res => {
					uni.$u.toast('注册成功')
					setTimeout(() => {
						wx.navigateBack({
						  delta: 1
						})
					}, 2000)
					//调改密码接口
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			//点击清空
			clear() {
				// this.$refs.form.resetFields();
				this.form.name = '';
				this.form.email = '';
				this.form.password = '';
				this.form.confirmPassword = '';
				this.form.phone = '';
				this.form.code = '';
				this.$refs.form.clearValidate();
			},
			// 刷新验证码
			updateImageCode() {
			  // this.mcaptcha.refresh();
				createCanvas({
					el: 'canvas',
					width: 140,
					height: 80,
					createCodeImg: "",
				}, this).then(res => {
					this.canvasImgUrl = res;
					console.log('绘画')
				})
			},
			//拒绝注册须知
			refuse(val) {
				wx.switchTab({
					url: '/pages/center/center'
				})
			},
			close(val) {
				this.showMessage = val;
			}
		} 
	}
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		.guiCode {
		    width: calc(70vmin / 3.75);
		    height: 100%;
		}
		.main {
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
			// .code-img-wrapper {
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// }
		}
		.button {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			color: #fff;
			font-weight: 600;
			letter-spacing: 4rpx;
			background-color: #408bf6;
			border: 2rpx solid #408bf6;
			border-radius: 10rpx;
			margin: 64rpx 0 32rpx 0;
			white-space: nowrap;
			box-sizing: border-box;
			&:active {
				background-color: #fff;
				color: #408bf6;
			}
		}
		.button-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			margin-top: 60rpx;
			.button-left {
				width: fit-content;
				padding: 20rpx 40rpx;
				margin-top: 0;
			}
			.button-right {
				width: fit-content;
				font-weight: 500;
				padding: 20rpx 40rpx;
				margin-top: 0;
				color: #408bf6;
				background-color: #fff;
				&:active {
					background-color: #d5e0ea;
					font-weight: 600;
				}
			}
		}
	}
</style>
<style lang="scss">
	.register { 
		.u-form-item__body__left__content__label {
			white-space: nowrap;
			font-weight: 600;
		}
		.u-form-item__body__right__content__slot {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>