<!--登录界面-->
<template>
    <div class="login" ref="login" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BrackgroupStr.slice(3) : ''}`}">
        <section class="login-content" :style="{
            width: loginJson[0] ? loginJson[0].Width + 'px' : '',
            height: loginJson[0] ? loginJson[0].Height + 'px' : '',
            left:loginJson[0] ? loginJson[0].Left + 'px' : '',
            top:loginJson[0] ? loginJson[0].Top + 'px' : '',
            zIndex: loginJson[0] ? loginJson[0].ZIndex : '',
            border: `1px solid #${loginJson[0] ? loginJson[0].BorderStr.slice(3) : ''}`,
            backgroundColor: `#${loginJson[0] ? loginJson[0].ForegroundStr.slice(3) : ''}`}"
        >
            <h2>用户登录</h2>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="55px" class="login-form">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="ruleForm.username" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>
</template>

<script>
    import {reqLogin} from "../api"
    import storageUtils from "../../utils/storageUtils"
    import {getStaticFile} from "../../utils/tools"

    export default {
        data() {
            const checkUsername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'))
                }
            }
            const validatePasswrod = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                }
            }
            return {
                ruleForm: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        { validator: checkUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePasswrod, trigger: 'blur' }
                    ]
                },
                loginJson:[],
                staticUrl:this.$store.state.staticUrl
            }
        },

        async beforeCreate() {
            this.loginJson = await getStaticFile('EnityLogin.Data')
        },

        updated() {
            // 添加背景图片
            const backIcon = this.loginJson[0] ? this.loginJson[0].BackIcon : ''
            this.$refs.login.style.backgroundImage = backIcon ? 'url('+`${this.staticUrl}/Data/${backIcon}`+')' : null
        },

        methods: {
            async submitForm() {
                const {username,password} = this.ruleForm
                if(username === '' || password === ''){
                    this.$message.warning('请输入用户名和密码！')
                    return
                }
                const userInfo = {name:username,password}

                // 请求登录
                const res = await reqLogin(userInfo,'login')
                if(res.token){
                    // 将user保存到vuex的state，同时保存到本地
                    this.$store.dispatch('saveUser', userInfo)
                    // 将token保存到会议存储
                    storageUtils.saveToken(res.token)
                    // 跳转到管理界面
                    this.$router.replace('/admin')
                }else {
                    this.$message.error('用户名或密码错误！')
                }
            },

            resetForm(formName) {
                this.$refs[formName].resetFields()
            }
        }
    }
</script>

<style lang="less">
    html,body {
        margin:0;
        padding:0;

        .login {
            width:100vw;
            height: 100vh;
            background-size: 100% 100%;
            position: relative;

            .login-content {
                position: absolute;
                h2 {
                    text-align: center;
                    font-weight:bold;
                    margin-bottom: 20px;
                }
                .el-input {
                    width:90%;
                }
                .login-form {
                    .login-form-button {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>
