<template>
<div class="login">
    <div class="login-box">
        <div class="left-card">
            <q-carousel v-model="slide" :autoplay="10000" swipeable animated control-color="white" :padding="false" infinite height="100%" class="bg-primary text-white shadow-1">
                <q-carousel-slide name="first" class="q-pa-none">
                    <div class="item-card">
                        <div class="head-icon">
                            <q-img ratio="1" :img-style="{borderRadius:'50%'}" src="../../assets/images/login/zhang.png" />
                        </div>
                        <div class="publisher">张载</div>
                        <div class="job">思想家、教育家</div>
                        <div class="content">为天地立心，为生民立命，为往圣继绝学，为万世开太平。</div>
                    </div>
                </q-carousel-slide>
                <q-carousel-slide name="tow" class="q-pa-none">
                    <div class="item-card">
                        <div class="head-icon">
                            <q-img ratio="1" :img-style="{borderRadius:'50%'}" src="../../assets/images/login/kong.jpg" />
                        </div>
                        <div class="publisher">孔子</div>
                        <div class="job">儒家学派创始人，编纂《春秋》，创办私学</div>
                        <div class="content">益者三友，友直，要谅，友多闻，益矣;损者三友，友便辟，友善柔，友便佞，损矣。</div>
                    </div>
                </q-carousel-slide>
            </q-carousel>
        </div>
        <div class="right-card">
            <div class="company">甲鹤日语管理系统后台登录</div>
            <div class="t">登录</div>
            <div class="field_wrap">
                <div class="pwd_box">
                    <div class="mu-text-field has-label">
                        <div class="field_wrap">
                            <div class="pwd_box">
                                <div class="mu-text-field has-label">
                                    <div class="mu-text-field-content">
                                        <q-input v-model="account" ref="account" class="text-h6" label="账号" :rules="[val => !!val || '请输入账号信息']" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field_wrap">
                            <div class="pwd_box">
                                <div class="mu-text-field has-label">
                                    <div class="mu-text-field-content">
                                        <q-input v-model="pwd" ref="pwd" class="text-h6" @keyup.enter.native="gologin" label="密码" type="password" :rules="[val => !!val || '请输入密码凭证']" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field_wrap" style="margin-top:10px;">
                            <q-btn :loading="isLogining" size="lg" label="立即登录" @click="gologin" class="full-width" color="primary">
                                <template v-slot:loading>
                                    <q-spinner-facebook />
                                </template>
                            </q-btn>
                        </div>
                        <div class="field_wrap forget">
                            <div class="item-forget">
                                <q-checkbox v-model="isAutoLogin" label="下次自动登录" />
                            </div>
                            <div class="item-forget">
                                <!-- <a href="javascript:void(0);">忘记密码？</a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="logo-box">
        <div class="row">
            <div class="col">
                <img src="~assets/images/logo.png" style="width:60px" />
            </div>
            <!-- <div class="col">CRM</div> -->
        </div>
    </div>
</div>
</template>

<script>
export default {
    meta: {
        title: '登录 - 麦子教育系统',
    },
    data() {
        return {
            accountStatus: false,
            account: "",
            pwdStatus: false,
            pwd: "",
            isLogining: false,
            isAutoLogin: false,
            slide: "first",
            redirect: undefined,
        };
    },
    created() {
        let autoLogin = localStorage.autoLogin ?
            JSON.parse(localStorage.autoLogin) :
            null;
        this.account = autoLogin ? autoLogin.acc : "";
        this.pwd = autoLogin ? autoLogin.pwd : "";
        this.isAutoLogin = autoLogin ? true : false;
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    methods: {
        gologin() {
            this.isLogining = true
            this.$refs.account.validate()
            this.$refs.pwd.validate()
            if (!this.$refs.account.hasError && !this.$refs.pwd.hasError) {
                // this.$q.notify({
                //     icon: 'error',
                //     color: 'negative',
                //     message: '账号或密码错误，请重新输入',
                //     position: 'top'
                // })
                this.$store
                    .dispatch('Login', {
                        Account: this.account,
                        Password: this.pwd,
                    })
                    .then(res => {
                        this.$router.push({
                            path: this.redirect || '/home'
                        })
                    })
                    .catch(() => {
                        this.isLogining = false
                    })
            } else {
            }
            setTimeout(() => {
                this.isLogining = false
            }, 2000);
        },
    },
};
</script>

<style scoped>
.login {
    background: url("~assets/images/login/bg.jpg") no-repeat 100% 100%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-box {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 120px;
    font-size: 48px;
    font-family: perfectFont;
    color: #fff;
}

.login .login-box {
    width: 1000px;
    height: 560px;
    box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
        0 16px 24px 2px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    background: #fff;
    display: flex;
    overflow: hidden;
}

.login .login-box .left-card {
    width: 440px;
    height: 100%;
}

.login .login-box .left-card .item-card {
    background: url("~assets/images/login/yinhao.png") right bottom/221px no-repeat,
        linear-gradient(180deg, #43e97b, #1AAD19);
    width: 100%;
    height: 100%;
    padding-top: 96px;
    color: white;
    box-sizing: border-box;
}

.login .login-box .left-card .item-card .head-icon {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    border-radius: 100%;
    background: rgba(40, 120, 255, 0.5);
    padding: 5px;
}

.login .login-box .left-card .item-card .head-icon img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.login .login-box .left-card .item-card .publisher,
.login .login-box .left-card .item-card .job {
    margin-top: 20px;
    font-size: 24px;
    font-family: perfectFont;
    text-align: center;
}

.login .login-box .left-card .item-card .publisher {
    font-weight: bold;
}

.login .login-box .left-card .item-card .job {
    font-size: 16px;
    margin-top: 10px;
}

.login .login-box .left-card .item-card .content {
    font-size: 13px;
    font-family: perfectFont;
    margin-top: 20px;
    margin: 20px;
    line-height: 24px;
    text-indent: 28px;
}

.login .login-box .right-card {
    flex: 1;
    padding-top: 50px;
    font-family: perfectFont;
}

.login .login-box .right-card .company {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.login .login-box .right-card .t {
    margin-top: 20px;
    font-size: 34px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}

.field_wrap {
    width: 330px;
    margin: 0 auto;
    font-family: perfectFont;
}

.field_wrap .pwd_box {
    position: relative;
}

.field_wrap .pwd_box .mu-text-field {
    width: 100%;
    color: rgba(0, 0, 0, 0.54);
}

.field_wrap .pwd_box .mu-text-field.has-label {
    min-height: 72px;
}

.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
    display: block;
    height: 100%;
    padding-bottom: 12px;
    padding-top: 4px;
}

.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
    padding-top: 28px;
    padding-bottom: 12px;
}

.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-label {
    line-height: 20px;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
    cursor: text;
    transform: translateZ(0) scale(0.75);
    transform-origin: left top;
    user-select: none;
    pointer-events: none;
    backface-visibility: hidden;
    font-size: 16px;
    font-family: perfectFont;
    font-weight: bold;
}

.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field.has-label .mu-text-field-label {
    top: 8px;
    position: absolute;
}

.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-input {
    appearance: none;
    outline: none;
    border: none;
    background: none;
    border-radius: 0 0 0 0;
    box-shadow: none;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 32px;
    color: rgba(0, 0, 0, 0.87);
    font-family: inherit;
    position: relative;
}

.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
    border-radius: 0;
}

.mu-text-field-line {
    background-color: rgba(0, 0, 0, 0.4);
    margin: 0;
    height: 1px;
    border: none;
    left: 0;
    right: 0;
    position: absolute;
    box-sizing: content-box;
    overflow: visible;
}

.mu-text-field-focus-line {
    margin: 0;
    height: 2px;
    border: none;
    background-color: #0d2481;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: -1px;
    transform: scaleX(0);
    transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
        -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.mu-text-field-focus-line.focus {
    transform: scaleX(1);
}

.el-button--primary,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0d2481 !important;
    border-color: #0d2481 !important;
}

.login .login-box .right-card .forget {
    margin-top: 12px;
    display: flex;
}

.login .login-box .right-card .forget .item-forget {
    flex: 1;
    font-size: 14px;
    font-family: perfectFont;
}

.login .login-box .right-card .forget .item-forget:last-child {
    text-align: right;
}

.login .login-box .right-card .forget .item-forget a {
    color: #000;
    text-decoration: none;
}

.login .login-box .right-card .forget .item-forget a:hover {
    color: #0d2481;
}
</style>
