<template>
  <div class="reset">
		<el-form ref="registerForm" :model="registerForm" :rules="registerRules">
			<el-form-item class="register_field" prop="phone">
				<el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item class="register_field" prop="pw">
				<el-input ref="pw" v-model="registerForm.pw" type="password" placeholder="请输入密码"></el-input>
				<pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength>
			</el-form-item>
			<el-form-item class="register_field register_row" prop="captcha">
				<el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input>
				<el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button>
			</el-form-item>
			<el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">重置密码</el-button>
		</el-form>
  </div>
</template>

<script>
import { getToken } from "../utils/auth";
import { captcha,resetpw } from "../api/user";
import pwStrength from "../components/pwStrength";
import md5 from "js-md5";
export default {
  name: "resetPw",
  components: {
	  pwStrength
  },
  data() {
    return {
      registerForm: {
				phone: "",
				pw: "",
				captcha: "",
				email: "",
			},
			minPw:4,
				copyRight: "版权所有 © 2021-2025 中海创科技（福建）集团有限公司",
				registerRules: {
					phone: [
				{ required: true, message: "请填写手机号", trigger: "blur" },
				{ validator: (rule, value, callback)=>{
					if (!/^[1]([3-9])[0-9]{9}$/.test(value)) {
						callback(new Error('请填写正确的手机格式!'));
					} else {
						callback();
					}
				}, trigger: "blur" },
			],
					pw: [
				{ required: true, message: "请填写密码", trigger: "blur" },
				{ validator: (rule, value, callback)=>{
					if ((value+"").length<this.minPw) {
						callback(new Error('请输入至少'+this.minPw+'位密码！'));
					} else {
						callback();
					}
				}, trigger: "blur" },
			],
					captcha: [
						{ required: true, message: "请填写验证码", trigger: "blur" }
					],
					/*email: [
						{ required: true, message: "请填写邮箱地址", trigger: "blur" }
					]*/
			},
			captchaLoading:false,
			resetLoading:false,
			captchaTimer:0,
    };
  },
  model: {
    prop: "value",
    event: "valuechange"
  },
  props: {
    value: {
      type: Object
    }
  },
  computed: {},
  mounted() {},
  methods: {
		//获取验证码
		getCaptcha(){
			this.$refs.registerForm.validateField("phone",(errMsg) => {
				if (!errMsg) {
					let me=this;
					me.captchaTimer=60;
					me.captchaLoading=true;
					captcha({
					    "phone": me.registerForm.phone
					}).then(res=>{
						me.captchaLoading=false;
					}).catch(err=>{
						me.captchaLoading=false;
					});
					let _timer=setInterval(()=>{
						--me.captchaTimer;
						if(me.captchaTimer==0){
							clearInterval(_timer);
						}
					},1000);
				}
			});
		},
		//重置
		reset(){
			let me=this;
			this.$refs.registerForm.validate((valid) => {
				if (valid) {
					me.resetLoading=true;
					debugger;resetpw({
					    "phone":me.registerForm.phone,
					    "password":md5(me.registerForm.pw),
					    "captcha":me.registerForm.captcha,
					}).then(res=>{
						me.$message({
							message: '密码重置成功',
							type: 'success'
						});
						me.$emit("resetCb");
					}).catch(err=>{
						me.resetLoading=false;
					});
				}
			});
		},
  },
};
</script>
<style lang="scss" scoped>
	@function px2vw($px) {
		@return ($px / 1920) * 100vw;
	}
	.reset{
		padding:px2vw(20) px2vw(50);
		.register_field{
			margin-bottom: px2vw(22);
			line-height:px2vw(48);
			::v-deep.el-input__inner{
				line-height:px2vw(48);
				height:px2vw(48);
			}
			.register_pwStrength{
				margin-top:px2vw(10);
			}
			&.register_row{
				::v-deep.el-form-item__content{
					display: flex;
					align-items:center;
				}
				
			}
		}
		.register_capbtn{
			width: px2vw(200);
			height: px2vw(48);
			line-height: px2vw(48);
			padding: 0;
		}
		.register_submit{
			height: px2vw(48);
			line-height: px2vw(48);
			padding-top: 0;
			width: 100%;
			margin-top:px2vw(10);
		}
		.register_tips{
			padding-top: px2vw(20);
			span{
				color:#3486d2;
				cursor: pointer;
			}
		}
	}
</style>