<template>
	<div class="register">
		<el-row>
			<el-col :xl="{span:14,offset:5}" :lg="{span:14,offset:5}" :md="{span:16,offset:4}" :sm="{span:20,offset:2}"
				:xs="{span:24}" style="min-height: 50vh;background-color: #fff;">
				<div class=" m-b-20">
					<img src="../assets/images/ad3.png" alt="" style="width: 100%;" />
				</div>
				<div style="">
					<div style="font-size: 18px;font-weight: bold;padding-left: 10px;">
						企业密码找回
					</div>
					<div style="padding: 20px;">
						<el-form ref="form" :model="form" :rules="rules" label-width="100px">
							<el-form-item label="企业用户名" prop="username">
								<el-input v-model="form.username" @blur="searchEmail"></el-input>
							</el-form-item>
							<el-form-item label="企业邮箱" prop="" v-if="form.qyEmail != null&& yzmType == false">
								<el-input v-model="form.qyEmail" readonly></el-input>
							</el-form-item>
							<el-form-item label="新密码"  prop="password" v-if="form.qyEmail != null && yzmType == true">
								<el-input v-model="form.password" placeholder="请输入新密码" type="password" ></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="new" v-if="form.qyEmail != null && yzmType == true">
								<el-input v-model="form.new" placeholder="请确认密码" type="password"></el-input>
							</el-form-item>
							<el-form-item label="验证码" prop="code" v-if="form.qyEmail != null && yzmType == false">
								<div style="display: flex;">
									<el-input v-model="form.code" placeholder="请输入验证码" style="width: 40%;"></el-input>
									<el-button @click.prevent="sendYzm()" :loading="loading" :disabled="disabled" type="primary" style="margin-left: 10px;">{{disabled == false?'发送验证码':time+'s后重新发送'}}</el-button>
								</div>
								
							</el-form-item>
							<el-form-item v-if="form.qyEmail != null">
								<el-button type="primary" @click="yzmSubmit" v-if="yzmType == false" :loading="subLoad">验证</el-button>
								<el-button type="primary" @click="onSubmit" :loading="subLoad" v-if="yzmType == true">确定</el-button>
								<el-button>返回</el-button>
							</el-form-item>
						</el-form>
					</div> 
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script> 
	import { searchQyeamil,sendEmailYzm,subNewMm,yzmIsok} from "@/api/userIndex"
	export default {
		name: "mmzh", 
		data() {
			var passWord = (rule, value, callback) => {
				const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/
				if (regex.test(value) == true) {
					callback();
				} else {
					callback(new Error('6-20位英文（区分大小写）、数字的组合'));
				}
			}
			//两次密码是否一致验证
			const equalToPassword = (rule, value, callback) => {
				if (this.form.password !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};
			return {
				form:{
					username:null,
					qyEmail:null,
					password:null,
					new:null,
					code:null,
				},
				rules:{
					username: [
					  { required: true, message: "请输入企业用户名", trigger: "change" }
					],
					password:[
						{ required: true, message: "请输入新密码", trigger: "change" },
						{ required: true, validator: passWord, trigger: "change" }
					],
					new:[ 
						{ required: true, validator: equalToPassword, trigger: "change" }
					],
					code:[
						{ required: true, message: "请输入验证码", trigger: "change" },
					]
					
				},
				disabled:false,
				loading:false,
				jsq:null,
				time:120,
				subLoad:false,
				yzmType:false,
			}
		},
		created() {

		},
		watch:{
			time:{
				handler:function(n,o){ 
					if(n==0){
						this.disabled = false
						clearInterval(this.jsq)
						this.time = 120
					}
				}
			}
		},
		methods: {
			searchEmail(){ 
				if(this.form.username != null){ 
					searchQyeamil(this.form).then(res=>{
						this.form.qyEmail = res.data
					})
				}
				
			},
			sendYzm(){
				this.loading = true
				sendEmailYzm(this.form).then(res=>{
					this.$message({
						type:"success",
						message:"发送成功"
					})
					this.loading = false
					this.disabled = true 
					this.jsq = setInterval(()=>{
						this.time--
					},1000) 
				}).catch(error=>{
					this.loading = false
				})
				
			},
			onSubmit(){
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.subLoad = true
						subNewMm(this.form).then(res=>{
							this.resetForm("form");
							this.$message({
								type:"success",
								message:"修改成功"
							}) 
							setTimeout(()=>{
								this.$router.push({path:"/userIndex"})
							},1000)
						}).catch(error=>{
							this.subLoad = false
						})
					} else {
						
					}
				});
			},
			yzmSubmit(){
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.subLoad = true
						yzmIsok(this.form).then(res=>{
							this.subLoad = false
							this.yzmType = true
							this.$message({
								type:"success",
								message:"验证成功"
							})  
						}).catch(error=>{
							this.subLoad = false
						})
					} else {
						
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.register {
		background-color: #F4F4F7;
		min-height: 100vh;
	}
</style>