<template>
    <div class="page">
        <div class="main">
            <!-- <div class="tit">找回密码</div> -->
            <div class="inp-box">
                <input
                    type="text"
                    name="phone"
                    v-model="form.phone"
                    placeholder="手机号码"
                />
            </div>

            <div class="inp-box code-box">
                <input
                    type="text"
                    name="code"
                    v-model="form.code"
                    placeholder="验证码"
                />
                <span
                    class="code-btn"
                    :class="{ dis: timeing }"
                    @click="getCode()"
                    >{{ codeStr }}</span
                >
            </div>

            <div class="inp-box">
                <input
                    type="password"
                    name="password"
                    v-model="form.password"
                    placeholder="请输入密码"
                />
            </div>
            <div class="inp-box">
                <input
                    type="password"
                    name="password2"
                    v-model="form.password2"
                    placeholder="确认密码"
                />
            </div>
            <button class="btn" @click="submit">确定</button>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            form: {
                phone: "",
                code: "",
                password: "",
                password2: "",
                teamNum: "",
            },
            timeing: false,
            codeStr: "发送验证码",
        };
    },

    onLoad() {
        uni.hideLoading();
    },

    onShow() {},

    // 函数
    methods: {
        getCode() {
            if (this.timeing) {
                return;
            }
            let phoneReg = /^[1][1-9][0-9]{9}$/;
            if (!this.form.phone) {
                return this.fn.showToast("请输入手机号");
            }
            if (!phoneReg.test(this.form.phone)) {
                return this.fn.showToast("手机号格式不正确");
            }
            this.sendCode();
            this.downTime();
        },
        sendCode() {
            this.api
                .get("/Login/SendSms", { mobile: this.form.phone,type:1 })
                .then((res) => {});
        },
        downTime() {
            this.timeing = true;
            let t = 60;
            this.codeStr = t + "s重新获取";
            let timer = setInterval(() => {
                t--;
                if (t === 0) {
                    clearInterval(timer);
                    this.codeStr = "发送验证码";
                    this.timeing = false;
                } else {
                    this.codeStr = t + "s重新获取";
                }
            }, 1000);
        },

        submit() {
            if (!this.form.phone) {
                this.fn.showToast(`请输入手机号码`);
                return;
            }
            if (!this.form.code) {
                this.fn.showToast(`请输入验证码`);
                return;
            }

            if (!this.form.password) {
                this.fn.showToast(`请输入密码`);
                return;
            }

            if (this.form.password.length < 6) {
                this.fn.showToast(`密码最少6位`);
                return;
            }

            if (!this.form.password2) {
                this.fn.showToast(`请输入确认密码`);
                return;
            }

            if (this.form.password2 !== this.form.password) {
                this.fn.showToast(`两次密码不一致`);
                return;
            }

            uni.showLoading({
                title: "提交中",
            });
            let sendData = {
                mobile: this.form.phone,
                smsCode: this.form.code,
                password: this.form.password,
            };
            console.log(this.form);
            this.api.post("/Login/FindPwd", sendData).then((res) => {
                uni.hideLoading();
                if (res.success) {
                    this.fn.showToast(`密码修改成功`);
                    this.$store.commit("user/logout", null);
                    this.router.push({
                        path: "/pages/index/login",
                        isTabBar: true,
                    });
                } else {
                    this.fn.showModal({
                        title: "密码修改失败",
                        content: res.message,
                        showCancel: false,
                    });
                }
            });
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    height: 100%;
    background-color: #fff;
}
.main {
    padding-top: px(120);
    padding-left: px(40);
    padding-right: px(40);
}
.tit {
    font-size: px(50);
    padding-bottom: px(100);
    text-align: center;
    padding-bottom: px(60);
}
.inp-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c3c1c2;
    padding: px(30) 0;
    margin-bottom: px(30);
}
.inp-box span {
    font-size: px(32);
    color: rgb(0, 188, 38);
    border-radius: px(15);
    border: 1px solid rgb(0, 188, 38);
    width: px(230);
    height: px(80);
    text-align: center;
    line-height: px(80);
    flex-shrink: 0;
    margin-left: px(30);
}
.inp-box input {
    width: 100%;
}
.inp-box .dis {
    color: #999;
    border-color: #999;
    pointer-events: none;
}
.btn {
    margin-top: px(120);
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
}
.code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .code-btn {
        width: px(220);
        flex-shrink: 0;
        font-size: px(40);
        padding: 0 px(10);
        border: none;
        &.dis {
            border-color: #f1f1f1;
            color: #999;
        }
    }
}
</style>