<template>
    <div class="forget-box">
        <login-header></login-header>
        <main class="wrap">
            <section>
                <div class="forget-title">重置登录密码</div>
                <div class="forget-form">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                        <h3>登录账号</h3>
                        <el-form-item prop="phoneNum">
                            <el-input
                                type="text"
                                v-model.number="ruleForm.phoneNum"
                                placeholder="请输入手机号"
                                class="phone"
                                readonly
                            ></el-input>
                        </el-form-item>
                        <h3>验证码</h3>
                        <el-form-item prop="verificationCode">
                            <el-input
                                v-model.trim="ruleForm.verificationCode"
                                placeholder="短信验证码"
                                class="verification-code"
                            ></el-input>
                            <el-button
                                type="primary"
                                :loading="sendSmsLoading"
                                @click="sendSms"
                                v-if="showCountDown"
                            >发送验证码</el-button>
                            <el-button
                                type="primary"
                                :loading="false"
                                class="count-down"
                                disabled
                                v-else
                            >{{countDown}}秒</el-button>
                        </el-form-item>
                        <el-form-item class="btn-reg">
                            <el-button
                                type="primary"
                                :loading="submitLoading"
                                @click="toChoose('ruleForm')"
                            >确定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </section>
        </main>
        <login-footer></login-footer>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { api_code } from "api/login.js";
import { api_sms } from "api/center.js";
import utils from "utils/utils.js";
import loginHeader from "./components/header";
import loginFooter from "./components/footer";
let timer;
export default {
    name: "verification",
    components: {
        loginHeader,
        loginFooter
    },
    computed: {
        ...mapState(["forgetLoginInfo"])
    },
    data() {
        // var checkPhone = (rule, value, callback) => {
        //     if (value === "") {
        //         callback(new Error("请输入手机号"));
        //     } else if (!utils.isvalidPhone(value)) {
        //         callback(new Error("手机号格式错误"));
        //     } else {
        //         callback();
        //     }
        // };
        var checkCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("验证码不能为空"));
            } else if (value.length < 6) {
                return callback(new Error("验证码格式不正确"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                phoneNum: "",
                verificationCode: "",
                markStr: ""
            },
            rules: {
                //phoneNum: [{ validator: checkPhone, trigger: "blur" }],
                verificationCode: [{ validator: checkCode, trigger: "blur" }]
            },
            showCountDown: true,
            countDown: 60,
            sendSmsLoading: false,
            submitLoading: false
        };
    },
    methods: {
        sendSms() {
            this.sendSmsLoading = true;
            let verificationCode = {
                data: {
                    phoneNo: this.ruleForm.phoneNum
                }
            };
            api_code(verificationCode)
                .then(res => {
                    if (res.success) {
                        this.showCountDown = false;
                        this.markStr = res.data.markStr;

                        this.$message({
                            message: "验证码发送成功，请注意查收",
                            type: "success"
                        });
                        timer = setInterval(() => {
                            this.countDown--;
                            if (this.countDown < 0) {
                                this.sendSmsLoading = false;
                                this.showCountDown = true;
                                clearInterval(timer);
                                this.countDown = 60;
                            }
                        }, 1000);
                    } else {
                        this.sendSmsLoading = false;
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {});
        },
        toChoose(formName) {
            this.submitLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let smsData = {
                        data: {
                            phoneNo: this.ruleForm.phoneNum,
                            markStr: this.markStr,
                            smsCode: this.ruleForm.verificationCode
                        }
                    };
                    api_sms(smsData).then(res => {
                        if (res.success) {
                            clearInterval(timer);
                            this.ruleForm.verificationCode = "";
                            this.countDown = 60;
                            this.showCountDown = true;
                            this.$router.push({ path: "/forget/reset" });
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.submitLoading = false;
                    });
                } else {
                    this.submitLoading = false;
                    return false;
                }
            });
        }
    },
    created() {
        clearInterval(timer);
        this.ruleForm.phoneNum = this.forgetLoginInfo.forgetLoginInfo.mobile;
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.forget-box /deep/ .btn-reg {
    margin-top: 40px;
    .el-button--primary {
        width: 100%;
    }
}

.forget-box /deep/ .verification-code {
    width: 190px;
}
.forget-box /deep/ .verification-code + .el-button--primary {
    width: 120px;
    padding: 12px 0;
    margin-left: 16px;
    vertical-align: middle;
}
.forget-box {
    background: #f7f7f7;
}
.wrap {
    min-height: calc(100vh - 224px);
    margin: 50px 0;
    section {
        width: 1080px;
        margin: 0 auto;
        background: #fff;
        .forget-form {
            width: 330px;
            margin: 0 auto;
            padding: 30px 0 38px;
            text-align: left;
            h3 {
                line-height: 40px;
                font-size: 16px;
                font-weight: normal;
            }
        }
    }
}
</style>
