<template>
    <div style="overflow: auto; height: 100%; margin: 0 auto">
        <el-card
            class="el-card"
            style="
        width: 60%;
        margin-top: 35px;
        margin-left:20%
        margin-bottom: 35px;
        text-align: center;
      "
        >
            <div slot="header" style="font-weight: bold">
                <span>忘记密码</span>
            </div>
            <el-form
                :model="inputQuery"
                :rules="rules"
                ref="inputQuery"
                style="margin-left: 20%"
            >
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>用户账号:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="nickName">
                            <el-input
                                size="small"
                                placeholder="请输入登录用户账号"
                                v-model="inputQuery.userName"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>新密码:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="password">
                            <el-input
                                size="small"
                                placeholder="请输入密码"
                                type="password"
                                v-model="inputQuery.password"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>确认密码:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="confirmPassword">
                            <el-input
                                size="small"
                                type="password"
                                placeholder="请确认密码"
                                v-model="inputQuery.confirmPassword"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>手机号:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item prop="mobile">
                            <el-input
                                size="small"
                                placeholder="请输入手机号"
                                v-model="inputQuery.mobile"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-button
                            type="primary"
                            size="small"
                            icon="search"
                            :disabled="isTimer"
                            style="margin-top: 3.5px"
                            @click="getCheckCode"
                        >
                            <span>{{ btnTitle }}</span>
                        </el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>手机验证码:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="checkCode">
                            <el-input
                                size="small"
                                placeholder="请输入手机验证码"
                                v-model="inputQuery.checkCode"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div style="width: 100%">
                    <el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            icon="search"
                            style="margin-top: 20px;  "
                            @click="onSubmit('inputQuery')"
                        >重置密码
                        </el-button
                        >

                        <el-button type="primary" icon="search" @click="intentBack" style="margin-right: 130px"
                        >返回
                        </el-button
                        >
                    </el-form-item>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {getCheckcode, register, resetPasswd} from "../../api/auth/register";
    import {
        provinceAndCityData,
        regionData,
        provinceAndCityDataPlus,
        regionDataPlus,
        CodeToText,
        TextToCode,
    } from "element-china-area-data";

    export default {
        data() {
            let validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.inputQuery.password) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
                inputQuery: {
                    password: "",
                    mobile: "",
                    confirmPassword: "",
                    checkCode: "",
                    userName: "",
                },
                isTimer: false,
                btnTitle: "获取验证码",
                options: regionDataPlus,
                selectedOptions: [],

                rules: {
                    password: [{required: true, message: "请输入密码", trigger: "blur"}],

                    mobile: [{required: true, message: "请输入手机号", trigger: "blur"}],
                    confirmPassword: [
                        {required: true, message: "请确认密码", trigger: "blur"},
                        {validator: validatePass2, trigger: "blur"},
                    ],
                    checkCode: [
                        {required: true, message: "请输入手机验证码", trigger: "blur"},
                    ],
                },
            };
        },
        created() {
            this.getData();
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        resetPasswd(this.inputQuery).then((response) => {
                            if (response.code === 20000) {
                                this.loading = false;
                                this.$alert("密码重置成功，点击确定即可登录", "密码重置", {
                                    confirmButtonText: "确定",
                                    callback: (action) => {
                                        this.$router.push({path: "../login"});
                                    },
                                });
                            } else {
                                this.$message.error(response.message);
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },

            getData() {
                this.loading = true;
                getCompany().then((response) => {
                    this.loading = false;
                    this.inputQuery = response.data;
                });
            },

            getCheckCode(mobile) {
                let tquery = {
                    phoneNum: this.inputQuery.mobile,
                    userName: this.inputQuery.userName,
                };
                getCheckcode(tquery).then((response) => {
                    if (response.code === 20000) {
                        this.validateBtn();
                    } else {
                        this.$message.error(response.message);
                    }
                });
            },
            intentBack() {
                //  this.$router.push({path:'../readme/detail',query:{id:row.corpOrderId}});
                this.$router.go(-1);
            },
            validateBtn() {
                //倒计时
                let time = 60;
                let timer = setInterval(() => {
                    if (time === 0) {
                        clearInterval(timer);
                        this.isTimer = false;
                        this.btnTitle = "获取验证码";
                    } else {
                        this.btnTitle = time + "秒后重试";
                        this.isTimer = true;
                        time--;
                    }
                }, 1000);
            },

            handleChange(value) {
                this.inputQuery.area =
                    CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
                console.log(value + "\n" + this.inputQuery.area);
            },
        },
    };
</script>
<style>
    .register-text {
        width: 100%;
        font-size: 13px;
        font-family: "Microsoft YaHei";
        float: left;
        text-align: left;
        margin-top: 10px;
    }

    .el-card {
        margin-right: 20px;
        margin-top: 15px;
        /*transition: all .5s;*/
    }

    .el-row {
        display: flex;
        flex-wrap: wrap;
    }

    .el-col {
        border-radius: 4px;
        flex-wrap: wrap;
    }
</style>
