<template>
    <!-- 登录 -->
    <div class="login">
      
        <div class="content flex2">
            <div class="login_info">
                <div class="info_title flex">
                    <p :class="loginType==1?'border_bottom':'placeholder'">
                        平台授权</p>
                </div>
                <div class="info_content">
                    <el-form
                            :model="form"
                            :rules="rules"
                            ref="form"
                            label-width="0px"
                    >
                        <el-form-item label="" prop="account">
                            <el-input v-model="form.account" style="height:53px;font-size:16px"
                                      :placeholder="'请联系管理员获取授权秘钥'">
                                <img slot="prefix" src="../../assets/images/password.png" class="inputIcon"/>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
             
                <div style="margin-top:40px">
                    <el-button type="primary" class="logo_btn" @click="loginFn">提交授权
                    </el-button>
                </div>
            
            </div>
        </div>
    </div>
</template>
<script>
    import {addComputerAuthApi} from "@/assets/js/api/loginSign"

    export default {
        name: "login",
        data() {
            return {
                loginType: 1,
                form: {
                    account: ''
                },
                rules: {
                    account: [
                        {required: true, message: '请联系管理员获取授权秘钥', trigger: 'blur'}
                    ]
                },
             
                
            };
        },
        
        mounted(){
        },
        methods: {
            loginFn() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        addComputerAuthApi({address:this.form.account}).then((res) => {
                            // this.parseLoginData(res.result)
                            this.$message.success('授权成功，请登录')
                            setTimeout(()=>{
                                this.$router.push({path: "/login"});
                            },1000)
                            
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                
            }
        },
    };
</script>
<style lang="less" scoped>
    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flex2 {
        display: flex;
        align-items: center;
    }

    .login {
        width: 100%;
        height: 100%;
        background: #e0e0e0;
        .content {
            width: 100%;
            height: 100%;
            // margin-top: 90px;
            // background-image: url("../../assets/images/login_bg.png");
            // flex-direction: row-reverse;
            position: relative;
            .login_info {
                width: 444px;
                height: 314px;
                background: #ffffff;
                box-shadow: 0 0 31px 0 rgba(13, 28, 91, 0.28);
                border-radius: 5px;
                // margin-right: 123px;
                box-sizing: border-box;
                padding: 37px 33.5px 0;
                position: absolute;
                z-index: 2;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

                p {
                    width: 50%;
                    margin: 0;
                    box-sizing: border-box;
                    padding-bottom: 13px;
                    font-weight: 600;
                }

                .border_bottom {
                    border-bottom: 2px solid @--color-primary;
                    color: @--color-primary;
                }

                .placeholder {
                    padding: 0 0 15px;
                }

                .info_title {
                    justify-content: space-around;
                    font-family: PingFangSC-Medium;
                    font-size: 16px;
                    color: #aeafb9;
                    text-align: center;
                    cursor: pointer;
                    border-bottom: 1px solid #edeff2;
                }

                .info_content {
                    margin-top: 35px;

                    img {
                        width: 16.8px;
                        height: 24px;
                    }
                }

                .logo_btn {
                    height: 53px;
                    width: 100%;
                    font-family: PingFangSC-Regular;
                    font-size: 20px;
                }

                .info_bottom {
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #8e8e8e;
                    cursor: pointer;
                    margin-top: 8px;
                }

                .span_placeholder {
                    display: inline-block;
                    width: 1px;
                    height: 15px;
                    margin-bottom: -3px;
                    background: rgba(142, 142, 142, 0.8);
                }
                /deep/ .el-input__inner {
                    height: 53px;
                    height: 53px;
                    padding-left: 45px;
                }
            }
        }

        
    }

    .inputIcon {
        margin-top: 14px;
        margin-left: 10px;
    }
</style>