<template>
  <el-row class="login">
    <!--左侧logo-->
    <!--<el-col :span="12" class="login__logo">-->
      <!--<img src="../../assets/logo.png" alt="logo"/>-->
    <!--</el-col>-->
    <!--右侧登录框-->
    <el-col :span="12" class="login__form">
      <div class="form__title">蜂网仓储系统</div>
      <el-form :inline="true" class="form__body">
        <div style="padding: 20px 0">
          <el-form-item label="账号：" style="margin-bottom: 20px;">
            <!--elementUI之坑，keyup.enter无效，需加上.native响应原生事件才行-->
            <el-input v-model="account" @keyup.enter.native="login"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input type="password" v-model="password" @keyup.enter.native="login"></el-input>
          </el-form-item>
        </div>
        <el-button class="login__btn" type="primary" @click="login">登录</el-button>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      account: '',
      password: '',
    }
  },
  methods: {
    login () {
      const url = this.$API.login
      const param = {
        username: this.account,
        password: this.password,
        language: 'zh_CN',
      }
      this.$https.post(url, param)
        .then(data => {
          // this.navigate()
          this.getUserInfo()
        })
    },
    // 获取用户信息
    getUserInfo () {
      window.localStorage.clear()
      window.sessionStorage.clear()
      const url = this.$API.getUserInfo
      this.$https.get(url)
        .then(data => {
          if (data.projectId === 'null') return this.$message.error('没有仓库ID')
          this.navigate()
        })
    },

    // 跳转路由
    navigate () {
      this.$router.replace({
        // 本应跳至framework，但因其拥有默认子路由，无name，所以直接调用子路由name
        name: window.sessionStorage.getItem('lastRouter') || 'home'
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  .login {
    /*display: table-cell;*/
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    background: url("../../assets/login_background.png") no-repeat;
    overflow: hidden;
    background-size: cover;
    &__logo {
      height: 300px;
      line-height: 300px;
      img {
        vertical-align: middle;
        max-width: 400px;
      }
    }

    &__form {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      .el-form .el-input {
        width: 300px;
      }
      .el-form-item {
        margin: 20px 0;
      }

      .form__title {
        font-size: 32px;
        margin-bottom: 30px;
      }
      .form__body {
        width: 400px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 0 80px #DDD;
        padding: 10px;
        margin: 0 auto;
        text-align: center;
      }
    }

    &__btn {
      outline: none;
      margin: 10px auto;
      margin-bottom: 20px;
      width: 60%;
      height: 35px;
      background-color: #4992fc;
      border: none;
      /*border-color: #F8B62D;*/
      border-radius: 5px;
      color: #f9f9f9;

      &:hover, &:focus, &:active {
        background-color: #0063cc;
        cursor: pointer;
      }
    }
  }

  input {
    width: 20em;
    height: 35px;
    border: #4992fc 1px solid;
    border-radius: 5px;
    padding: 5px;
    outline: none;
  }

  input:focus {
    border: #0063cc 1px solid;
  }
</style>
