<template>
	<div class="upDataPassWord">
		<div class="content">
			<el-form ref="formRef" :model="form" style="width: 100%;margin-top: 20px;">
				<el-form-item label="手机号" prop="phone" :rules="[
			        { required: true, message: '请输入手机号' },
			      ]">
					<el-input class="inputClass" size="large" v-model.number="form.phone" type="text"
						placeholder="请输入手机号" />
				</el-form-item>
				<el-form-item label="验证码" prop="code" :rules="[
				    { required: true, message: '请输入验证码' },
				  ]">
					<div style="width: 100%;" class="flex align-center justify-between">
						<el-input class="inputClass" size="large" v-model.number="form.code" type="text"
							placeholder="请输入验证码" />
						<el-button :disabled="isSendmsg" @click="geBindMsg()" type="primary"
							style="margin-left: 20px;height: 46px;width: 200px;">
							{{isSendmsg?msgCode:'获取验证码'}}
						</el-button>
					</div>

				</el-form-item>
				<el-form-item label="新密码" prop="passWord" :rules="[
				    { required: true, message: '请输入新密码' },
				  ]">
					<el-input class="inputClass" size="large" v-model="form.passWord" type="password"
						placeholder="请输入新密码" />
				</el-form-item>
			</el-form>
			<el-button @click="updataPass()" type="primary" style="margin-top: 50px;width: 100%;" size="large">
				确认修改
			</el-button>
		</div>
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: '', //验证码
					passWord: '', //新密码
				},
				isSendmsg: false,
				msgCode: 59,
				screenHeight: 0, //屏幕高度
				intimerMsg: null, //验证码定时器
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
		},
		methods: {
			//修改密码
			updataPass() {
				let formRef = this.$refs.formRef
				formRef.validate((valid) => {
					if (valid) {
						let data = {
							phone: this.form.phone,
							msg: this.form.code,
							pwd: this.form.passWord
						}
						this.$Request.post('/app/Login/forgetPwd', data).then(res => {
							if (res.code == 0) {
								ElMessageBox.alert('已重置密码，请使用新密码登录', '提示', {
									confirmButtonText: '确认',
									callback: () => {
										localStorage.removeItem('token');
										localStorage.removeItem('userId');
										localStorage.removeItem('userType')
										// 调用重置状态的函数  
										this.$store.dispatch('SET_DATA');
										this.$router.push({
											name: 'login'
										})
									}
								})

							} else {
								ElMessage({
									message: res.msg,
									type: 'error',
									duration: 1500,
									offset: this.screenHeight / 2
								})
							}
						})
					}
				})
			},
			//获取验证码
			geBindMsg() {
				if (!this.form.phone) {
					ElMessage({
						message: '请输入手机号',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				this.$Request.get('/app/Login/sendMsg/' + this.form.phone + '/forget').then(res => {
					if (res.code == 0) {
						this.isSendmsg = true
						this.intimerMsg = setInterval(() => {
							if (this.msgCode > 0) {
								this.msgCode--;
							} else {
								// 倒计时结束后清除定时器,把状态修改为发送,倒计时恢复60秒
								clearInterval(this.intimerMsg);
								this.isSendmsg = false
								this.msgCode = 59
							}
						}, 1000);
					} else {
						ElMessage({
							message: res.msg,
							type: 'error',
							duration: 1500,
							offset: this.screenHeight / 2
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 50%;
	}
</style>