<template>
	<view class="web_box">
		<view class="title">
			修改密码
		</view>
		<view class="form">
			<u--form ref="form1">
				<u-form-item borderBottom>
					<u--input border="none" v-model="userInfo.name" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<u-input border="none" v-model="userInfo.code" placeholder="请输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<view @click="getCode" class="code">{{tips}}</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<u--input border="none" type="password" v-model="userInfo.password" placeholder="请输入新密码"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<u--input border="none" type="password" v-model="userInfo.password2" placeholder="请重新输入密码"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="hflex acenter">
			<u-checkbox-group @change="checkboxChange">
				<u-checkbox v-model="agree" shape="circle"></u-checkbox>
			</u-checkbox-group>
			<view class="text">我已阅读并同意<span class="read" @click="open(0)">《用户协议》</span>、<span class="read" @click="open(1)">《隐私协议》</span></view>
		</view>
		<view class="bottom">
			<u-button @click="login">修改并登录</u-button>
			<view class="hflex acenter jend" style="padding-top: 14rpx;">
				
				<span class="read" @click="toLogin">前去登录</span>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-modal :show="showProtocol" :title="protocolTitle" confirmColor="#2988FE" @confirm="showProtocol = false" confirmText="我已阅读">
			<view class="slot-content">
				<rich-text :nodes="protocolContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					code: '',
					password: '',
					password2: ''
				},
				agree: false,
				showProtocol: false,
				protocolTitle: '',
				protocolContent: '',
				tips: '',
			}
		},
		onLoad() {
			
		},
		methods: {
			// 阅读并同意
			checkboxChange(n) {
				this.agree = !this.agree
			},
			// 打开弹出层
			open(index) {
				const that = this
				if(index == 0) {
					that.protocolTitle = '用户协议'
					that.protocolContent = ''
				} else {
					that.protocolTitle = '隐私政策'
					that.protocolContent = ''
				}
				that.showProtocol = true
			},
			// 验证码文字改变
			codeChange(text) {
				this.tips = text;
			},
			// 获得验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
				  // 模拟向后端请求验证码
				  uni.showLoading({
					title: '正在获取验证码'
				  })
				  setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				  }, 2000);
				} else {
				  uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 去登录
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 修改并登录
			login() {
				var that = this
				if ($api.formCheck(that.userInfo.name,"phone") && $api.formCheck(that.userInfo.code,"code6") && $api.formCheck(that.userInfo.password,"required") && $api.formCheck(that.userInfo.password2,"required")) {
					if (that.agree) {
						if (that.userInfo.password === that.userInfo.password2) {
							uni.setStorageSync("login", true)
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						} else {
							$api.info("请输入正确的密码")
						} 
					} else {
						$api.info("请先阅读并同意用户协议和隐私协议")
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		background: url('@/static/images/login/login-bg.png') no-repeat;
		background-size: 100%;
		padding: 226rpx 66rpx 0;
		
		.title {
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
		}
		.form {
			width: 100%;
			box-sizing: border-box;
			padding: 80rpx 0 0;
			margin-bottom: 20rpx;
		}
		.text {
			font-size: 24rpx;
			color: #999999;
		}
		.code {
			font-size: 28rpx;
			font-weight: 400;
			color: #2988FE;
		}
		.read {
			font-size: 24rpx;
			color: #2988FE;
		}
		.bottom {
			margin-top: 80rpx;
		}
		.u-button {
			width: 578rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #57BBF0 29%, #3B86FE 72%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		.bottom_text {
			width: 100%;
			text-align: right;
			margin: 14rpx 0 80rpx;
		}
	}
</style>