<!-- 账号绑定 -->
<template>
	<view class="account-bound">
		<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="password" borderBottom :required="true">
					<u--input
						placeholder="密码"
						v-model="form.password"
						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>
				</u-form-item>
			</u--form>
		</view>
		<view class="button" @click="submit">确定</view>
	</view>
</template>

<script>
	import { Mcaptcha  } from '../../common/mcaptcha.js';
	export default {
		data() {
			return {
				rules: {
					// 用户名
					'name': [
						{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						},
						// {
						// 	min: 8,
						// 	max: 30,
						// 	message: '长度在8-30个字符之间'
						// }
					],
					// 新密码规则
					'password': [
						{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
					],
					// 验证码规则
					'code': [
						{
							type: 'string',
							required: true,
							message: '请填写验证码',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								let validate = this.mcaptcha.validate(value)
								if(validate) {
									return true
								}
								callback(new Error('验证码错误'));
							},
						}
					],
				},
				form: {
					name: '',  //用户名
					password: '',  //密码
					code: '',  //验证码
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
			this.mcaptcha = new Mcaptcha({
				el: 'canvas',
				width: 140,
				height: 80,
				createCodeImg: ""
			});
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					//调改密码接口
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			// 刷新验证码
			updateImageCode() {
			  this.mcaptcha.refresh()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.account-bound {
		width: 100%;
		height: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#bed5fe 0%, #eef1fd 100%);
		.main {
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
		}
		.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;
			}
		}
	}
</style>
<style lang="scss">
	.account-bound {
		.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;
		}
		.u-form-item {
			margin-bottom: 20rpx;
		}
	}
</style>