<template>
	<view>
        <view class="logo">
			<view class="img">
				<image mode="widthFix" src="../../static/img/cycLogoImg.jpg"></image>
			</view>
		</view>
		<view class="form re">
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="code">
				<input placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="password" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="btn" @tap="doReset">重置密码</view>

		</view>
		
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				password:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false
			}
		},
		onLoad() {

		},
		methods: {
			Timer(){},
			getCode(){
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				//示例用定时器模拟请求效果
				setTimeout(()=>{
					uni.showToast({title: '验证码已发送',icon:"none"});
					this.$u.api.getCodeRepass(this.phoneNumber).then(res=>{
						debugger;
						if(res.code===0){}else{}
					})
					this.setTimer();
				},1000)
				
				
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			toLogin(){
				uni.hideKeyboard()
				uni.redirectTo({url: 'login'});
				uni.navigateBack();
			},
			doReset(){
				let that = this;
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				uni.showLoading({
					title: '提交中...'
				})
				let params = {mobphone:that.phoneNumber,password:that.password,phone_code:that.code};
				that.$u.api.changepwd(params).then(res=>{
						uni.hideLoading();
						debugger;
						if(res.code===0){
							that.toLogin();
						}else{}
					})
				
				//模板示例修改本地储存的用户信息，实际使用中请替换为上传服务器修改。
				// setTimeout(()=>{
				// 	uni.getStorage({
				// 		key: 'UserList',
				// 		success: (res)=>{
				// 			uni.hideLoading()
				// 			for(let i in res.data){
				// 				let row = res.data[i];
				// 				if(row.username==this.phoneNumber){
				// 					//修改记录，密码md5
				// 					res.data[i].passwd = md5(this.passwd);
				// 					uni.setStorage({
				// 						key: 'UserList',
				// 						data: res.data,
				// 						success: function () {
				// 							uni.showToast({title: '密码已重置',icon:"success"});
				// 							setTimeout(()=>{
				// 								uni.navigateBack();
				// 							},1000)
				// 						}
				// 					});
				// 					return ;
				// 				}
				// 			}
				// 			uni.showToast({title: '手机号码未注册',icon:"none"});
							
				// 		},
				// 		fail:function(e){
				// 			uni.hideLoading()
				// 			uni.showToast({title: '手机号码未注册',icon:"none"});
				// 		}
				// 	});
				// },1000)
				
				
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	
</style>
