<!-- 登录页 -->
<template>
  <div class="login">
    <div class="title">{{title}}</div>
	<img class="logo" src="../assets/img/logo-big.png" />
    <div class="main">
      <div class="line">
        <div class="circle-o">
          <div class="circle-i"></div>
        </div>
        <span class="line-title">用户登录</span>
      </div>
      <div class="line input">
        <img src="../assets/img/icon-user.png" />
        <el-input v-model="user.username" placeholder="请输入账号信息" @keyup.enter.native="login" />
      </div>
      <div class="line input">
        <img src="../assets/img/icon-pass.png" />
        <el-input v-model="user.password" placeholder="请输入账号密码" show-password @keyup.enter.native="login" />
        <div class="reset" @click="resetForm">
          <img src="../assets/img/icon-reset.png" />
          <span>重置</span>
        </div>
      </div>
      <div class="line" v-loading="loading" :element-loading-background="loadingColor">
        <el-button class="line-btn" type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    CONFIG,
    ChartStyle
  } from '@/common/const.js'
  import User from '@/api/user.js';
  export default {
    data() {
      return {
        loading: false,
        loadingColor: ChartStyle.loadingColor,
        title: CONFIG.TITLE,
        user: {
          username: '',
          password: ''
        },
      };
    },
    methods: {
      // 重置表单
      resetForm() {
        this.user = {
          username: '',
          password: ''
        }
      },
      // 登录
      async login() {
        if (!this.user.username || !this.user.password) {
          this.$message.warning('请输入用户信息！');
          return;
        }
        this.loading = true;
        try {
          let res = await User.login(this.user.username, this.user.password);
          res = JSON.parse(res);
          this.$message.success('登录成功！');
          this.user.permission = res?.role?.permission || '';
          this.$store.commit('user', null); // 清除用户，这里只需要清除，在路由跳转时会将用户从本地添加到store里
          // 保存信息，用于下一次刷新页面时直接进入，不再登录
          let endTime = Date.now() + 3600 * 1000 * 24; // 24h后过期
          localStorage.setItem('electric_user', JSON.stringify({
            data: this.user,
            endTime
          }));
          this.$router.push('/factory', () => {}, () => {}); // 加后面两个空回调方法，是为了解决一个router的报错
        } catch (e) {
          console.log(e);
        }
        this.loading = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(../assets/img/bg.png);
    @extend %background-center;
    @extend %flex-center;
    flex-direction: column;

    .title {
      font-size: 3rem;
      font-weight: bold;
      letter-spacing: 0.3rem;
      @extend %txt-gradients;
    }

	.logo{
		width: 30rem;
		height: auto;
		position: absolute;
		top: 2rem;
		left: 2rem;
	}
	
    .main {
      width: 58.6875rem;
      height: 39.625rem;
      background-image: url(../assets/img/login-border.png);
      @extend %background-center;
      box-sizing: border-box;
      padding: 9.375rem 9.375rem 0 9.375rem;

      .line {
        height: 4rem;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;

        .line-title {
          font-size: 1.75rem;
          font-weight: bold;
          letter-spacing: 0.175rem;
          @extend %txt-gradients;
        }

        .line-btn {
          width: 100%;
          height: 100%;
          border-radius: 2px;
          font-size: 1.25rem;
          letter-spacing: 0.125rem;
          background-color: $color-blue;
          border: none;
        }
      }

      .line:last-of-type {
        margin-top: 4.375rem;
      }

      .circle-o {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50px;
        background-color: rgba($color: $color-cyan, $alpha: 0.2);
        @extend %flex-center;
        margin-right: 1rem;

        .circle-i {
          width: 0.625rem;
          height: 0.625rem;
          border-radius: 50px;
          background-color: $color-cyan;
          opacity: 0.8;
        }
      }

      .input {
        position: relative;
        border: 1px solid rgba($color: $color-cyan, $alpha: 0.5);
        border-radius: 2px;
        padding: 0 1.5rem;
        box-sizing: border-box;
        background-color: rgba($color: $color-cyan, $alpha: 0.1);

        img {
          width: 1.5rem;
          height: 1.5rem;
        }

        ::v-deep .el-input__inner {
          background-color: transparent;
          border: none;
          color: #fff;
        }

        ::v-deep .el-input__inner::placeholder {
          color: rgba($color: #fff, $alpha: 0.6);
          letter-spacing: 0.1rem;
        }

        .reset {
          position: absolute;
          top: 5rem;
          right: 0;
          font-size: 0.875rem;
          letter-spacing: 0.1rem;
          display: flex;
          align-items: center;
          cursor: pointer;

          img {
            width: 0.875rem;
            height: 0.875rem;
            margin-right: 0.625rem;
          }
        }
      }

    }
  }
</style>
