<template>
    <div class="login" :style="{backgroundImage:'url('+ bgUrl + ')'}">

      <div class="wrap-main">
        <h1 class="title">唱唱启蒙——后台管理系统</h1>
        <el-form :model="login" :rules="loginRules" ref="loginForm">
          <el-form-item prop="username">
            <el-input v-model="login.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="login.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" size="medium" type="primary" @click="submitForm">登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  import { loginApi } from "../../service/api";
  import md5 from 'js-md5';
  import bgUrl from '../../assets/skyBackground.png'
    export default {
      data(){
        return{
          bgUrl:bgUrl,
          login:{
            username:'',
            password:''
          },
          loginRules:{
            username:[
              { required: true, message: '请输入您的用户名', trigger: 'blur' }
            ],
            password:[
              { required: true, message: '请输入您的密码', trigger: 'blur' }
            ]
          }
        }
      },
      methods:{
          // 提交
        submitForm(){
          this.$refs["loginForm"].validate((valid) => {
            if (valid) {
              let json = {
                username:this.login.username,
                password:md5(this.login.password)
              };
              loginApi(json).then(res=>{
                  this.$store.dispatch('setToken',res.token);
                  this.$store.dispatch('setUserName',res.user_name);
                  this.$router.push({name:'index'})
              })
            }
          })
        }

      }
    }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .login{
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .wrap-main{
    width: 300px;
    height: 180px;
    padding:50px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px @gray-line;
    position: fixed;
    line-height: 50px;
    background-color: rgba(255,255,255,0.3);
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;
    .btn{
      display: block;
      width: 100%;
    }
    .title{
      position: absolute;
      top: -100px;
      width: 100%;
      text-align: center;
      left: 0;
      color: @black-line;
      font-size: 26px;
      text-shadow: 4px 4px rgba(255,255,255,0.3);
    }
  }
</style>
