<template>
  <div>
    <div class="registration-confirm registration__step">
      <div class="registration-confirm__inner">
        <h2 class="registration__heading">Подтверждение данных</h2>
        <div class="registration__select-game"
          v-if="!!filteredParticipationType"
        >
          <div class="registration__select-item">
            {{ filteredParticipationType[0].nameRus }} участие
          </div>
          <div class="registration__select-item">
            {{ distanceType.nameRus }}
          </div>
          <div class="registration__select-item">
            {{ distanceCost }} ₽
          </div>
        </div>
        <hr class="registration__divider">
        <div class="registration__confirm-info">
            <div class="registration__confirm-col">
              <p class="registration__confirm-value">
                {{ child.data.lastNameRus }} {{ child.data.firstNameRus }} {{ child.data.middleNameRus }}
              </p>
               <p class="registration__confirm-value">
                {{ child.data.birthDate | moment('DD.MM.YYYY')}}
              </p>
            </div>
        </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">
          Подтвердить и оплатить
        </button>
        <slot name="btns"></slot>
      </div>
  </div>
</template>

<script>
import ConfirmData from '@/mixins/confirm-data'
import Axios from 'axios';
export default {
  data() {
    return {
      sendingSubmit: false,
    }
  },
  props: ['child', 'isBeneficiary', 'promocodeInfo'],
  mixins: [ConfirmData],
  computed: {
    eventId() {
      return this.$route.params.id
    },
    distanceId() {
      return this.$route.query.distance
    },
    promocodeId() {
      if(this.promocodeInfo){
        return this.promocodeInfo.id;
      }
      else{
        return null;
      }
    },
    distanceCost() {
     let distance = this.distances.find(item => item.id == this.chosenDistance);
      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 this.isBeneficiary ? distance.distanceCost / 2 : distance.distanceCost;
      }

      //let distance = this.distances.find(item => item.id == this.chosenDistance);
      //return this.child.isBeneficiary ? distance.distanceCost / 2 : distance.distanceCost;
    }
  },
  methods: {
    submit() {
      this.sendingSubmit = true;
      //if (this.promocodeInfo){
      Axios.put(`/api/v1/events/${this.eventId}/distances/${this.distanceId}/timerkids/${this.child.data.id}?isBeneficiary=${this.child.isBeneficiary}&promocodeId=${this.promocodeId}`)
        .then((response) => {
          this.sendingSubmit = false;
          console.log(response)
          window.location.href = response.data.link;
        })
        .catch((error) => {
          this.$toastr.e(error.response.data.Ru)
           if (error.response.status === 400 || error.response.status === 404) {
             this.$toastr.e(error.response.data.Ru)
           }
           console.log(error)
        })
        .finally(() => this.sendingSubmit = false)
    }
  }
}
</script>

<style scoped>

</style>