<template>
  <div class="_login copyright" :data-version="version">
    <img class="login_top" src="/imgs/login-top.png" />
    <img class="login_draw" src="/imgs/login-draw.png" width="500" />
    <img class="login_bottom" src="/imgs/login-bottom.png" />
    <h1 class="_login_title i-logo" style="font-size: 32px">{{ name }}</h1>

    <div class="_login_panel" data-title="欢迎使用">
      <label class="i-user">
        <input
          v-model="username"
          type="text"
          placeholder="请输入登录名"
          maxlength="12"
          @keyup.enter="login"
        />
      </label>

      <label class="i-lock">
        <input
          v-model="password"
          type="password"
          placeholder="请输入密码"
          maxlength="12"
          @keyup.enter="login"
        />
      </label>

      <input type="button" class="btn" value="登录" @click="login" />
    </div>
  </div>
</template>

<script>
import { findRoleFeatureApi, loginApi } from '@/api/system'
import { lst } from '@/utils'
import { initRoutes } from '@/router'

import { name, version } from '~/package.json'

export default {
  data: () => ({ username: '', password: '', name, version }),

  methods: {
    async login () {
      const username = this.username.trim()
      const password = this.password.trim()
      if (!username) return this.$message.error('请输入用户名')
      if (!/[a-zA-Z0-9]{6,12}$/.test(password)) { return this.$message.error('密码输入不合法') }

      const {
        data: { user, token }
      } = await loginApi(username, password)
      this.$store.setUser(user)
      this.$store.setToken(token)
      await this.findRoleFeature()
      // if (user.baseRole === 2) { this.$router.push('/entry') } else { this.$router.push('/') }
      this.$router.push('/train/training')
    },

    async findRoleFeature () {
      const { data } = await findRoleFeatureApi()
      const auth = { 1: [], 2: [] }
      for (const v of data) {
        auth[v.type].push(v.name)
      }
      lst.save('module', auth[1])
      lst.save('feature', auth[2])
      initRoutes()
    }
  }
}
</script>

<style lang="scss">
._login {
  height: 100vh;
  background-image: url(/imgs/login-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  user-select: none;

  &::before {
    content: "V" attr(data-version);
    font-size: 15px;
    color: #00e9ff;
    font-weight: bold;
    position: absolute;
    top: 18px;
    right: 30px;
    z-index: 1;
  }

  &.copyright::after {
    color: #fff;
    bottom: 43px;
    font-size: 16px;
    letter-spacing: 6px;
  }

  img {
    -webkit-user-drag: none;
  }

  .login_top {
    width: 100%;
    height: 136px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .login_draw {
    position: absolute;
    top: 56%;
    left: 40%;
    transform: translate(-100%, -50%);
  }

  .login_bottom {
    width: 68%;
    height: 50px;
    position: absolute;
    bottom: 20px;
    left: 16%;
    right: 0;
    object-fit: none;
  }

  &_title {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    letter-spacing: 4px;
    color: #00e9ff;

    &::before {
      font-weight: initial;
      font-size: 50px;
      vertical-align: middle;
    }
  }

  &_panel {
    padding: 32px;
    background-color: rgba(254, 254, 254, 0.3);
    border: 2px solid #00e9ff;
    border-radius: 12px;
    text-align: center;
    position: absolute;
    top: 53%;
    right: 32%;
    transform: translate(50%, -50%);

    &::before {
      content: attr(data-title);
      display: block;
      font-size: 26px;
      color: #00e9ff;
      font-weight: 500;
    }

    label {
      margin-top: 30px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #00e9ff;
      border-radius: 6px;
      font-size: 16px;

      &::before {
        margin-right: 6px;
        color: #00e9ff;
      }
    }

    input {
      width: 262px;
      color: #fff;
      border: none;
      outline: none;
      font-size: 16px;
      font-weight: 400;
      background-color: transparent;

      &::placeholder {
        color: #999;
      }

      &.btn {
        margin-top: 50px;
        width: 166px;
        line-height: 36px;
        border-radius: 50px;
        color: #061422;
        background-color: #00e9ff;
        cursor: pointer;
      }
    }
  }
}
</style>
