<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
          .flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать!
          .flex.not-italic.font-medium.text-base(
            :style="{color: 'var(--font-grey-color)'}"
          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
        .flex.flex-col.gap-y-5
          .flex.flex-col.gap-y-px
            base-input.blue-color(
              :rule="[wrongData => !!wrongData || 'Этого телефона нет в системе']",
              v-model="user.username",
              placeholder="+7 (915) 224–21–31",
              label="Номер телефона",
              size="L"
            )
          .flex.flex-col.gap-y-px
            base-input.blue-color(
              :rule="[wrongData => !!wrongData || 'Неверный пароль']",
              v-model="user.password",
              :type="changeType",
              placeholder="Введите ваш пароль",
              label="Пароль",
              size="L"
            )
              .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
                img(:src="!isView ? eye_close : eye_open")
          .flex.items-center.gap-x-8px.-ml-2
            q-checkbox(v-model="person", type="checkbox")
            .flex.non-italic.font-medium.base Запомнить меня
        base-button(
          :disable="disabledButton",
          label="Войти в аккаунт",
          size="L",
          @click="login",
        )
      .absolute.left-12.bottom-12.text-smm.font-medium 2023 © Астра
    .right-col.flex.items-center.justify-center.relative
</template>

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

export default {
  name: "TheLogin",
  components: { BaseInput, BaseButton },
  data() {
    return {
      isView: false,
      logoMark,
      eye_close,
      eye_open,
      authorized: true,
      user: {},
      userData: {},
      person: false,
    };
  },
  computed: {
    wrongData() {
      return !this.authorized;
    },
    changeType() {
      return !this.isView ? "password" : "text";
    },
    disabledButton() {
      return !(this.user.username && this.user.password);
    },
    showBorder() {
      return !this.authorized && !this.user.username && !this.user.password;
    },
  },
  methods: {
    changeView() {
      this.isView = !this.isView;
    },
    async auth() {
      this.userData = await fetchWrapper.get("users/me");
    },
    login() {
      fetchWrapper
        .post("auth/login", {
          user_name: this.user.username,
          password: this.user.password,
        })
        .then(() => {
          this.auth().then(() => this.$router.push("/"));
        })
        .catch(() => {
          this.authorized = false;
          this.user.username = "";
          this.user.password = "";
          this.$router.push("/login");
        });
    },
  },
};
</script>

<style lang="sass" scoped>
.left-col
  background-color: var(--default-white)
  color: var(--font-dark-blue-color)
  height: 100%
  width: calc(1920px - 1108px)

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

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

.letter-spacing
  letter-spacing: 0.02em

.right-col
  background-color: var(--font-dark-blue-color)
  width: calc(100vw - 812px)
  background-image: url("@/assets/images/loginBG.svg")
  background-size: cover
  background-repeat: no-repeat
  background-position: center

.red-color
  color: var(--border-red-color)

.q-btn
  height: 48px

.blue-color :deep(.label)
  color: var(--font-dark-blue-color)
</style>
