<template>
  <div>
    <div class="registration-confirm registration__step" v-if="step === 0">
      <div class="registration-confirm__inner">
        <h2 class="registration__heading">Подтверждение данных</h2>
        <div class="registration__select-game">
          <div class="registration__select-item">Индивидуальное участие</div>
          <div class="registration__select-item">{{ distanceType.nameRus }}</div>
          <div class="registration__select-item">{{ fullDistanceCost }} ₽</div>
        </div>
        <hr class="registration__divider" />
        <div class="registration__confirm-info">
          <div class="registration__confirm-col">
            <p
              class="registration__confirm-value"
            >{{ lastNameRus }} {{ firstNameRus }} {{ middleNameRus }}</p>
            <p class="registration__confirm-value">{{ birthDate | moment('DD.MM.YYYY')}}</p>
            <p class="registration__confirm-value">{{ genderId === 1 ? 'Мужской' : 'Женский' }} пол</p>
            <p
              class="registration__confirm-value"
            >{{ findCountry(countryId) }} {{ findRegion(regionId) }} {{ findLocality(localityId) }}</p>
          </div>
          <div class="registration__confirm-col">
            <p class="registration__confirm-value">{{ email }}</p>
            <p class="registration__confirm-value">{{ phoneNumber }}</p>
            <p
              class="registration__confirm-value"
              v-if="event.sport.id != 20"
            >{{ emergencyPhone + ' (доп)'}}</p>
          </div>
        </div>
      </div>
      <div class="registration__nav-btn">
        <button
          class="btn btn--main btn--size-lg registration__btn"
          :class="{ 'sending': sendingSubmit }"
          :disabled="sendingSubmit"
          type="button"
          @click="submit"
          v-if="fullDistanceCost != 0"
        >Подтвердить и оплатить</button>
        <button
          class="btn btn--main btn--size-lg registration__btn"
          :class="{ 'sending': sendingSubmit }"
          :disabled="sendingSubmit"
          type="button"
          @click="submit"
          v-else
        >Подтвердить</button>
        <slot name="btns"></slot>
        <p
          class="field-text__help text--red"
          v-if="emailExists && !loggedIn"
        >Данный email уже используется. Войдите в личный кабинет или измените данные.</p>
        <!---->
      </div>
    </div>
  <div v-if="step === 1">
    <paymentPage>
      <template slot="paymentPage">
        <iframe v-if="paymentPage != null" :src="paymentPage" width="100%" height="1000" ></iframe>
      </template>
    </paymentPage>
  </div>
  </div>
</template>

<script>
import { mapPersonalDataFields } from "@/store";
import axios from "axios";
import ConfirmData from "@/mixins/confirm-data";
import GeoData from "@/mixins/geo-data";
import PaymentPage from "@/views/paymentPage"
export default {
  props: {
    promocodeInfo: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  name: "confirm",
  data() {
    return {
      step: 0,
      paymentPage: null,
      emailExists: false,
      emailGenerated: false,
      errors: [],
      body: {
        participationTypeId: null,
        selfRegistration: null,
        distanceId: null,
        clothingSizeId: null,
        startingNumber: null,
        lastNameRus: null,
        firstNameRus: null,
        middleNameRus: null,
        genderId: null,
        birthDate: null,
        countryId: null,
        regionId: null,
        localityId: null,
        email: null,
        phoneNumber: null,
        emergencyPhone: null,
        sportClubId: null,
        isBeneficiary: null,
        publicOffer: null,
        competitionClause: null,
        promocodeId: null,
        plainningTime: null
      },
      submitted: false,
      sendingSubmit: false,
      sendingPayment: false,
      errorDuringPayment: false,
      formNotValid: false
    };
  },
  components: {
    PaymentPage
  },
  mixins: [GeoData, ConfirmData],
  mounted() {
    this.emailExists = false;
    this.emailGenerated = false;
    this.$store.commit("SET_NEED_TO_LOG_IN_DURING_REGISTRATION", false);
  },
  computed: {
    promocodeId() {
      if (this.promocodeInfo) {
        return this.promocodeInfo.id;
      } else {
        return null;
      }
    },
    distanceCost() {
      let distance = this.distances.find(
        item => item.id == this.chosenDistance
      );
      return this.isBeneficiary
        ? distance.distanceCost / 2
        : distance.distanceCost;
    },
    participationType() {
      return this.$store.getters["part/participationType"];
    },
    self() {
      return this.$store.getters["part/self"];
    },
    event() {
      return this.$store.getters.event;
    },
    fullDistanceCost() {
      let distance = this.distances.find(
        item => item.id == this.chosenDistance
      );
      var diff = new Date(Date.now()).getFullYear() - new Date(this.birthDate).getFullYear();
      if (this.promocodeInfo) {
        if (this.promocodeInfo.discountType === "Percent") {
          return (
            (distance.distanceCost *
              (100 - this.promocodeInfo.promocodePercent)) /
            100
          );
        } else return distance.distanceCost - this.promocodeInfo.promocodeSum;
      } else {
        return (diff >= 65 && this.genderId == 1) || (diff >= 50 && this.genderId != 1)
          ? distance.distanceCost / 2
          : distance.distanceCost;
      }
    },
    ...mapPersonalDataFields({
      firstNameRus: "rows[0].firstNameRus",
      lastNameRus: "rows[0].lastNameRus",
      middleNameRus: "rows[0].middleNameRus",
      birthDate: "rows[0].birthDate",
      genderId: "rows[0].genderId",
      email: "rows[0].email",
      countryId: "rows[0].countryId",
      regionId: "rows[0].regionId",
      localityId: "rows[0].localityId",
      phoneNumber: "rows[0].phoneNumber",
      clothingSizeId: "rows[0].clothingSizeId",
      participationTypeId: "rows[0].participationTypeId",
      selfRegistration: "rows[0].selfRegistration",
      distanceId: "rows[0].distanceId",
      startingNumber: "rows[0].startingNumber",
      emergencyPhone: "rows[0].emergencyPhone",
      sportClubId: "rows[0].sportClubId",
      isBeneficiary: "rows[0].isBeneficiary",
      publicOffer: "rows[0].publicOffer",
      competitionClause: "rows[0].competitionClause",

      firstNameRusCopy: "rows[0].firstNameRus",
      lastNameRusCopy: "rows[0].lastNameRus",
      middleNameRusCopy: "rows[0].middleNameRus",
      birthDateCopy: "rows[0].birthDate",
      genderIdCopy: "rows[0].genderId",
      emailCopy: "rows[0].email",
      countryIdCopy: "rows[0].countryId",
      regionIdCopy: "rows[0].regionId",
      localityIdCopy: "rows[0].localityId",
      phoneNumberCopy: "rows[0].phoneNumber",
      clothingSizeIdCopy: "rows[0].clothingSizeId",
      participationTypeIdCopy: "rows[0].participationTypeId",
      selfRegistrationCopy: "rows[0].selfRegistration",
      distanceIdCopy: "rows[0].distanceId",
      startingNumberCopy: "rows[0].startingNumber",
      emergencyPhoneCopy: "rows[0].emergencyPhone",
      sportClubIdCopy: "rows[0].sportClubId",
      isBeneficiaryCopy: "rows[0].isBeneficiary",
      publicOfferCopy: "rows[0].publicOffer",
      competitionClauseCopy: "rows[0].competitionClause",
      plainningTime: "rows[0].plainningTime"
    }),

    needLoggedInDuringRegistration() {
      return this.$store.getters.needLoggedInDuringRegistration;
    },
    loggedInDuringRegistration() {
      return this.$store.getters.loggedInDuringRegistration;
    },

    clothingSize() {
      return this.$store.getters["part/clothingSize"];
    },
    niceNumber() {
      return this.$store.getters["part/niceNumber"];
    },
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  },
  methods: {
    fillBody() {
      this.body.participationTypeId = this.$route.query.participationType;
      this.body.selfRegistration = this.$route.query.type === "self";
      this.body.distanceId = this.$route.query.distance;
      this.body.clothingSizeId = this.clothingSize;
      this.body.startingNumber = this.niceNumber;
      this.body.lastNameRus = this.lastNameRus;
      this.body.firstNameRus = this.firstNameRus;
      this.body.middleNameRus = this.middleNameRus;
      this.body.genderId = this.genderId;
      this.body.birthDate = this.birthDate;
      this.body.countryId = this.countryId;
      this.body.regionId = this.regionId;
      this.body.localityId = this.localityId;
      this.body.email = this.email;
      this.body.phoneNumber = this.phoneNumber;
      this.body.emergencyPhone = this.emergencyPhone;
      this.body.sportClubId = this.sportClubId;
      this.body.isBeneficiary = this.isBeneficiary;
      this.body.publicOffer = this.publicOffer;
      this.body.competitionClause = this.competitionClause;
      this.body.promocodeId = this.promocodeId;
      this.body.plainningTime = this.plainningTime;
    },
    publicRegister() {
      this.sendingSubmit = true;
      axios
        .put(
          "/api/v1/events/" +
            this.$route.params.id +
            "/public-event-registration",
          this.body
        )
        .then(response => {
          // console.log(response);
          if (response.status === 200) {
            this.emailGenerated = true;
            this.emailExists = false;
            window.location.href = response.data.link;
          }
          this.sendingSubmit = false;
        })
        .catch(error => {
          // console.log(error.response)
          if (error.response.status === 400) {
            // this.$toastr.e(error.response.data.Ru)
            this.sendingSubmit = false;
            this.$toastr.e(error.response.data.Ru);

            //
            // this.submitted = false;
          } else this.$toastr.e(error.response.data.Ru);
          this.sendingSubmit = false;
        });
    },
    loggedRegistration() {
      this.sendingSubmit = true;
      this.body.plainningTime = this.body.plainningTime + ":00"
      //console.log(this.body);
      axios
        .put(
          "/api/v1/events/" + this.$route.params.id + "/event-registration",
          this.body
        )
        .then(response => {
          // console.log(response);
          this.sendingSubmit = false;
          if (response.status === 200) {
            this.submitted = true;
            //this.step = 1;
            //this.paymentPage = response.data.link;
            ym(42001724, 'reachGoal', 'payment_button');
            }
          //this.window_payment = response.data.link;
          //this.paymentPage = response.data.link;
          window.location.href = response.data.link;
        })
        .catch(error => {
          // console.log(error.response);
          this.paymentPage = 'www.google.com/';
          this.sendingSubmit = false;
          if (error.response.status === 400) {
            if (error.response.statusText === "Bad Request") {
              //console.log('Думай над формой')
              this.formNotValid = true;
            }
            if (
              error.response.data.Ru === "Участник уже зарегистрировался на данную дистанцию"
            ) {
              this.$toastr.e(
                "Вы уже зарегистрированы на данное мероприятие."
              );
            }
          } else {
            this.$toastr.e(error.response.data.Ru);
          }
        });
    },
    submit() {
      this.fillBody();
      if (this.body.selfRegistration) {
        if (!this.loggedIn) {
          this.publicRegister();
        } else {
          this.loggedRegistration();
        }
      } else {
        // console.log('present')
      }
    },
    back() {
      this.$emit("backToPersonalData");
    },
    compareData() {
      let form = {
        participationTypeId: this.participationType,
        selfRegistration: this.self,
        distanceId: this.chosenDistance,
        clothingSizeId: this.clothingSize,
        startingNumber: this.niceNumber,
        lastNameRus: this.lastNameRus,
        firstNameRus: this.firstNameRus,
        middleNameRus: this.middleNameRus,
        genderId: this.genderId,
        birthDate: this.birthDate,
        countryId: this.countryId,
        regionId: this.regionId,
        localityId: this.localityId,
        email: this.email,
        phoneNumber: this.phoneNumber,
        emergencyPhone: this.emergencyPhone,
        sportClubId: this.sportClubId,
        isBeneficiary: this.isBeneficiary,
        publicOffer: this.publicOffer,
        competitionClause: this.competitionClause,
        plainningTime: this.plainningTime
      };
      let copyForm = {
        participationTypeId: this.participationType,
        selfRegistration: this.self,
        distanceId: this.chosenDistance,
        clothingSizeId: this.clothingSize,
        startingNumber: this.niceNumber,
        lastNameRus: this.lastNameRusCopy,
        firstNameRus: this.firstNameRusCopy,
        middleNameRus: this.middleNameRusCopy,
        genderId: this.genderIdCopy,
        birthDate: this.birthDateCopy,
        countryId: this.countryIdCopy,
        regionId: this.regionIdCopy,
        localityId: this.localityIdCopy,
        email: this.emailCopy,
        phoneNumber: this.phoneNumberCopy,
        emergencyPhone: this.emergencyPhoneCopy,
        sportClubId: this.sportClubIdCopy,
        isBeneficiary: this.isBeneficiary,
        publicOffer: this.publicOffer,
        competitionClause: this.competitionClause,
        plainningTime: this.plainningTime
      };

      if (JSON.stringify(form) === JSON.stringify(copyForm)) {
        this.sendingPayment = true;

        axios
          .put(
            "/api/v1/events/" +
              this.$route.params.id +
              "/payments/register?distanceId=" +
              this.chosenDistance,
            null
          )
          .then(response => {
            // console.log(response);
            this.sendingPayment = false;
            this.errorDuringPayment = false;
            window.location.href = "response.data.link";
            // window.open(response.data.link);
            this.$toastr.s(
              "Транзкакция сформирована. Убедитесь в том, что Ваш бразуер не блокирует всплывающие окна."
            );
          })
          .catch(error => {
            this.sendingPayment = false;
            this.$toastr.e(
              "Произошла ошибка во время оформления транзакции. Продолжите работу в личном кабинете"
            );
          });
      } else {
        this.$toastr.e(
          "Данные на форме не совпадают с предварительными данными, которые были введены"
        );
      }
    },
    payment() {
      this.compareData();
    },
    authorize() {
      this.$store.commit("SET_NEED_TO_LOG_IN_DURING_REGISTRATION", true);
      this.$modal.show("auth-modal");
    }
  }
};
</script>

<style scoped>
</style>