<template>
	<view class="container">
		<view class="container_box flex-center">
			<view class="logo"></view>
		</view>
		<view class="revert" @click="navto('/pages/public/login')">
			<image src="../../static/img/img03.png" ></image>
		</view>
		<view class="loginTitle" >
			<view class="loginTitle-1" >
				<view >找回密码</view>
				<view class="display" ></view>
			</view>
		</view>
		
		<!-- <view class="login_text"  v-if="isactive">
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img05.png"></image></view>
				<view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" /></view>
			</view>
			<view class="login_input flex-start" style="margin-bottom: 30rpx;">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="passward" focus placeholder="请输入密码" /></view>
			</view>
			<view class="forget flex-end" @click="forget">
				<image src="../../static/img/img04.png"></image>
				<viwe>忘记密码?</viwe>
			</view>
			<view><button type="green" class="uni-button uni-button-red" @click="toLogin">登录</button></view>
		</view> -->
		<view class="login_text" >
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img05.png"></image></view>
				<view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
			</view>
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="password" focus placeholder="请输入密码" /></view>
			</view>
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="repassword" focus placeholder="请重复输入密码" /></view>
			</view>
			<!-- <view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img07.png"></image></view>
				<view class="login_name"><input class="uni-input" type="text" v-model="invitation" focus placeholder="请输入邀请码" /></view>
			</view> -->
			<view class="login_input flex">
				<view class="login_img"><image src="/static/img/img07.png"></image></view>
				<view class="login_name flex">
					<input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
					<view class="code" @click="verification">{{ countDown == 0 ? '获取验证码' : countDown }}</view>
				</view>
			</view>
			<view><button type="green" @click="confirm" class="uni-button uni-button-red">确认</button></view>
		<!-- 	<view><button class="uni-button uni-button-green uni-button-green-plain" type="green" plain="true" hover-class="none" @click="login">返回登录</button></view> -->
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { registerReset } from '@/api/set.js';
import { verify } from '@/api/login.js';
export default {
	data() {
		return {
			phone: '', //用户
			password: '', //密码
			repassword: '',
			invitation: '', //邀请码
			code: '', //验证码
			time: '', //保存倒计时对象
			countDown: 0, //倒计时
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	onLoad() {
		this.weixinB=uni.getStorageSync('weichatBrowser')
	},
	methods: {
		...mapMutations(['setUserInfo','login']),
		
		verification() {
			let obj = this;
			if (this.phone == '') {
				this.$api.msg('请输入电话号码');
				return;
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			// 判断是否在倒计时
			if (obj.countDown > 0) {
				return false;
			} else {
				obj.countDown = 60;
				obj.time = setInterval(() => {
					obj.countDown--;
				}, 1000);
				//调用验证码接口
				verify({
					phone: obj.phone,
					type: 'VERIFICATION_CODE'
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
		confirm(e) {
			this.loding = true;
			registerReset({ 
				account: this.phone,
				captcha: this.code,
				password: this.password,
			})
				.then(({ data }) => {
					this.loding = false;
					this.$api.msg('修改成功');
					setTimeout(() => {
					      uni.switchTab({
					       url: '/pages/user/user'
					      });
					     }, 1000);
				})
				.catch(err => {
					this.loding = true;
					console.log(err);
				});
		},
		//
		// choice(){
		// 	if(this.isactive == true){
		// 		this.isactive = false;
		// 	}else{
		// 		this.isactive = true;
		// 	}
		// },
		navto(item){
			uni.navigateTo({
				url: item
			});
		},
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #FFFFFF;
}
.container {
	width: 100%;
	background-size: 100%;
	.container_box {
		width: 100%;
		height: 600rpx;
		background: url(https://mmz.liuniu946.com/statics/img/img02.png) no-repeat center;
		background-size: 750rpx 600rpx;
		position: relative;
		.logo{
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			background: url(../../static/error/missing-face.png) no-repeat center;
			background-size: 180rpx;
		}
		
	}
	.revert{
		width: 20rpx;
		height: 35rpx;
		position: absolute;
		top:20rpx;
		left:30rpx;
		image{
			width: 20rpx;
			height: 35rpx;
		}
	}
	.loginTitle {
		position: absolute;
		top:500rpx;
		width: 100%;
		color: #333333;
		font-size: 56rpx;
		padding-left: 50rpx;
		font-weight: bold;
		display: flex;
		align-items: flex-end;
		
		.loginTitle-1{
			width: 250rpx;
			font-size:48rpx;
			font-weight:400;
			color:#ffffff;
			text-align: center;
			.display{
				margin: 0 auto;
				margin-top: 20rpx;
				width: 40rpx;
				height: 6rpx;
				border-radius: 5rpx;
				background-color: #FFFFFF;
			}
			.active{
				display: none;
			}
			
		}
		.active{
			font-size:48rpx;
			font-weight:600;
		}
	}
	.login_text {
		margin: 60rpx 50rpx;
		position: relative;
		margin-top:60rpx !important;
		.login_input {
			background:#f2f2f2;
			padding: 35rpx 25rpx;
			margin-bottom: 45rpx;
			border-radius: 15rpx;
			.login_img image {
				height: 37rpx;
				width: 31rpx;
				margin-right: 30rpx;
			}
			.login_name {
				color: #333333;
				.uni-input {
					text-align: left;
					width: 380rpx;
					font-size: 30rpx !important;
					color:#666666;
				}
				.code {
					color: #FC4141;
					font-size: 23rpx;
					border-left: 1px solid #666666;
					width: 180rpx;
					flex-shrink: 0;
					text-align: center;
				}
			}
		}
		.forget {
			font-size:28rpx;
			font-weight:400;
			color:#999999;
			margin-bottom: 50rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}
		}
		.forget:hover{
			cursor: pointer;
		}
	}
}

.fenge {
	width: 30%;
	height: 2rpx;
	background-color: #eeeeee;
}
.qita {
	font-size: 28rpx;
	color: #999999;
}
.other {
	margin-top: 60rpx;
}
.weixin {
	width: 75rpx;
	height: 75rpx;
	margin: 25rpx auto;
}
.weixin image {
	width: 100%;
	height: 100%;
}
.weixin_text {
	text-align: center;
	font-size: 28rpx;
	color: #999999;
}



.uni-button-red {
	width: 100%;
	color: #FFFFFF;
	background:linear-gradient(90deg,rgba(254,78,70,1) 0%,rgba(252,65,65,1) 100%);
	border-radius: 15rpx;
}
.uni-button-green-plain {
	border: 1px solid #5dbc7c;
	margin: 40rpx 10rpx;
	border-radius: 50rpx;
	color: #5dbc7c;
	background-color: #ffffff;
}
.uni-button {
	height: 100rpx;
	line-height: 100rpx;
}
</style>
