<template>
  <div class="login">
    <div class="login-card">
      <div class="login-card-l">
        <el-image style="width: 100%; height: 100%" :src="require('@/assets/login-l.png')"></el-image>
      </div>
      <div class="login-card-r">
        <b>欢迎登录</b>
        <loginForm style="width: 100%" v-if="active === 'password'" ref="password" @keyup.enter.native="toLogin" />
        <el-button type="primary" style="width: 100%; padding: 16px" @click="toLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { removeStore } from '@utils/store';
import loginForm from '@views/login/loginForm';

import '@/style/common.less';

export default {
  components: {
    loginForm
  },
  data() {
    return {
      active: 'password',
      stretch: true
    };
  },
  methods: {
    toLogin() {
      this.$refs[this.active].toLogin();
    },
    clearLocalStorage() {
      removeStore('multipleTag');
      removeStore('userInfo');
      removeStore('accessToken');
      removeStore('permissions');
      removeStore('expireTime');
    }
  },
  created() {
    this.clearLocalStorage();
  }
};
</script>

<style scoped lang="less">
.login {
  background: #3274f6;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  &-card {
    background: #fff;
    width: 1180px;
    height: 600px;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 24px #0d3ea18b;

    &-l {
      width: 730px;
    }

    &-r {
      border-left: 1px solid #eee;
      width: 450px;
      box-sizing: border-box;
      padding: 80px 65px;

      b {
        width: 100%;
        text-align: center;
        display: block;
        padding-bottom: 90px;
        font-size: 24px;
      }
    }
  }
}
</style>
