<template>
    <div class="login-cont">
        <div class="login-main login-main-forget">
            <div class="logo-text">
                <img src="@/assets/forgetPwd.png" height="40">
            </div>
            <van-form @submit="onSubmit">
                <div class="field-input">
                    <van-field
                            v-model="formObj.mobile"
                            :left-icon="require('../assets/user.png')"
                            label-width="4.2em"
                            name="mobile"
                            label="手机号"
                            placeholder="请输入您的手机号"
                            clearable
                            :rules="[{ required: true, message: '' }]"
                    ></van-field>
                </div>
                <div class="field-input">
                    <van-field
                            v-model="formObj.code"
                            center
                            :left-icon="require('../assets/code.png')"
                            label-width="4.2em"
                            name="code"
                            label="验证码"
                            placeholder="请输入验证码"
                            :rules="[{ required: true, message: '' }]">
                        <template #button>
                            <!--native-type="button" 阻止触发表单提交-->
                            <van-button size="small" type="info" native-type="button" @click="_getCode">
                                发送验证码
                            </van-button>
                        </template>
                    </van-field>
                </div>
                <div class="field-input">
                    <van-field
                            v-model="formObj.password"
                            :left-icon="require('../assets/psd.png')"
                            label-width="4.2em"
                            type="password"
                            name="password"
                            label="新密码"
                            placeholder="请输入新密码"
                            clearable
                            :rules="[{ required: true, message: '' }]"
                    ></van-field>
                </div>
                <div class="field-input">
                    <van-field
                            v-model="confirmPwd"
                            :left-icon="require('../assets/psd.png')"
                            label-width="4.2em"
                            type="password"
                            name="confirmPwd"
                            label="确认密码"
                            placeholder="请确认密码"
                            clearable
                            :rules="[{ required: true, message: '' }]"
                    ></van-field>
                </div>
                <div class="btn-box" style="margin-top: 30px">
                    <van-button block type="info" native-type="submit">
                        确认并登录
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import {sms, sso} from '@/api'

    export default {
        name: "ForgetPwd",
        data() {
            return {
                confirmPwd: '',
                formObj: {
                    mobile: '',
                    password: '',
                    code: ''
                },
            }
        },
        methods: {
            _getCode: async function () {
                if (this.formObj.mobile === '') {
                    this.$toast('请输入手机号');
                } else {
                    if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.formObj.mobile)) {
                        this.$toast('手机号格式不正确');
                    } else {
                        let result = await sms.getCode({
                            module: 'changePasswordByMobile',
                            mobile: this.formObj.mobile
                        })
                        if (result) {
                            this.$toast.success('发送成功!');
                        }
                    }
                }
            },
            onSubmit() {
                if (this.formObj.password !== this.confirmPwd) {
                    this.$toast('两次填写的密码不一致');
                } else {
                    this._save()
                }
            },
            _save: async function () {
                let result = await sso.changPwd(this.formObj)
                if (result) {
                    this.$toast.success('密码修改成功!');
                    setTimeout(() => {
                        this._toLogin();
                    }, 1000)
                }
            },
            //跳到注册界面
            _toLogin() {
                // this.$navigation.cleanRoutes();
                this.$router.replace('/login');
            },
        }
    }
</script>

<style scoped>

</style>
