<template>
	<view class="container">
		<view class="wrapper">
			<view class="input-content">
				<view class="input-item">
					<input type="text"  placeholder="请输入手机号" placeholder-class="input-empty" v-model="mobile" />
				</view>
				<view class="input-item2" style="flex-direction: row;">
					<input style="margin-top:20upx;" type="number" placeholder="请输入验证码" v-model="vCode" maxlength="11"/>
					<view :class="jsq ? 'bg-ccc' : ''" @click="getCodeInfo()" class="btnText">
						{{btnText}}
					</view>
				</view>
				<view class="input-item">
					<input type="text" password placeholder="请输入新密码(8位或以上含有字母和数字)" placeholder-class="input-empty" v-model="newPwd" />
				</view>
				<view class="input-item">
					<input type="text" password placeholder="请再次输入新密码" placeholder-class="input-empty" v-model="newPwdCopy" />
				</view>
			</view>
			<button class="confirm-btn" @click="submit" >提 交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import { callbackRequest, setStorage, getStorage, sureAlterTip, devEnv, alertTip } from '@/common/util.js';
	import { updatePwd,getCodeInfo} from '@/common/api.js';

	export default {
		components: {},
		data() {
			return {
				jsq:null,//计时器
				btnText:'发送',
				mobile:"",
				newPwd:'',
				newPwdCopy:"",
				vCode:'',
				codeKey:"",
			};
		},
		onLoad() {
		},
		methods: {
			...mapMutations(['logout']),
			checkPhone (phone) {
			  if (!(/^1[3456789]\d{9}$/.test(phone))) {   
				  return false;
			  } 
			  return true;
			},
			getCodeInfo(){
				if(this.jsq){return false;}
				if (!this.checkPhone(this.mobile)) {
					alertTip('请填写正确的手机号码','',1000);
					return false;
				}
				let data = {
					"method": getCodeInfo,
					"data": {
						phone:this.mobile
					}
				}
				callbackRequest(data)
				.then(res =>{
					if(res.data.returnCode == 1){
						this.codeKey = res.data.returnMsg;
						alertTip('验证码已发送，请注意查收！','',3000);
						this.timer();
					}
				})
			},
			timer(){
				let i = 60;
				let _this = this;
				this.jsq = setInterval(function(){
					if(i == 0){
						_this.btnText = '发送';
						clearInterval(_this.jsq);
						_this.jsq = null;
						return false;
					}
					_this.btnText = i+'s';
					i--;
				},1000);
				
			},
			
			submit(){
				// if (!this.mobile) {
				// 	this.$api.msg("请输入手机号")
				// 	return
				// }
				if (!this.checkPhone(this.mobile)) {
					this.$api.msg("请填写正确的手机号码")
					this.mobile = '';
					return 
				}
				if (!this.vCode) {
					this.$api.msg("请输入验证码")
					return
				}
				var reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,18}$/;
				if (!reg.test(this.newPwd)) {
					this.$api.msg("请输入8位或以上含有字母和数字的密码");
					return;
				} 
				if (!this.newPwdCopy) {
					this.$api.msg("请再次输入新登录密码")
					this.newPwdCopy = '';
					return
				}
				if (this.newPwd != this.newPwdCopy) {
					this.$api.msg("两次输入的密码不一致")
					this.newPwdCopy = '';
					return
				}
				var CryptoJS = require('@/common/utils.js');
				var aesutil = require('@/common/AESUtil.js');
				let newPwdmd5 = CryptoJS.MD5(this.newPwd).toString();
				let newAes = aesutil.encrypt("c32ad1415f6c89fee76d8457c31efb4b", newPwdmd5);
				let params = {
					method: updatePwd,
					data: {
						mobile:this.mobile,
						newPwd:newAes,
						vCode:this.vCode,
						codeKey:this.codeKey,
					}
				};
				callbackRequest(params).then(res => {
					res = res.data;
					if(res.returnCode == 1){
						alertTip('密码已修改，请使用新密码重新登录','',2000);
						this.logout();
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}else {
						this.$api.msg(res.returnMsg);
						
					}
				});
			}

		}
	};
</script>

<style lang="scss">
	.bg-ccc{
		background: #ccc !important;
	}
	.btnText{
		width: 30%;height: 100upx;line-height: 100upx;font-size: 30upx;color:#666;border-left: 1px solid #E5E5E5;text-align: center;
		border-radius:0 100upx 100upx 0;
		background: #4db4ea;
		color: white;
	}
	page {
		background: #fff;
	}
.u_head {
		padding: 4vw;
	}

	.head_img {
		margin: 40upx auto;
		margin-top: 50upx;
		width: 25vw;
		height: 25vw;
		box-shadow: 0 0 10rpx 1rpx #f8f8f8;
		border-radius:50%;
	}
	.head_img image{
		width:100%;
		height:100%;
		border-radius: 50%;;
	}
	.head_edit {
		position: absolute;
		top: 41vw;
		left: 56vw;
		width: 10vw;
		height: 10vw;
		z-index: 9999;
	}

	.i_img {
		width: 100%;
		height: 100%;
		border-radius: 50%;

	}
	.container {
		// position: relative;
		background: #fff;
	}

	.wrapper {
		z-index: 90;
		background: #fff;
		margin-top: 8vh;
	}

	.back-btn {
		// position: absolute;
		// z-index: 9999;
		margin: 1vh 0 0 5vw;
		padding-top: var(--status-bar-height);
		font-size: 40upx;
		color: $font-color-dark;
	}

	.welcome {
		position: relative;
		text-align: center;
		top: -50upx;

		image {
			width: 180upx;
			height: 180upx;
			border-radius: 20upx;
		}
	}

	.input-content {
		padding: 60upx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		height: 100upx;
		border-radius: 50px;
		margin-bottom: 50upx;
		box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}

	/* 验证码 */
	.input-item2 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 0 0 30upx;
		height: 100upx;
		border-radius: 50px;
		margin-bottom: 50upx;
		box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
			/* border: 1px solid #b4f3e2; */
		}
	}

	.item2_inp {
		display: flex;
	}

	.cod_desc {
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		width: 40vw;
		text-align: center;
		line-height: 60upx;
		border-left: 1px solid #d5d5d5;
		// text-decoration: underline;
	}

	.cod_act {
		// color: $font-color-spec;
	}

	.confirm-btn {
		width: 630upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: #4db4ea;
		color: #fff;
		font-size: $font-lg;
		box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		padding: 3vh 0;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $uni-color-primary;
			margin-left: 10upx;
		}
	}

	.wxico {
		width: 50upx;
		height: 50upx;
	}
</style>
