<template>
     <div>
        <h3  class="pad-all">找回密码</h3>
        <el-form :model="modeflyForm" :rules="rules" ref="modeflyForm" class="pad-all" >
            <el-form-item label="手机号" prop="tel" :label-width="formLabelWidth">
                <el-input v-model="modeflyForm.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="user" :label-width="formLabelWidth">
                <el-input v-model="modeflyForm.user" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass" :label-width="formLabelWidth">
                <el-input type="password" v-model="modeflyForm.newPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verifly" :label-width="formLabelWidth">
                <el-input v-model="modeflyForm.verifly" autocomplete="off" class="verifly"></el-input>
                <el-button class="getVerifly">
                    <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="checkTel">获取验证码</span>
                    <span v-show="!sendAuthCode" class="auth_text"> 
                        <span class="auth_text_blue">{{auth_time}} </span> 
                        秒之后重新发送验证码
                    </span> 
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 弹框footer部分 -->
        <div slot="footer" class="dialog-footer" style=\'text-align:center;padding:50px 0;\'>
            <el-button type="primary" @click="submit" style=\'margin-right:30px;\'>提 交</el-button>
            <el-button @click="closeBox" style=\'margin-left:30px;\'>取 消</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            formLabelWidth:\'120px\',
            logining: false,
            sendAuthCode:true,   //布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ 
            auth_time: 0,        //倒计时 计数器
            verification:"",     //绑定输入验证码框框
            modeflyForm: {
                tel: \'\',
                user: \'\',
                newPass: \'\',
                verifly:\'\'
            },
            rules: {
                tel: [
                    { required: true, message: \'请输入手机号\', trigger: \'blur\' }
                ],
                user: [
                    { required: true, message: \'请输入用户名\', trigger: \'blur\' }
                ],
                newPass: [
                    { required: true, message: \'请输入新密码\', trigger: \'blur\' },
                    {validator:newPassBox,trigger:\'blur\'}
                ],
                verifly: [
                    { required: true, message: \'请输入验证码\', trigger: \'blur\' },
                    {validator:veriflyBox,trigger:\'blur\'}
                ]
            }
        }
        // 设置新密码的正则
        let newPassBox = (rules,value,callback)=>{
            let reg=/^[\w]{6,18}$/
            if(!reg.test(value)){callback(new Error(\'密码格式不正确,请输入6-18位的数字或字母\'))
            }else{
                callback()
            }
        }
        // 验证码正则
        let veriflyBox = (rules,value,callback)=>{
            console.log("启用正则")
            let reg=/[0-9]{6}/
            if(!reg.test(value)){callback(new Error(\'验证码格式不正确,请输入6位的数字\'))
            }else{
                callback()
            }
        }
    },      
    methods: {
        // 检查手机号格式
        checkTel(){
            let TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
            let tel = this.modeflyForm.tel 
            if(TEL_REGEXP.test(tel)){
                this.getAuthCode()
            }else{
                // 格式不正确
                this.$message("手机号格式不正确，请输入正确手机号")
                return true
            }              
        },
        //获取验证码
        getAuthCode() {
            // 手机号格式正确发请求
            let param = {mobile: this.modeflyForm.tel, type: \'1\'}
            this.$api.sys.getSmsCode(param).then(data=> {
                console.log(data)
                this.modeflyForm.verifly = data.msCode
            })      
            //const verification =this.modeflyForm.tel;
            //获取验证码请求
            this.sendAuthCode = false;
            //设置倒计时秒
            this.auth_time = 60
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--
                if(this.auth_time<=0){
                    this.sendAuthCode = true
                    clearInterval(auth_timetimer)
                }
            }, 1000)
        },
        submit(){
            let isNull = this.modeflyForm.tel == \'\' || this.modeflyForm.user == \'\' || this.modeflyForm.newPass == \'\' || this.modeflyForm.verifly == \'\'
            if(!isNull){
                //veriflyBox()
                // 后台验证修改
                // param: {mobile: \'手机号码\', type: 类型（1：找回密码）, smsCode: \'验证码\'}
                let param = {mobile: this.modeflyForm.tel, type: \'1\', smsCode: this.modeflyForm.verifly}
                this.$api.sys.checkSmsCode(param).then(data=> {
                    if(data.retCode == 0){
                        this.modoflyPass()
                    }   
                })
            }else{
                this.$message("手机号，用户名，密码，验证码不能为空！")
            }
                
        },
        modoflyPass(){
            // 修改请求
            console.log(\'修改\')
            let param = {loginName:this.modeflyForm.user , password: this.modeflyForm.newPass, mobile: this.modeflyForm.tel}
            this.$api.user.forgotPassword(param).then(data=> {
                console.log(data)
                if(data.retCode == 0){
                    this.$message("恭喜您。新密码设置成功！")
                }else{
                    this.$message("修改失败，请重试！")
                }                
            })      
        },
        closeBox(){
        }


  }
}
</script>