
<template>
  <div class="login">
    <div class="lg-border">
      <a>您好！欢迎登录工作簿</a>
      <input class="bor-ip1" v-model="name" id="name" type="text" placeholder="账号">
      <input class="bor-ip2" v-model="psd" id="password" type="password" placeholder="密码" @keyup.enter="login()">
      <button @click="login()">登录</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        psd: ''
      }
    },
    mounted() {
      if (this.$route.params.data === 'axios') {
        this.modal('请重新登录！');
      }
    },
    methods: {
      // 登录
      login () {
        let user = this.name;
        let pwd = this.psd;
        if (user !== '' && pwd !== '') {
          let name = {
            username: user,
            password: pwd
          };
          console.log(name)
          // if (name.username === '1') {
          //   name.authority = '普通用户';
					// 	this.$router.push({name:'home'});
          // } else {
          //   name.authority = '管理员';
					// 	this.$router.push({name:'adminSetting'});
          // }
					// localStorage.setItem('data' , JSON.stringify(name));

          this.$axios.postUserLogin(name).then(res => {
            console.log(res)
						// this.$router.push({name:'adminSetting'});
            if (res.request.status === 200) {
							if (res.data.code === 401) {
								this.modal(res.data.msg);
							} else {
								this.$store.commit('changeLoginData', {
									loginData: res.data
								})
								localStorage.setItem('login', this.$Base64.encode(JSON.stringify(res.data)));
								if (res.data.username === 'root' && res.data.roles[0].name === '管理员'){
									this.$router.push({name:'adminSetting'});
								} else if (res.data.username !== 'root') {
									this.$router.push({name:'home'});
								}
              }
						}
          }).catch(err => {
            console.error(err.message);
          })
        } else {
          this.modal('用户名和密码不能为空！');
        }
      },
      // 提示框
      modal (msg) {
				this.$alert(msg, '提示', {
					confirmButtonText: '确定'
				});
        // this.$Modal.warning({
        //   title: '提示',
        //   content: '<p>' + msg + '</p>'
        // });
      },
    }
  }
</script>

<style scoped>
  a{
    color: #ffffff;
  }
  .login{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/login-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
  }
  .lg-border{
    width: 684px;
    height: 684px;
    background-image: url("../assets/images/login-bor-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -342px;
    margin-top: -342px;
    font-size: 45px;
    color: #ffffff;
    text-align: center;
  }
  .lg-border>a{
    /*position: absolute;*/
    /*margin: 22% 17%;*/
    margin-top: 120px;
    white-space: nowrap;
    display: inline-block;
  }
  .bor-ip1, .bor-ip2{
    /*position: absolute;*/
    width: 450px;
    height: 90px;
    background: rgba(255, 255, 255, 0.4);
    font-size: 30px;
    color: #ffffff;
    border: 1px solid #ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-left: 20px;
    margin-top: 60px;
  }
  /*.bor-ip1{*/
    /*margin: 40% 16%;*/
  /*}*/
  /*.bor-ip2{*/
    /*margin: 57.5% 16%;*/
  /*}*/
  .lg-border>button{
    width: 43.9%;
    height: 11.7%;
    color: #1772b3;
    font-size: 41px;
    border-radius: 4px;
    background-color: #ffffff;
    border: none;
    /*position: absolute;*/
    /*margin: 75% 28%;*/
    margin-top: 50px;
  }
  input::-webkit-input-placeholder{
    color: #ffffff;
  }
  input:-moz-placeholder{
    color: #ffffff;
  }
  input::-moz-placeholder{
    color: #ffffff;
  }
  input:-ms-input-placeholder{
    color: #ffffff;
  }
</style>
