<template >
    <div id="login_form" :style="'height:'+windowHeight+'px'">
        <el-row style="height:100%;">
            <el-col id="login_inner">
                <h1 style="text-align:center;margin:25px;">采集管理平台</h1>
                <el-form ref="form" :model="form" label-position="left" >
                    <el-form-item>                       
                        <el-input class="login_input" clearable v-model="form.username" placeholder="用户名"></el-input>
                         <i class="el-icon-user-solid icon"></i>
                    </el-form-item>
                    <el-form-item>                        
                        <el-input class="login_input" clearable type="password" v-model="form.password" placeholder="密码"></el-input>
                         <i class="el-icon-key icon"></i>
                    </el-form-item>
                </el-form>
                <div style="display: flex;justify-content: center;margin-bottom:20px">
                    <el-button type="primary" style="width:100%" @click="onlogin">登录</el-button>                   
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import {Form, FormItem, Input, Button, Row, Col } from 'element-ui'
import cookieUtil from '../util/CookieUtil'
import userApi from '../js/api/userApi'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Row)
Vue.use(Col)
export default {
    name:'login',
    data(){
        return {
            windowHeight:500,
            form:{
                username:'',
                password:''                
            }
        }
    },
    computed:{
        ...mapState({
        user:state=>state.user.user
        })
    },
    methods:{
        onlogin(){
            userApi.login(this.form.username, this.form.password, (response)=>{
                var result = response.data;
                if(result.code == 200){
                    cookieUtil.setCookie('oscm_user', result.content, -1)
                    window.location = "/oscm/"
                }else{
                    alert("登录失败")
                }
            })
        }
    },
    mounted(){
         this.windowHeight = window.innerHeight;
        if(cookieUtil.getCookie('oscm_user') != {}){
            this.$router.push('/oscm/')
        }
    }
}
</script>
<style scoped>
    #login_form{
       /* background-color:cadetblue;
        top:30vh;*/        
        position:relative;       
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .icon{
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 5px;
        z-index: 10;
        padding: 0 5px;
        line-height: 37px;
        color: #999999;
    }
    #login_form{
        background: url("/oscm/img/login.jpg");
        background-size: contain;
    }   

    #login_inner{     
        padding:5px 30px;border-radius:4px;
        background-color: rgb(239 244 246 / 80%);
        width:400px;margin: 0 auto;float: revert;position:relative;top:30vh
    }
</style>
<style>
 .login_input .el-input__inner{
        padding-left: 35px;
    }
</style>