<template>
    <BasePage />

    <div class="ResetPwd">
        <div class="R_round">
            <div class="text">
                修改密码
                <!-- <p>密码需要6-12位数字或英文</p> -->
            </div>
            <van-field v-model="data.UserName" left-icon="/img/login-i1.png" placeholder="请输入账号" />

            <!-- <van-field v-model="data.Phone" left-icon="/img/login_i1.png" placeholder="请输入已绑定的手机号" /> -->
            <van-field v-model="data.SmsCode" type="number" left-icon="/img/login-i2.png" placeholder="请输入验证码">
                <template #button>
                    <div @click="sendCode">
                        {{ isSend ? `已发送(${remainTime}s)` : "点击获取" }}
                    </div>
                </template>
            </van-field>
            <!-- <van-field v-model="data.OPassword" type="password" left-icon="/img/login-i3.png" placeholder="请输入旧密码" /> -->

            <van-field v-model="data.Password" type="password" left-icon="/img/login-i3.png" placeholder="请输入密码" />
            <van-field v-model="data.RePassword" type="password" left-icon="/img/login-i3.png" placeholder="请再次输入密码"
                :error="inputError.password" />

            <van-button block @click="reset">修改</van-button>
        </div>
    </div>
</template>

<script>

export default {
    name: 'ResetPwd',
    mounted() {
        this.init();
    },
    data() {
        return {
            data: {},
            isSend: false,
            remainTime: 0,
            inputError: {},
        }
    },
    methods: {
        init() {
        },
        valid(field, msg) {
            if (!field) {
                this.$showFailToast(msg);
                return false;
            }
            return true;
        },
        reset() {
            if (!this.valid(this.data.UserName, "请输入账号"))
                return;
            // if (!this.valid(this.data.Phone, "请输入绑定手机号"))
            //     return;
            if (!this.valid(this.data.SmsCode, '请输入验证码'))
                return;
            if (!this.valid(this.data.Password, '请输入密码'))
                return;
            if (!this.valid(this.data.RePassword, '再输入确认密码'))
                return;

            if (this.data.Password != this.data.RePassword) {
                this.$showFailToast("两次密码输入不一致");
                this.inputError.password = true;
                return;
            }
            else {
                this.inputError.password = false;
            }

            this.$post('Common/ResetPassword', this.data).then(res => {
                this.$showDialog({
                    title: '密码重置成功！',
                    message: '点击确认登录中心重新登录',
                    theme: 'round-button',
                    confirmButtonText: '确定',
                }).then(() => {
                    location.replace('#/Login');
                });

            }).catch(err => {
                this.$showFailToast(err.errmsg);
            });
        },
        sendCode() {
            // if (
            //     !this.data.Phone ||
            //     !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.data.Phone)
            // ) {
            //     this.$showToast({
            //         type: "fail",
            //         message: "手机格式不正确，请检查手机号",
            //     });
            //     return;
            // }
            this.$post('/v1/client/AuthClient/change-password', { Key: this.data.UserName })
                .then((data) => {
                    this.$showSuccessToast('发送成功');
                    this.isSend = true;
                    this.remainTime = 60;
                    let id = setInterval(() => {
                        if (this.remainTime > 0) this.remainTime--;
                        else {
                            clearInterval(id);
                            this.isSend = false;
                        }
                    }, 1000);
                })
                .catch((err) => {
                    this.$showFailToast(err.errmsg);
                });
        },
    }
}
</script>