<template>
    <div class="login-cont">
        <div class="login-main">
            <h1>欢迎登录</h1>
            <van-form @submit="onSubmit">
                <div class="field-input">
                    <van-field
                            v-model="formObj.username"
                            :left-icon="require('../assets/user.png')"
                            label-width="4.2em"
                            name="username"
                            label="用户名"
                            placeholder="请填写用户名"
                            clearable
                            :rules="[{ required: true, message: '' }]"
                    ></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="forget-text">
                    <div>
                        <van-checkbox shape="square" v-model="checked" icon-size="18px">记住密码</van-checkbox>
                    </div>
                    <div @click="_forgetPwd">忘记密码？</div>
                </div>
                <div class="btn-box">
                    <van-button block type="info" native-type="submit">
                        立即登录
                    </van-button>
                </div>
            </van-form>
        </div>
        <confirm-dialog v-if="showPopup" title="请输入您的新密码" @confirm="_toLogin" @close="showPopup=false">
            <van-field v-model="formObj.newPwd" label="密码" placeholder="请输入您的新密码"></van-field>
        </confirm-dialog>
    </div>
</template>

<script>
    import {sso, sysUser} from '../api'

    export default {
        name: "Login",
        data() {
            return {
                formObj: {
                    username: '',
                    password: '',
                    newPwd: ''
                },
                checked: false,
                showPopup: false
            }
        },
        mounted() {
            this._inactivate()
        },
        methods: {
            onSubmit(res) {
                // console.log(res, 'login-info')
                this._login(res)
            },
            _login: async function (res) {
                let token = await sso.login(res)
                if (token) {
                    console.log('token')
                    this.$global.setToken(token)
                    if (this.checked) {
                        localStorage.setItem('username', this.formObj.username);
                        if (localStorage.getItem('inactivate')) {
                            //第一次激活后保存密码
                            localStorage.setItem('password', this.formObj.newPwd);
                        } else {
                            //已经激活状态保存密码
                            localStorage.setItem('password', this.formObj.password);
                        }
                    } else {
                        localStorage.removeItem('username');
                        localStorage.removeItem('password');
                    }
                    this._getUserInfo();
                } else {
                    console.log('_inactivate')
                    //激活
                    this._inactivate();
                }
            },
            //获取用户信息
            async _getUserInfo() {
                console.log('_getUserInfo')
                let user = await sysUser.getUserInfo();
                if (user) {
                    this.$global.setUserInfo(user);
                    this.$router.replace('/home');
                    //todo 清空路由  报错问题  需要降低vue-router版本
                    // this.$navigation.cleanRoutes();
                }
            },
            _forgetPwd() {
                this.$router.push('/forget_pwd')
            },
            //激活
            _inactivate() {
                if (localStorage.getItem('inactivate') === 'inactivate') {
                    this.formObj.newPwd = ''
                    this.showPopup = true
                }
            },
            _toLogin() {
                if (this.formObj.newPwd === '') {
                    this.$toast('请输入新密码！');
                    return
                }
                let data = {
                    username: this.formObj.username,
                    password: this.formObj.newPwd
                }
                this._login(data)
            }
        }
    }
</script>

<style scoped>

</style>
