<template lang="pug">
  .flex.h-full.w-full.relative.overflow-hidden
    .left-col.flex.flex-col.items-center.justify-center
      .logo-wrapper.absolute.left-12.top-12
        img(:src="logoMark")
      .login-panel.flex.flex-col.justify-center.gap-y-10
        .flex.flex-col.gap-y-2
          .text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
          .text-under.flex.not-italic.font-medium.text-base(
            :style="{color: this.underTextColor}"
          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
        .flex.flex-col.gap-y-5
          base-input.font-medium(
            :rule="[wrongData => !!wrongData]",
            v-model="user.username",
            placeholder="Введите ваш логин",
            label="Логин"
            outlined
          )
          base-input(
            :rule="[wrongData => !!wrongData]",
            v-model="user.password",
            :type="changeType",
            placeholder="Введите ваш пароль",
            label="Пароль",
            outlined
          )
            .flex.items-center.cursor-pointer
              q-icon(
                v-if="!wrongData && user.password"
                :name="!isView ? 'visibility_off' : 'visibility'",
                @click="changeView"
              )
          span.font-medium(:style="{color: this.redColor}", v-if="wrongData") Неверный логин или пароль
          .flex.items-center.gap-x-8px
            q-checkbox(@click="persist", v-model="isView", type="checkbox")
            .flex.non-italic.font-medium.base Запомнить меня
        base-button.font-semibold(:disabled="disabledButton", :size="48", @click="login") Войти в аккаунт
      .absolute.left-12.bottom-12 2022 © Астра
    .right-col.flex.items-center.justify-center.relative
</template>

<script>
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
import logoMark from "@/assets/images/logoMark.svg";

export default {
  name: "TheLogin",
  components: { BaseInput, BaseButton },
  data() {
    return {
      underTextColor: "var(--font-grey-color)",
      isView: false,
      logoMark,
      authorized: true,
      user: { username: "", password: "" },
      redColor: "var(--border-red-color)",
      userData: {},
    };
  },
  computed: {
    wrongData() {
      return !this.authorized && !this.user.username && !this.user.password;
    },
    changeType() {
      return !this.isView ? "password" : "text";
    },
    disabledButton() {
      return this.user.username && this.user.password ? false : true;
    },
    showBorder() {
      return !this.authorized && !this.user.username && !this.user.password
        ? true
        : false;
    },
  },
  methods: {
    changeView() {
      this.isView = !this.isView;
    },
    persist() {
      localStorage.username = this.user.username;
      localStorage.password = this.user.password;
    },
    async auth() {
      let res = await fetchWrapper.get("auth/users/me/");
      res = await res;
      let data = await fetchWrapper.get(`accounts/users/${res.id}/detail`);
      data = await data;
      this.userData = data;
      localStorage.setItem("userData", JSON.stringify(this.userData));
    },
    login() {
      fetchWrapper
        .post("auth/jwt/create/", {
          username: this.user.username,
          password: this.user.password,
        })
        .then((token) => {
          if (token.access) {
            localStorage.setItem("tokenAccess", token.access);
            this.auth().then(() => this.$router.push("/"));
          } else {
            this.authorized = false;
            this.user.username = "";
            this.user.password = "";
            this.$router.push("/login");
          }
        });
    },
  },
  mounted() {
    if (localStorage.username) this.user.username = localStorage.username;
    if (localStorage.password) this.user.password = localStorage.password;
  },
};
</script>

<style lang="sass" scoped>
.left-col
  background-color: var(--default-white)
  height: 100%
  width: 40%

.logo-wrapper
  width: 90px
  height: 75px

.login-panel
  width: 444px
  height: 422px

.text-welcome
  letter-spacing: 0.02em
  color: var(--font-dark-blue-color)

.input-wrapper
  border-width: 1.5px

.right-col
  height: 100%
  background-color: var(--font-dark-blue-color)
  width: 60%
  background-image: url("@/assets/images/loginBG.svg")
  background-size: cover
  background-repeat: no-repeat
  background-position: center
</style>
