<template lang="pug">
    .reg-section
        .reg-section__inner.wrapper
            h2.heading.heading--center.reg-section__heading Как зарегистрировать ребёнка
            .reg-section__grid
                .reg-section__wrap-media
                    .reg-section__media.video.video--timerkids


                .reg-section__info
                    ul.reg-section__steps
                        li.reg-section__step
                            span.reg-section__marker 1 шаг
                            | Регистрация родителя
                        li.reg-section__step
                            span.reg-section__marker 2 шаг
                            | Зполнение анкеты родителя
                        li.reg-section__step
                            span.reg-section__marker 3 шаг
                            | Выбор мероприятия
                        li.reg-section__step
                            span.reg-section__marker 4 шаг
                            | Заполнение анкеты ребенка

                    form.form(@submit.prevent="submit", v-if="!loggedIn")
                        fieldset.form__fieldset
                            legend.form__legend.screen-reader Форма авторизации на сайте
                            label.field-text(:class="{ 'field-text--error': (!$v.email.required || !$v.email.email) && $v.email.$dirty }")
                                span.field-text__name Email
                                span.field-text__input-wrap
                                    input.field-text__input(type='email', v-model.trim="$v.email.$model" @input="setEmail($event.target.value)" name='email', placeholder='Введите e-mail')
                                    span.field-text__help-text(v-if="!$v.email.required && $v.email.$dirty") Поле обязательно для заполнения
                                    span.field-text__help-text(v-if="!$v.email.email && $v.email.$dirty") Введите корректный email
                            label.field-text(:class="{ 'field-text--error': !$v.password.required && $v.password.$dirty }")
                                span.field-text__name Пароль
                                span.field-text__input-wrap
                                input.field-text__input(type='password', v-model.trim="$v.password.$model" @input="setPassword($event.target.value)" name='pass', placeholder='Введите пароль')
                                span.field-text__help-text(v-if="!$v.password.required && $v.password.$dirty") Поле обязательно для заполнения
                        .form__link-action
                            button.btn.btn--main.btn--size-lg(type='submit') Войти
                            p.text--red(v-if="submitStatus === 'ERROR'") Произошла ошибка! Проверьте правильность указанных данных.
                            .form__link-help
                                a.link.link--default.pointer(@click="goToRegister") Зарегистрироваться
                                a.link.link--default(@click="goToForgotPassword") Восстановить пароль
</template>

<script>
import { required, email } from "vuelidate/lib/validators";
import axios from "axios";
import Single from "vue-silentbox/components/single.vue";
export default {
  components: {
    "silentbox-single": Single
  },
  name: "regSectionTimerkids",
  mounted() {
    this.$store.commit("SUBMIT_STATUS", "WAIT_FOR_SUBMIT");
    this.email = "";
    this.password = "";
    this.$v.email.$reset();
    this.$v.password.$reset();
    var vm = this;
  },
  data() {
    return {
      email: "",
      password: ""
    };
  },
  computed: {
    submitStatus() {
      return this.$store.getters.submitStatus;
    },
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  },
  validations: {
    email: {
      required,
      email
    },
    password: {
      required
    }
  },
  methods: {
    setEmail(val) {
      this.email = val;
      this.$v.email.$touch();
    },
    setPassword(val) {
      this.password = val;
      this.$v.password.$touch();
    },
    goToRegister() {
      this.$emit("handleClose");
      this.$router.push({ name: "main-register" });
    },
    goToForgotPassword() {
      this.$emit("handleClose");
      this.$router.push({ name: "forgot-password" });
    },
    async submit() {
      let body = {
        userName: this.email,
        password: this.password
      };
      this.$v.$touch();
      if (this.$v.$invalid) {
      } else {
        axios.post("/api/v1/token", body).then(
          response => {
            this.$store.commit("LOGIN", response.data);
            this.$store.dispatch("getAccountInfo");
          },
          response => {
            this.$store.commit("FAILED_LOGIN");
          }
        );
      }
    }
  }
};
</script>

<style scoped>
.pointer {
  cursor: pointer;
}
.video::before{
  background-color: rgba(0,0,0,0) !important;
}
.video:hover::before{
  background-color: rgba(0,0,0,0) !important;
}
</style>