<template>
    <app-layout title="找回密码">
        <view class="common-form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>手机号</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="mobile" placeholder="请输入手机号码" placeholder-class="placeholder-style-3" />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>验证码</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="verificationCode"
                        placeholder="请输入验证码"
                        placeholder-class="placeholder-style-3"
                    />
                    <view class="get-code" @click="getVerifyCode">
                        <text class="text active" v-if="canUse">获取验证码</text>
                        <text class="text" v-else>{{ sec }}s后重新获取</text>
                    </view>
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>新密码</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="password" placeholder="请输入新密码" placeholder-class="placeholder-style-3" />
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">立即找回</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "member-password",
    data() {
        return {
            timeTask: null,
            canUse: true,
            sec: 0,
            mobile: "",
            password: "",
            verificationCode: "",
        };
    },
    components: {
        AppLayout,
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 获取验证码
         */
        getVerifyCode() {
            if (this.canUse) {
                this.$models.user
                    .sendVerificationCode(this.mobile)
                    .then((response) => {
                        this.parseTime(60);
                    })
                    .catch((e) => {
                        this.$utils.toast(e);
                    });
            } else {
                this.$utils.toast("请稍后再试");
            }
        },
        /**
         * 倒计时
         */
        parseTime(sec) {
            const that = this;
            this.canUse = false;
            this.sec = sec;
            clearInterval(this.timeTask);
            this.timeTask = setInterval(() => {
                that.sec -= 1;
                if (that.sec <= 0) {
                    that.canUse = true;
                    that.sec = 0;
                }
            }, 1000);
        },
        /**
         * 找回密码
         */
        submit() {
            this.$models.user
                .resetPassword(
                    {
                        username: this.mobile,
                        password: this.password,
                    },
                    this.verificationCode
                )
                .then((message) => {
                    this.$utils.toast(message).then(() => {
                        this.$utils.toPage("/pages/auth/auth");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.common-form-container {
    .input-item {
        position: relative;
    }
    .get-code {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 24rpx 0;
        .text {
            font-size: 28rpx;
            color: #999999;
        }
        .text.active {
            color: #ffa800;
        }
    }
    .title-box {
        font-weight: normal;
    }
}
</style>