<template>
	<view class="page">
		<!-- <u-navbar :autoBack="true" bgColor="#fff0e7" title="登录"></u-navbar> -->
		<view class="top-background-raduis">智能寄信</view>
		<view class="login-box">
			<view class="login-card-title">
				<view class="login-card-title-content">{{
					titleData[loginPattern]
				}} </view>
			</view>
			<view class="login-card-input login-card-input-account" v-if="loginPattern==='userLogin'">
				<!-- 输入框头部图标 -->
				<u--input class="hj-input" v-model="userInfo.account" focus maxlength="30" :trim="true"
					@focus="UserNamePassWrodFocusBorderStyle" :styles="inputColorConfigToUserName"
					@blur="UserNamePassWrodBlurBorderStyle" placeholder="请输入账号"></u--input>
				<!-- 输入框头部图标 -->
				<u--input class="hj-input" v-model="userInfo.password" type="password" @focus="PassWordFocusBorderStyle"
					@blur="PassWordBlurBorderStyle" :styles="inputColorConfigToPassWord" placeholder="请输入密码"></u--input>
			</view>
			<view class="login-card-input login-card-input-account"
				v-if="loginPattern==='forgotPassword'||loginPattern==='captchaLogin'">
				<!-- 输入框头部图标 -->
				<u--input class="hj-input" v-model="captchaInfo.mobile" focus maxlength="30" :trim="true"
					@focus="UserNamePassWrodFocusBorderStyle" :styles="inputColorConfigToUserName"
					@blur="UserNamePassWrodBlurBorderStyle" placeholder="请输入手机号"></u--input>
				<view class="hj-input" style="display: flex;justify-content: center;"
					v-if="$isPhoneNumber(captchaInfo.mobile)">
					<u-code-input :disabledKeyboard="!$isPhoneNumber(captchaInfo.mobile)" :maxlength="4"
						v-model="captchaInfo.captcha"></u-code-input>
					<view style="margin-left: 10rpx;">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button @tap="getCode">{{captchaButtonText}}</u-button>
					</view>
				</view>
				<u--input class="hj-input" v-if="loginPattern==='forgotPassword'&&$isPhoneNumber(captchaInfo.mobile)"
					v-model="forgotPasswordInfo.newpassword" type="password" @focus="PassWordFocusBorderStyle"
					@blur="PassWordBlurBorderStyle" :styles="inputColorConfigToPassWord" placeholder="请输入密码"></u--input>
				<!-- 输入框头部图标 -->
				<!-- 	<u--input class="hj-input" v-model="userInfo.password" type="password" @focus="PassWordFocusBorderStyle"
					@blur="PassWordBlurBorderStyle" :styles="inputColorConfigToPassWord" placeholder="请输入密码"></u--input> -->
			</view>
			<view class="login-card-loginIn" @click="submitLoginData"
				v-if="loginPattern==='userLogin'||$isPhoneNumber(captchaInfo.mobile)&&captchaInfo.captcha.length===4">
				<view class="login-card-loginIn-btn">
					{{loginPattern==='forgotPassword'?'找回密码':'登 录'}}
				</view>
			</view>
			<view class="login-bottom-info">

				<view class="info-item" v-if="loginPattern!=='captchaLogin'" @click="loginPattern ='captchaLogin'">
					手机号登录
				</view>
				<view class="info-item" v-if="loginPattern !=='userLogin'" @click="loginPattern ='userLogin'">
					账号密码登录
				</view>
				<view class="info-item" @click="loginPattern ='forgotPassword'" v-if="loginPattern !=='forgotPassword'">
					忘记密码
				</view>
				<!-- 	<view class="info-item" @click="toRegister" v-if="loginPattern !=='forgotPassword'">
					立刻注册
				</view> -->
			</view>
		</view>
		<view class="bottom-message">
			登录/注册 代表你已同意《用户使用协议》
		</view>
		<view class="top-background-raduis-bootom"></view>
	</view>
</template>


<script>
	import {
		userLogin,
		phonenumberLogin,
		sendVerifyCode,
		retrievePassword
	} from '@/request/api.js'
	import {
		onLoad
	} from 'uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				// 输入框边框颜色默认值
				colorDefault: '#b4b4b4',
				// 输入框边框聚焦值
				colorFocusColor: '#3cb79a',
				// 输入框颜色配置
				inputColorConfigToUserName: {
					color: "#000000",
					disableColor: "#eee",
					borderColor: "#b4b4b4",
				},
				// 输入框颜色配置
				inputColorConfigToPassWord: {
					color: "#000000",
					disableColor: "#eee",
					borderColor: "#b4b4b4",
				},
				value: "",
				userInfo: {
					account: '',
					password: ''
				},
				titleData: {
					captchaLogin: '验证码登录',
					forgotPassword: '找回密码',
					userLogin: '账号密码登录'
				},
				captchaInfo: {
					mobile: '',
					captcha: '',
				},
				forgotPasswordInfo: {
					mobile: '',
					captcha: '',
					newpassword: ''
				},
				// registerInfo: {

				// }
				showCaptchInput: false,
				seconds: 60,
				captchaButtonText: '获取验证码',
				loginPattern: 'captchaLogin', //userLogin captchaLogin forgotPassword
			};
		},
		onLoad() {},
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		async onLoad() {
			// #ifdef H5
			if (await this.$isWechat()) {
				console.log('当前登录环境：微信H5');
				if (this.$getUrlParams('code')) {
					this.$wechatloginAfter(this.$getUrlParams('code'))
					return
				} else if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/'
					})
					return
				} else {
					this.$login()
				}
			} else {
				console.log('当前登录环境：普通H5');
			}
			// #endif

			// 
			// #ifdef MP-WEIXIN
			console.log('当前登录环境：微信')
			this.$login()
			// #endif
		},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage() {},
		created() {},
		methods: {
			async getCode() {
				try {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						let event = ''
						switch (this.loginPattern) {
							case "captchaLogin":
								event = 'mobilelogin'
								break;
							default:
								event = 'savepwd'
								break;
						}
						let {
							data
						} = await sendVerifyCode({
							mobile: this.captchaInfo.mobile,
							event
						})
						console.log(data);
						this.$refs.uCode.start();
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} catch (e) {
					console.log(e);
				}
			},
			toRegister() {
				uni.navigateTo({
					url: 'pages/register/register'
				})
			},
			async submitLoginData() {
				// loginPattern: 'userLogin', // captchaLogin forgotPassword
				try {
					let res
					if (this.loginPattern === "userLogin") {
						let {
							data
						} = await userLogin(this.userInfo)
						console.log(data);
						res = data.data
						if (!data.code) throw (data.msg)
					} else if (this.loginPattern === "captchaLogin") {
						let {
							data
						} = await phonenumberLogin({
							...this.captchaInfo,
							event: 'mobilelogin'
						})
						console.log(data);
						if (!data.code) throw (data.msg)
						res = data.data
					} else {
						this.forgotPasswordInfo = {
							...this.forgotPasswordInfo,
							...this.captchaInfo,
						}
						let {
							data
						} = await retrievePassword(this.forgotPasswordInfo)
						console.log(data);
						if (!data.code) throw (data.msg)
						res = data.data
						this.loginPattern = 'userLogin'
						uni.$u.toast('密码重置成功');
						return
					}
					uni.setStorageSync('userInfo', res.userinfo)
					uni.setStorageSync('token', res.userinfo.token)
					this.$mutations.setUserInfo(res.userinfo)
					this.$set(this.$store, 'userInfo', res.userinfo)
					console.log(this.$store.userInfo);
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} catch (e) {
					uni.$u.toast(e);
					console.log(e);
				}
				// console.log(data);
			},
			codeChange(text) {
				this.captchaButtonText = text
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('验证码发送成功');
			},
			// 输入框聚焦变换边框样式
			UserNamePassWrodFocusBorderStyle() {
				this.inputColorConfigToUserName.borderColor = this.colorFocusColor;
			},
			PassWordFocusBorderStyle() {
				this.inputColorConfigToPassWord.borderColor = this.colorFocusColor;
			},
			// 输入框失去焦点变换边框样式
			UserNamePassWrodBlurBorderStyle() {
				this.inputColorConfigToUserName.borderColor = this.colorDefault;
			},
			PassWordBlurBorderStyle() {
				this.inputColorConfigToPassWord.borderColor = this.colorDefault;
			},

		},
	};
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	uni-page-body {
		padding: 0 0 0 0 !important;
	}

	.page {
		position: relative;
		height: 100vh;
	}

	.top-background-raduis {
		height: 30%;
		background-color: #3cb79a;
		padding-top: 100rpx;
		display: flex;
		align-items: flex-start;
		color: white;
		font-weight: bold;
		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
		font-size: 50rpx;
		// background-image: url(/static/01banner.png);
		background-size: 100% cover;
		justify-content: center;

		// background-color: #ffd0b1;
		// border-bottom-left-radius: 50%;
		// border-bottom-right-radius: 50%;
		border-radius: 0 0 0 100%;
	}

	.top-background-raduis-bootom {
		height: 500rpx;
		border-radius: 0 100% 0 0;
		width: 100%;
		// border-top-left-radius: 50%;
		// border-top-right-radius: 50%;
		background-color: #3cb79a;
		position: fixed;
		bottom: 0;
	}

	/deep/ .is-input-border {
		border-radius: 7px !important;
	}

	/deep/ .uni-easyinput__content {
		min-height: 39px !important;
	}

	.hj-input {
		margin-bottom: 20rpx;
		margin-top: 15rpx;
	}

	.hj-input:nth-child(2) {
		margin-top: 35rpx;
	}

	.login-box {
		top: 20%;
		position: absolute;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		right: 10%;
		max-height: 650rpx;
		padding: 30rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 9rpx 9rpx 6rpx rgba(0, 0, 0, 0.3);
		z-index: 1;

		.login-card-input {
			// background-color: violet;
			// height: 50%;
			padding: 5rpx;

			::v-deep .u-input {
				margin-bottom: 20rpx;
			}
		}

		.login-card-title {
			height: 20%;
			// background-color: black;
			padding: 10rpx;
			display: flex;
			justify-content: center;

			.login-card-title-content {
				font-size: 1.2em;
				color: #3cb79a;
				border-bottom: 3px solid #3cb79a;
			}
		}

		.login-card-loginIn {
			height: 110rpx;
			display: flex;
			justify-content: center;
			padding: 10rpx;
			align-items: center;

			.login-card-loginIn-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #3cb79a;
				width: 100%;
				font-size: 1.2em;
				height: 70rpx;
				border-radius: 40rpx;
				color: white;
			}
		}

		.login-bottom-info {
			height: 50rpx;
			display: flex;
			font-size: 20rpx;
			color: #3cb79a;
			justify-content: center;
			align-items: center;

		}

		.info-item {
			margin-top: 20rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
		}
	}

	.bottom-message {
		position: absolute;
		height: 70rpx;
		display: flex;
		z-index: 99;
		width: 100%;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		overflow: hidden;
		color: white;
		bottom: 80rpx;
	}
</style>