<template>
	<view class="login-page">
		<!-- 顶部导航栏 -->
		<custom-navbar 
		  :title="title" 
		  :show-back="true"
		  title-color="#000"
		  background-color="transparent"
		></custom-navbar>
		<view class="login-cont">
			<view class="logo">
				<image src="/static/logo.png" mode="aspectFill" class="logo-icon"></image>
				美融融
			</view>
			<view class="welcome">欢迎登录进行使用！</view>
			<view class="inp-phpne">
				<input type="number" class="inp" placeholder="请输入账号" maxlength="11" :value="phone" @input="inputPhone" />
			</view>
			<view class="inp-code">
				<input type="number" class="inp" placeholder="请输入验证码" maxlength="4" :value="code" @input="inputCode" />
				<view class="code-btn" :class="{ disabled: countdown > 0 }" @click.stop="getCode">
					{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
				</view>
			</view>
			<view class="inp-psd">
				<input type="text" class="inp" placeholder="请输入密码(6~12位字母+数字)" maxlength="12" :value="password" @input="inputPassword" :password="!showPassword" />
				<image src="/static/images/dislook_psd.png"
					   mode="aspectFill"
					   class="look-icon"
					   v-if="!showPassword"
					   @click.stop="showPassword = true"></image>
				<image src="/static/images/look_psd.png"
					   mode="aspectFill"
					   class="look-icon"
					   @click.stop="showPassword = false"
					   v-else></image>
			</view>
			<view class="inp-psd">
				<input type="text" class="inp" placeholder="再次输入密码(6~12位字母+数字)" maxlength="12" :value="twopassword" @input="inputTwopassword" :password="!showAgainPassword" />
				<image src="/static/images/dislook_psd.png"
					   mode="aspectFill"
					   class="look-icon"
					   v-if="!showAgainPassword"
					   @click.stop="showAgainPassword = true"></image>
				<image src="/static/images/look_psd.png"
					   mode="aspectFill"
					   class="look-icon"
					   @click.stop="showAgainPassword = false"
					   v-else></image>
			</view>
			<view class="login" @click="tapLogin">{{handel == 'register' ? '注册' : handel == 'forget' ? '修改密码' : ''}}</view>
			<view class="other">{{handel == 'register' ? '已有账号，前去' : ''}}<text class="texta" @click="goLogin">{{handel == 'register' ? '登录' : handel == 'forget' ? '返回登录' : ''}}</text></view>
			
			<view class="agree">
				<agree-radio :isAgree="isAgree"
							 @change-agree="changeAgree"
							 class="agree-btn"></agree-radio>
					<text class="agree-text">已阅读并同意</text>
					<text class="agreement" @click="goAgreement(3)">《用户注册协议》</text>
					<text class="agree-text">和</text>
					<text class="agreement" @click="goAgreement(4)">《隐私政策》</text>
			</view>
		</view>
		
	</view>
</template>

<script>
import request from '../../utils/request';
import AgreeRadio from '@/components/agree-radio/agree-radio.vue'
	export default {
		components: {
			AgreeRadio
		},
		data() {
			return {
				phone: '', // 手机号
				code: '',  // 验证码
				password: '', // 密码
				twopassword: '',
				codeTips: '获取验证码',
				handel: null,
				inviteCodeOther: null,
				isAgree: false,
				countdown: 0,
				timer: null,
				showPassword: false,
				showAgainPassword: false
			}
		},
		onLoad(options) {
			let that = this;
			that.handel = !options.handel ? 'register' : options.handel;
			that.title = options.handel == 'register' ? '注册账号' : '忘记密码';
			that.inviteCodeOther = options.inviteCodeOther;
		},
		methods: {
			// 密码格式校验
			validatePassword(password) {
			    const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
			    return reg.test(password);
			},
			inputPhone(e) {
				let that = this;
				that.phone = e.detail.value;
			},
			inputCode(e) {
				let that = this;
				that.code = e.detail.value;
			},
			inputPassword(e) {
				let that = this;
				that.password = e.detail.value;
			},
			inputTwopassword(e) {
				let that = this;
				that.twopassword = e.detail.value;
			},
			// 获取验证码
			async getCode() {
				if (this.countdown > 0) return
				let that = this;
				let type = that.handel == 'register' ? 1 : 3
				// App阻止冒泡
			    // #ifdef APP-NVUE
			    e.stopPropagation()
			    // #endif
				if (!/^1[3456789]\d{9}$/.test(that.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				if(this.handel == 'forget') {
					const isaccount = await request.post('/user/isaccount',{account: that.phone});
					if(isaccount.state == 2) {
						uni.showToast({
							title: '该账户未注册！',
							icon: 'none'
						})
						return;
					}
				}
				
				// 开始倒计时
				this.countdown = 60
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.timer)
					}
				}, 1000)
				
				// 请求获取验证码接口
				request.post('/user/sendcode',{account: that.phone,type}).then(result=>{
					if(result.state == 1) {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					}else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					}
				})
			},
			// 是否同意修改
			changeAgree(value) {
				this.isAgree = value;
			},
			// 注册或者修改
			tapLogin() {
				let that = this;
				let wayId = that.wayId;
				let regOne = that.validatePassword(that.password);
				let regTwo = that.validatePassword(that.twopassword);
				if (!/^1[3456789]\d{9}$/.test(that.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}else if(!that.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}else if(!that.password && !that.twopassword) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}else if(!regOne && !regTwo) {
					uni.showToast({
						title: '请输入正确的密码',
						icon: 'none'
					});
					return false;
				}else if(that.password != that.twopassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return false;
				}else if(!that.isAgree){
					uni.showToast({
						title: '请先阅读并同意《用户注册协议》与《隐私政策》',
						icon: 'none'
					});
					return false;
				}
				if(that.handel == 'register') {
					let data = {
						account: that.phone,
						code: that.code,
						password: that.password,
						invite_code_other: that.inviteCodeOther
					}
					// 请求登录注册接口
					request.post('/user/useryhadd',data).then(result=>{
						if(result.state == 1) {
							uni.navigateBack({
								url: '/pages/login/login'
							})
						}else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					})
				}else if(that.handel == 'forget') {
					// 请求修改密码接口
					let data = {
						account: that.phone,
						code: that.code,
						password: that.password
					}
					// 请求修改密码接口
					request.post('/user/passwordchangebycode',data).then(result=>{
						if(result.state == 1) {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
							uni.navigateBack({
								url: '/pages/login/login'
							})
						}else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					})
				}
				
				
			},
			// 前去登录页面
			goLogin() {
				uni.navigateBack({
					url: '/pages/login/login'
				})
			},
			goAgreement(type) {
				uni.navigateTo({
					url: "/pages/agreement/agreement?type="+type
				})
			}
		},
		// 页面销毁时清除定时器
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>

<style>
page {
	background-color: #fff;
}
.login-page {
	position: relative;
	box-sizing: border-box;
}
.login-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1200rpx !important;
  background-image: url('/static/images/bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1;
}
.login-cont {
	width: 750rpx;
	position: absolute;
	z-index: 2;
	padding: 140rpx 72rpx 16rpx 48rpx;
	box-sizing: border-box;
}
.logo {
	width: 750rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-self: flex-start;
	align-items: center;
	font-size: 64rpx;
	color: #1F2329;
}
.logo-icon {
	width: 96rpx;
	height: 96rpx;
	margin-right: 24rpx;
}
.welcome {
	font-size: 40rpx;
	color: #646A73;
	margin-top: 12rpx;
}
.inp-phpne {
	margin-top: 108rpx;
}
.inp-psd,.inp-code {
	position: relative;
}
.inp {
	width: 630rpx;
	height: 96rpx;
	border: 2rpx solid #D0D3D5;
	padding: 0 48rpx;
	box-sizing: border-box;
	margin-bottom: 32rpx;
}
.look-icon {
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	top: 50%;
	right: 32rpx;
	transform: translateY(-50%);
}
.code-btn {
	width: 208rpx;
	text-align: center;
	font-size: 32rpx;
	color: #332F30;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	border-left: 2rpx solid #D0D3D5;
}
.login {
	width: 630rpx;
	height: 96rpx;
	background-color: #FD4778;
	color: #fff;
	font-size: 40rpx;
	line-height: 96rpx;
	text-align: center;
	border-radius: 40rpx;
	margin-top: 34rpx;
	margin-bottom: 32rpx;
}
.other {
	font-size: 32rpx;
	color: #8F959E;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.xian {
	margin: 0 32rpx;
}
.agree {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 48rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.agreement {
	display: inline-block;
	color: #1456F0;
	padding: 0 4rpx;
}
.agree-text {
	font-size: 24rpx;
	color: #8F959E;
}
.agree-btn {
	margin-right: 12rpx;
}
.texta {
	color: #1456F0;
	padding: 0 4rpx;
}
</style>
