<template>
	<view class="container">
		<view class="logo">
			<image class="w-240 h-240" src="@/static/logo.png"></image>
		</view>
		
		<view class="form-wapper">
			<u-form ref="uForm" errorType="toast" :rules="rules" :model="userInfo">
			
				<u-form-item prop="mobile">
					<u-input v-model="userInfo.mobile" maxlength="11" placeholder="请输入您的手机号"
						shape="square">
						<image
						slot="prefix"
						class="w-48 h-48"
						style="margin: 0 3px 0 0;"
						src="@/static/login/mobile.png"
						></image>
					</u-input>
				</u-form-item>
			
				<u-form-item prop="captcha">
					<u-input v-model="userInfo.captcha" shape="square" placeholder="请输入验证码"
						>
						<image
						slot="prefix"
						class="w-48 h-48 mr-3"
						src="@/static/login/code.png"
						></image>
						<template style="position: relative;" slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<view>
								<u-button throttleTime="1000" @click="getCode" color="#31AD6F"
									 :text="tips">
								</u-button>
							</view>
						</template>
					</u-input>
				</u-form-item>
				
				<u-form-item prop="newpassword">
					<u-input :password="!isShowPassWord" v-model="userInfo.newpassword" shape="square"
						placeholder="请输入新密码" style="padding: 0 20rpx;">
						<image
						slot="prefix"
						style="width: 48rpx;height: 48rpx;"
						src="@/static/login/pass.png"
						></image>
						
						<image
						v-if="isShowPassWord"
						@click="isShowPassWord = !isShowPassWord"
						slot="suffix"
						class="w-32 h-24"
						src="@/static/login/show.png"
						></image>
						<image
						v-else
						@click="isShowPassWord = !isShowPassWord"
						slot="suffix"
						class="w-32 h-20"
						src="@/static/login/hide.png"
						></image>
					</u-input>
				</u-form-item>
			</u-form>
			
			<view @click="onSubmit" class="btn-wapper">
				<text>提交</text>
			</view>
			
			<view class="user-agreement-wapper">
				<image v-show="!isAgree" @click="isAgree = !isAgree" src="@/static/select.png">
				</image>
				<image v-show="isAgree" @click="isAgree = !isAgree" src="@/static/is-select.png">
				</image>
				<view>
					<text class="ml-15">阅读并同意</text>
					<text @click="onGetXieyi('yhxy')" style="color:#4083F0;">《用户协议》</text>
					<text>和</text>
					<text @click="onGetXieyi('yszc')" style="color:#4083F0;">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					mobile: '',
					captcha: '',
					newpassword: ''
				},
				tips: '获取验证码',
				rules: {
					'mobile': [{
							type: 'string',
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value)
							},
							message: '手机号码格式不正确',
							trigger: ['change'],
						}
					],
					'captcha': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['change']
					},
					'newpassword': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['change']
					},
				},
				isShowPassWord: true, // 是否隐藏密码
				isAgree: false, // 是否阅读服务协议
			};
		},
		methods: {
			// 验证码倒计时开始到结束，每秒触发一次
			codeChange(text) {
				this.tips = text
			},
			// 获取验证码
			getCode() {
				if (this.userInfo.mobile !== '' && uni.$u.test.mobile(this.userInfo.mobile)) {
					// 判断是否已经获取了一次
					if (this.$refs.uCode.canGetCode) {
						const params = {
							url: '/api/sms/send',
							data: {
								mobile: this.userInfo.mobile,
								event: 'resetpwd'
							}
						}
						// 发送获取验证码请求
						this.$request(params).then(res => {
							// console.log(res)
							uni.$u.toast(res.msg);
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}).catch(err => {
							uni.$u.toast(err.msg || '发生错误');
							// 通知验证码组件内部重置
							this.$refs.uCode.reset();
						})
					} else {
						uni.$u.toast('请倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请填写正确的手机号');
				}
			},
			onGetXieyi(type) {
				const params = {
					url: '/api/index/xieyi',
					loadingTip: '',
					data: {
						type
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					let title = type === 'yhxy' ? '用户协议' : '隐私政策'
					// #ifdef APP-PLUS
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' + res.data)
					// #endif
					
					// #ifdef MP-WEIXIN || MP-ALIPAY
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' + encodeURIComponent(res.data))
					// #endif
				}).catch(err => {
					// console.log(err)
					this.$u.toast('发生错误')
				})
			},
			// 修改密码
			onSubmit() {
				this.$refs.uForm.validate().then(res => {
					// console.log(res)
					// 校验通过
					if (res) {
						if (!this.isAgree) {
							return this.$u.toast('请同意用户服务协议与隐私协议')
						}
						const params = {
							url: '/api/user/resetpwd',
							loadingTip: '',
							data: {
								type: 'mobile',
								...this.userInfo
							}
						}
						this.$request(params).then(res => {
							// console.log(res)
							uni.$u.toast('修改成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 600)
						}).catch(err => {
							// console.log(err)
							uni.hideLoading()
							this.$u.toast(err.msg || "登录失败")
						})
					}
				}).catch(errors => {
					
				})
			}
		}
	};
</script>

<style>
	/deep/.u-input {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		background-color: #F5F5F5;
	}
	/deep/.u-button{
		height: 25px !important;
	}
	.container {
		height: 100%;
		padding: 150rpx 30rpx 0;
	}
	.logo{
		width: 240rpx;
		height: 240rpx;
		margin: 0 auto;
	}
	
	
	.form-wapper {
		width: 100%;
		margin: 30rpx auto 0;
	}
	
	.code-btn {
		color: #FFF;
		padding: 10rpx 10rpx;
		background-color: #31AD6F;
		border-radius: 8rpx;
		font-size: 26rpx;
	}
	
	.btn-wapper {
		width: 100%;
		margin: 150rpx auto 0;
		background-color: #31AD6F;
		height: 90rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFF;
	}
	
	
	.user-agreement-wapper {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	
	.user-agreement-wapper>image {
		width: 40rpx;
		height: 40rpx;
	}
	
</style>

