<template>
	<view class="login-page">
		<!-- 顶部导航栏 -->
		<custom-navbar title="登录" :show-back="false" title-color="#000" background-color="transparent"></custom-navbar>
		<view class="content">
			<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" v-if="wayId==1">
				<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" v-else-if="wayId==2">
				<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="waybox">
				<view class="way" @click="changeWay">{{wayId==1 ? '账号密码登录' : '验证码登录'}}</view>
			</view>
			<view class="login" @click="tapLogin">登录</view>
			<view class="other">
				<view @click="goRegister">
					注册账号
				</view>
				<view class="xian">
					|
				</view>
				<view @click="goPassword">
					忘记密码
				</view>
			</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 {
				wayId: 2, //登录方式id
				phone: '', // 手机号
				code: '', // 验证码
				password: '', // 密码
				codeTips: '获取验证码',
				isAgree: false,
				countdown: 0,
				timer: null,
				showPassword: false, // 是否展示密码
			}
		},
		onLoad() {

		},
		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;
			},
			// 获取验证码
			async getCode() {
				let that = this;
				if (that.countdown > 0) return;
				// 验证手机号
				if (!/^1[3-9]\d{9}$/.test(that.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				const isaccount = await request.post('/user/isaccount', {
					account: that.phone
				});
				if (isaccount.state == 2) {
					uni.showToast({
						title: '该账户未注册！',
						icon: 'none'
					})
					return;
				}
				// 开始倒计时
				that.countdown = 60;
				that.timer = setInterval(() => {
					if (that.countdown > 0) {
						that.countdown--
					} else {
						clearInterval(that.timer)
					}
				}, 1000)
				// 请求获取验证码接口
				request.post('/user/sendcode', {
					account: that.phone,
					type: 2
				}).then(result => {
					if (result.state == 1) {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					}
				})
			},
			// 更改登录方式
			changeWay() {
				let that = this;
				if (that.wayId == 1) {
					that.wayId = 2;
				} else {
					that.wayId = 1;
				}
			},
			// 是否同意修改
			changeAgree(value) {
				this.isAgree = value;
			},
			// 登录
			tapLogin() {
				let that = this;
				let wayId = that.wayId;
				let reg = that.validatePassword(that.password);
				if (!/^1[3456789]\d{9}$/.test(that.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				// 验证码登录
				if (wayId == 1) {
					if (!that.code) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return false;
					} else if (!that.isAgree) {
						uni.showToast({
							title: '请先阅读并同意《用户注册协议》与《隐私政策》',
							icon: 'none'
						});
						return false;
					} else {
						request.post('/user/codelogin', {
							account: that.phone,
							code: that.code,
							deviceid: getApp().globalData.deviceid
						}).then(result => {
							if (result.state == 1) {
								uni.setStorageSync('accessToken', result.access_token);
								uni.setStorageSync('refreshToken', result.refresh_token);
								uni.setStorageSync('refresh_token_expries', result.refresh_token_expries);
								uni.setStorageSync('loginAccount', that.phone); // 保存登录的手机号
								that.goBackPage();
							} else {
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
							}
						})
					}
				} else if (wayId == 2) {
					if (!that.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						});
						return false;
					} else if (!reg) {
						uni.showToast({
							title: '请输入正确的密码',
							icon: 'none'
						});
						return false;
					} else if (!that.isAgree) {
						uni.showToast({
							title: '请先阅读并同意《用户注册协议》与《隐私政策》',
							icon: 'none'
						});
						return false;
					} else {
						request.post('/user/accountlogin', {
							account: that.phone,
							password: that.password,
							deviceid: getApp().globalData.deviceid
						}).then(result => {
							if (result.state == 1) {
								uni.setStorageSync('accessToken', result.access_token);
								uni.setStorageSync('refreshToken', result.refresh_token);
								uni.setStorageSync('refresh_token_expries', result.refresh_token_expries);
								uni.setStorageSync('loginAccount', that.phone); // 保存登录的手机号
								that.goBackPage();
							} else {
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			},
			goBackPage() {
				// 修改上一页页面信息
				const pages = getCurrentPages()
				const prevPage = pages[pages.length - 2]
				console.log('pages', pages)
				console.log('prevPage', prevPage)
				if (prevPage) {
					if (prevPage.route === 'pages/my/my') {
						prevPage.$vm.getUserInfo()
						uni.navigateBack();
					} else if (prevPage.route === 'pages/order/userorder-list') {
						prevPage.$vm.loadOrders()
						uni.navigateBack();
					}
				} else {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			},
			// 去注册
			goRegister() {
				uni.navigateTo({
					url: "/pages/register/register?handel=register"
				})
			},
			// 忘记密码
			goPassword() {
				uni.navigateTo({
					url: "/pages/register/register?handel=forget"
				})
			},
			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;
	}

	.content {
		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;
	}

	.code-btn.disabled {
		color: #999999;
	}

	.waybox {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
	}

	.way {
		font-size: 32rpx;
		font-weight: 700;
		color: #332F30;
	}

	.login {
		width: 630rpx;
		height: 96rpx;
		background-color: #E8101E;
		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;
	}
</style>