<template>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-12 col-lg-4">
                <div class="card login-box-container">
                    <div class="card-body">
                        <div class="authent-logo">
                            <img src="../../assets/images/logo@2x.png" alt="">
                        </div>
                        <div class="authent-text">
                            <p>欢迎访问{{ systemname }}!</p>
                            <p>请登录你的账户.</p>
                        </div>

                        <form>
                            <div class="mb-3">
                                <div class="form-floating">
                                    <input v-model="formdata.username" type="text" class="form-control"
                                        id="floatingInput" placeholder="username">
                                    <label for="floatingInput">用户名</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="form-floating">
                                    <input v-model="formdata.password" type="password" class="form-control"
                                        id="floatingPassword" placeholder="Password">
                                    <label for="floatingPassword">密码</label>
                                </div>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">记住我</label>
                            </div>
                            <div class="d-grid">
                                <button type="button" class="btn btn-info m-b-xs" @click="login" :disabled="isLogining">
                                      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="isLogining"></span>
                                    {{isLogining ? 'Loading...' : '登录'}}
                                    </button>
                                <button class="btn btn-primary">三方登录</button>
                            </div>
                        </form>
                        <div class="authent-reg">
                            <p>没有账户？<router-link to="/auth/register">点击创建</router-link></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import md5 from 'blueimp-md5';
import { mapGetters } from 'vuex';
import auth from '@/utils/auth';

export default {
    data() {
        return {
            formdata: {
                username: '',
                password: ''
            },
            isLogining:false
        }
    },
    methods: {
        /**
         * 用户登录
         */
        async login() {
            this.isLogining = true
            //记录原始密码，用于修改MD5后还原原始文本
            const passwordOld = this.formdata.password
            this.formdata.password = md5(passwordOld)
            try {
                const res = await this.$api.login(this.formdata)
                let msg = ''
                let type = 'danger'
                switch (res.code) {
                    case 2000: msg = '登录成功'; break
                    case 2001: msg = '用户名或密码错误'; break
                    case 2002: msg = '账户被禁用'; break
                    case 2004: msg = '用户不存在'; break
                    default: msg = '登录失败'; break
                }
                if (res.code == 2000) {
                    //储存登录凭证
                    auth.setAccessToken(res.data.token)
                    auth.setRefreshToken(res.data.refreshToken)
                    auth.setUserId(res.data.userInfo.id)
                    this.$store.commit('userinfo/SET_USERINFO', res.data.userInfo)
                    type = 'success'
                    this.$alert(msg, type)
                    this.$router.push('/layout/index')
                }else{
                    this.$alert(msg, type)
                }

            } catch (e) {
                console.log(e)
                this.$alert('服务不可用', 'danger')
            } finally {
                //还原密码文本
                this.formdata.password = passwordOld
                this.isLogining = false
            }
        }
    },
    computed: {
        /**
         * 初始化系统配置
         */
        ...mapGetters('config', ['systemname'])
    }
}

</script>

<style scoped></style>