<template>
    <div class="loginContainer">
        <div id="loginForamWrapper">
            <h2>欢迎使用新一代国际结算系统</h2>
            <div id="loginForm">
                <p style="text-align:left;font-size:1.2em;color:#888">用户登录 / LOGIN IN</p>
                <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"  size="small" >
                    <el-form-item  prop="username" >
                        <el-input prefix-icon="el-icon-user" placeholder="请输入登录名" v-model="loginForm.username"></el-input>
                    </el-form-item>

                    <el-form-item  prop="password" >
                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button style="width:100%;margin-top:1em;margin:0 0" type="primary" @click="submitForm('loginForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState, mapMutations, mapActions } = createNamespacedHelpers('UserContext')
const { setLoginInfo } = mapMutations(["setLoginInfo"])

  export default {
    data() {
      return {
        loginForm: {
          password: '',
          username: ''
        },
        rules:{
            username:[
                {type: "string", required: true, message: "请填写用户名"}
            ],
            password:[
                {type: "string", required: true, message: "请填写密码"}
            ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.setLoginInfo({userId:this.loginForm.username})
            this.$router.push("/home");
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      setLoginInfo
    }
  }
</script>
<style>
    .loginContainer{
        flex: 1;
        background-image: url("../../assets/login_bg.png");
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #loginForamWrapper{
        width: 340px;
        /* height:280px; */
        
    }
    #loginForm{
        background-color: white;
        padding:1em 2em;
        border: 1px solid #d9d9d9;
        box-shadow: 5px 5px 5px 0px #d9d9d9;
        border-radius: 3px;
    }
    #loginForamWrapper h2{
       color:#d9d9d9;
       font-family: 宋体;
       
    }
</style>
