<template>
  <div>
    <div class="pre-checkout-header">
      <affix class="w-100" relative-element-selector="#pre-checkout-content">
        <b-container class="bg-white">
          <b-row class="p-4 border-bottom">
            <b-col cols="auto" class="text-left">
              <a @click="previous">
                <b-btn variant="outline-primary" class="rounded-4 px-4">
                  {{ previousRoute().previous }}
                </b-btn>
              </a>
            </b-col>
            <b-col class="d-flex flex-column justify-content-center text-right text-danger font-weight-bold">
              <span v-show="getErrors('cartError') !== ''" class="help text-danger float-right animated flash">
                {{ getErrors('cartError') }}
              </span>
            </b-col>
            <b-col cols="auto" class="text-right">
              <span class="d-inline-block mr-2 text-secondary font-weight-bold">
                {{ $t('Eshop.Checkout.Cart.TotalInCart', { quantity: getCartTotal }) }}
              </span>
              <b-btn variant="primary" class="rounded-4 px-4" @click="preCheckout">
                {{ nextRoute().next }}
              </b-btn>
            </b-col>
          </b-row>
        </b-container>
      </affix>
    </div>
    <b-container class="bg-white mb-2" id="pre-checkout-content">
      <b-row>
        <b-col cols="12" class="py-4 px-5">
          <div
            v-if="isLoading('loadingCart') || isLoading('loadingCartProductEligible')"
            class="d-flex justify-content-center align-middle flex-column text-center p-5 vh-75"
          >
            <div class="d-inline-block">
              <icon class="icon-size-4" name="spinner" pulse />
            </div>
          </div>
          <div v-else>
            <h4 class="mb-5">
              {{ title }}
            </h4>
            <router-view ref="routeComponent" class="route-view content" />
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import pageTitleMixin from '@/app/_global/mixins/pageTitleMixin'
import enrolmentRoutingMixin from '../../mixins/enrolmentRoutingMixin'

export default {
  name: 'PreCheckoutTemplate',
  mixins: [pageTitleMixin, enrolmentRoutingMixin],
  mounted() {
    // this.initPreCheckoutRoute()
  },
  methods: {
    ...mapActions('eshop', ['productChangeCurrentCategory', 'cartNeedSizeSelection']),
    preCheckout() {
      if (typeof this.$refs.routeComponent.preCheckout === 'function') {
        this.$refs.routeComponent.preCheckout(this.next)
      }
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getErrors']),
    ...mapGetters('eshop', ['getCartTotal']),
  },
}
</script>
