<template>
    <div class="forgetPwdBox">
        <el-form  :model="ruleForm" class="forgetPwd" :rules="rules" ref="ruleForm"  style="width: 18%">
            <h1>神州餐厅管理系统-重置密码</h1>
            <br><br>
<!--发送验证码-->
            <el-button :disabled="disabledStatus" @click="sendEmailCode" style="text-align: left" >{{sendCodeBtnClick}}</el-button>
<!--验证码-->
            <el-form-item label="验证码：" prop="emailCode">
                <el-input  v-model=ruleForm.emailCode
                           placeholder="验证码"
                           maxlength="5"
                           show-word-limit></el-input>
            </el-form-item>
<!--新密码-->
            <el-form-item label="新密码：" prop="newPwd">
                <el-input  v-model="ruleForm.newPwd"
                           placeholder="新密码"
                           maxlength="24"
                           show-word-limit
                           show-password
                           clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" round @click="updatePwd('ruleForm')">修改</el-button>
                <el-button type="primary" round @click="cancelBtnClick">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';

    //邮箱验证  正则匹配QQ邮箱   这块用不到了，因为将邮箱信息存储到了Cookie中
    const checkEmail = (rule, value, cb) => {
        const regEmail = /^([0-9_-]{5,12})+@([q]{2}|[Q]{2})+(\.com|\.COM)+/
        if (regEmail.test(value)) {
            return cb()
        }
        cb(new Error('请输入正确的邮箱'))
    }

    export default {
        data(){
            return{
                disabledStatus:false,
                sendCodeBtnClick:'点击发送验证码',
                total:60,      //发送验证码的时间间隔
                emailCode:'',
                ruleForm:{
                    emailAddress:'',
                    emailCode:'',
                    newPwd:'',
                    newPwd1:''
                },
                rules:{
                    emailCode:[
                        {required: true, min:5, max:5, message: '5位有效数字', trigger: 'blur'}
                    ],
                    newPwd:[
                        {required: true,min: 6, max: 24, message: '长度在 6-24 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        created(){
            //在这之前，要根据Cookie获取的username信息，来查询QQ邮箱的信息，之后把邮箱的Cookie设置上
            axios.post('https://mz.tshe.cn/restauantCH/user/findUserName',{
                username:Cookies.get('username')
            })
                .then(((res)=>{
                    Cookies.set('emailAddress',res.data.data[0].emailAddress,1)
                }))
        },
        methods:{
            //验证码倒计时
            cuntDown(){

                //如果我点击了，我就将这个【秒数 && 按钮状态】存入Cookie，再次刷新页面的时候，我调用这个秒数。实现1分钟只能点击一次的功能

                this.sendCodeBtnClick=this.total+'s后重新发送' //解决点击后的第一秒不显示问题
                let clock=window.setInterval(()=>{
                    this.total--;
                    this.sendCodeBtnClick=this.total+'s后重新发送'
                    if(this.total<0){
                        window.clearInterval(clock);
                        this.total=60;
                        this.sendCodeBtnClick='点击发送验证码';
                        this.disabledStatus=false;
                    }
                },1000)

            },

//点击发送验证码
            sendEmailCode(){
                this.disabledStatus=true;//如果成功发送之后，邮箱的输入框变为禁用 => 变为：点击就禁用
                this.cuntDown();//发送验证码,时间间隔
                axios.post('https://mz.tshe.cn/restauantCH/user/sendEmailCode',{
                    userName:Cookies.get('username'),
                    emailAddress:Cookies.get('emailAddress')
                })
                    .then((res)=>{
                        console.log(res,'发送验证码的res');
                        if(res.data.code==0){
                            this.$message.success(res.data.msg+';一分钟有效期');
                        }
                        else if(res.data.code==-1){
                            this.$message.error(res.data.msg)
                        }
                        else if(res.data.code==-2){
                            this.$message.error(res.data.msg)
                        }
                    })
                    .catch((err)=>{
                        this.$message.error(err,'其他错误')
                    })
            },
//验证验证码是否正确
            updatePwd(formName){//成功修改完密码之后，清空数据库里的验证码（验证码只能使用一次）
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('https://mz.tshe.cn/restauantCH/user/verifyCodeUpdatePwd', {
                            userName: Cookies.get('username'),
                            emailCode: this.ruleForm.emailCode,
                            ps: this.ruleForm.newPwd
                        })
                            .then((res) => {
                                console.log(res, 'res');
                                if (res.data.code == 0){
                                    this.$message.success(res.data.msg);
                                    Cookies.remove('username',0);//修改成功清空Cookies账号
                                    Cookies.remove('passWord',0);//修改成功清空Cookies密码
                                    Cookies.remove('emailAddress',0);//修改成功清空Cookies密码
                                    this.$router.push('/')
                                }
                                else if (res.data.code == -1){
                                    this.$message.error(res.data.msg)
                                }
                                else if (res.data.code == -2){
                                    this.$message.error(res.data.msg)
                                }
                                else if (res.data.code == -3){
                                    this.$message.error(res.data.msg)
                                }
                                else if (res.data.code == -4){
                                    this.$message.error(res.data.msg)
                                }
                                else if (res.data.code == -5){
                                    this.$message.error(res.data.msg)
                                }
                            })
                    }
                    else{
                        this.$message.error('格式错误')
                    }
                })
            },
//取消
            cancelBtnClick(){
                Cookies.remove('username',0);
                Cookies.remove('passWord',0);
                Cookies.remove('emailAddress',0);
                this.$router.go(-1);
            },
        }
    }
</script>

<style>
    .forgetPwd {
        margin: 250px auto 0  ;
    }
    .forgetPwdBox{
        text-align: center;
    }
</style>
