<template>
    <div class="see flex-colunm">
        <el-steps
            :active="active"
            finish-status="success"
            style="width: 4.8rem"
        >
            <el-step title="验证手机号"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="找回成功"></el-step>
        </el-steps>
        <!-- 验证手机号 -->
        <div class="verification" v-if="active == 0">
            <el-form
                ref="form"
                :model="form"
                label-width="1.4rem"
                :rules="rules"
            >
                <el-form-item label="手机号" prop="phone" class="item">
                    <el-input
                        v-model="form.phone"
                        placeholder="请输入手机号"
                        style="width: 2.4rem"
                        maxlength="30"
                    ></el-input>
                </el-form-item>
                <div class="getcode">
                    <el-form-item label="验证码" prop="code" class="item">
                        <el-input
                            v-model="form.code"
                            placeholder="请输入验证码"
                            style="width: 1.55rem"
                            maxlength="30"
                        ></el-input>
                    </el-form-item>
                    <div class="code" @click="refreshCode">
                        <!--   ：fresh：父组件向子组件传送刷新验证码的信号；
              @makedCode：子组件向父组件传送验证码的值-->
                        <Identify
                            :fresh="flag"
                            @makedCode="getMakedCode"
                        ></Identify>
                    </div>
                </div>
                <div class="getphonecode">
                    <el-form-item label="短信验证码" prop="verify" class="item">
                        <el-input
                            v-model="form.verify"
                            placeholder="请输入短信验证码"
                            style="width: 2.4rem"
                            maxlength="30"
                        ></el-input>
                    </el-form-item>
                    <div
                        v-show="Verification"
                        class="phonecode"
                        @click="getPhoneCode"
                    >
                        获取短信验证码
                    </div>
                    <div v-show="!Verification" class="phonecode">
                        <span>{{ timer }}</span
                        >秒后重新获取
                    </div>
                </div>
            </el-form>
        </div>
        <!-- 重置密码 -->
        <div class="reset" v-if="active == 1">
            <el-form
                ref="organ"
                :model="organ"
                label-width="2rem"
                :rules="rules"
            >
                <el-form-item label="输入密码" prop="password" class="item">
                    <el-input
                        v-model="organ.password"
                        placeholder="请输入密码"
                        style="width: 3.4rem"
                        key="organ.password"
                        maxlength="30"
                        show-password
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="请再次输入密码"
                    prop="isPassword"
                    class="item"
                >
                    <el-input
                        v-model="organ.isPassword"
                        placeholder="请再次输入密码"
                        style="width: 3.4rem"
                        key="organ.isPassword"
                        maxlength="30"
                        show-password
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 找回密码 -->
        <div class="seek t2" v-if="active == 3">
            {{ total }}s后自动跳转登录页
        </div>
        <nuxt-link
            to="/login/user"
            v-if="active == 3"
            tag="div"
            class="t2 nextButton"
            >去登陆</nuxt-link
        >
        <button @click="next" class="t2 nextButton" v-else>下一步</button>
    </div>
</template>
<script>
import Identify from "~/components/identify";
import { getVerifyPhone, sendSms, getResetPassword } from "@/common/list.js";
export default {
    data() {
        // 修改密码验证二次是否输入相同
        let validate = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.organ.isPassword !== "") {
                    this.$refs.organ.validateField("isPassword");
                }
                callback();
            }
        };
        let validate2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.organ.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        let checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("手机号不能为空"));
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                console.log(reg.test(value));
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error("请输入正确的手机号"));
                }
            }
        };
        let checkCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("验证码不能为空"));
            } else {
                let code = this.code;
                console.log(code);
                if (value.toLowerCase() == code.toLowerCase()) {
                    callback();
                } else {
                    return callback(new Error("请输入正确的验证码"));
                }
            }
        };
        return {
            /* dataMsg:0, */
            Verification: true,
            timer: 60,
            total: 3,
            active: 0,
            flag: true, //该值变化，就会触发刷新
            code: "", //刷新后的验证码
            form: {
                phone: "",
                code: "",
                verify: "",
            },
            organ: {
                password: "",
                isPassword: "",
            },
            rules: {
                phone: [
                    {
                        required: true,
                        validator: checkPhone,
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        validator: checkCode,
                        trigger: "blur",
                    },
                ],
                verify: [
                    {
                        required: true,
                        message: "请输入手机验证码",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                    },
                    {
                        validator: validate,
                        trigger: "blur",
                    },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                        message: "密码需由8-16位数字字母组合",
                    },
                ],
                isPassword: [
                    {
                        required: true,
                        message: "请再次输入密码",
                        trigger: "blur",
                    },
                    {
                        validator: validate2,
                        trigger: "blur",
                    },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                        message: "密码需由8-16位数字字母组合",
                    },
                ],
            },
        };
    },
    components: {
        Identify,
    },
    mounted() {
        console.log(this.flag);
        this.flag = !this.flag;
    },
    methods: {
        //发送短信
        async getPhoneCode() {
            if (
                this.form.code.toLowerCase() === this.code.toLowerCase() &&
                this.form.phone.length == 11
            ) {
                /* this.$refs.form.validateField('phone',async (phone_check) => {
              if(!phone_check) return
              let phonemes = {}
              phonemes.phone = this.form.phone
              phonemes.type = 2
              const {data,code,msg} =await sendSms(phonemes)
              if(code ==200){
              this.Verification = false;      //点击button改变v-show的状态
              let auth_timer = setInterval(()=>{  //定时器设置每秒递减
                  this.timer--;        //递减时间
                  if(this.timer<=0){  
                    this.Verification = true;    //60s时间结束还原v-show状态并清除定时器
                    clearInterval(auth_timer)
                  }
                },1000)
              }
              if(code ==500){
              this.$message.error(msg);
              }
            })
          }else{
              alert("有未填写的选项或错误")
            }
        }, */

                let phonemes = {};
                phonemes.phone = this.form.phone;
                phonemes.type = 2;
                const { data, code, msg } = await sendSms(phonemes);
                //code返回为500时 友情提示账户未注册
                if (code == 200) {
                    this.Verification = false; //点击button改变v-show的状态
                    let auth_timer = setInterval(() => {
                        //定时器设置每秒递减
                        this.timer--; //递减时间
                        if (this.timer <= 0) {
                            this.Verification = true; //60s时间结束还原v-show状态并清除定时器
                            clearInterval(auth_timer);
                        }
                    }, 1000);
                }
                if (code == 500) {
                    this.$message.error(msg);
                }
            } else {
                this.$message.error("你的输入有误,请重新输入");
            }
        },
        countDown() {
            let clock = window.setInterval(() => {
                this.total--;
                if (this.total == 0) {
                    this.$router.push({ path: "/login/user" });
                }
            }, 1000);
        },
        next() {
            console.log(this.active);
            if (this.active == 0) {
                //  提交验证手机号操作
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        //验证手机验证码
                        /* let dataform={}
              dataform.phone=this.form.phone
              dataform.verify=this.form.verify
              const {data,code,msg} = getVerifyPhone(dataform)
                console.log(1111111111111111111)
                if(code==500){
                } */
                        this.active++;
                    } else {
                        this.$message.error("有未填写的选项或者错误选项");
                        console.log("error submit!!");
                        return false;
                    }
                });
            } else if (this.active == 1) {
                // 设置密码
                this.$refs.organ.validate(async (valid) => {
                    if (valid) {
                        /* this.active = 3 */
                        //将手机号和重新设置的密码发送给后端
                        let dataform = {};
                        dataform.phone = this.form.phone;
                        dataform.verify = this.form.verify;
                        var { code,msg } = await getVerifyPhone(dataform);
                        if (code == 200) {
                            let mes = {};
                            mes.verify = this.form.verify;
                            mes.phone = this.form.phone;
                            mes.password = this.organ.password;
                            var { data, code, msg } = await getResetPassword(
                                mes
                            );
                            console.log(code + "-------------" + "111111111");
                            if (code == 200) {
                                this.active++;
                                this.countDown();
                                this.$message.success(msg);
                                    console.log(code + "22222222222");
                            } else {
                                this.$message.error(msg);
                                console.log("error submit!!");
                                return false;
                            }
                        }else{
                            this.$message.error(msg)
                        }
                    }
                });
            }
        },
        // 切换验证码
        refreshCode() {
            this.flag = !this.flag;
        },
        getMakedCode(code) {
            this.code = code;
            console.log(this.code);
        },
    },
};
</script>

<style scoped>
.nextButton {
    width: 3rem;
    height: 0.48rem;
    background: rgba(4, 134, 254, 1);
    border-radius: 0.04rem;
    line-height: 0.46rem;
    text-align: center;
    color: #fff;
    margin-bottom: 3.6rem;
    margin-top: 1rem;
}

.getcode > .code {
    /*margin: 400px auto;*/
    width: 0.68rem;
    height: 0.32rem;
    /*border: 1px solid red;*/
    position: absolute;
    top: 0;
    right: 0;
}

.item .el-form-item__label {
    font-size: 0.16rem;
    font-weight: bold;
}

.getcode,
.getphonecode {
    position: relative;
}

.getphonecode > .phonecode {
    font-size: 0.14rem;
    font-weight: 400;
    color: rgba(51, 136, 255, 1);
    position: absolute;
    top: 0.13rem;
    right: -1.5rem;
    cursor: pointer;
}

.verification,
.seek,
.reset {
    margin-top: 1.1rem;
}
</style>

