<template>
  <div class="content">
    <div class="enrol-size-selection-wrapper">
      <enrol-grid-1>
        <template slot="full-content">
          <div class="card w-100">
            <div class="card-body">
              <h4>
                {{ title }}
              </h4>
              <foc-pwp ref="pwpFoc" />
              <enrolment-stepped-footer-navigation
                :enrolment-data="enrolmentData"
                :validate-and-save="validate"
                :next-action="() => {}"
                :prev-action="prevAction"
                :previous="previous"
                :next="next"
              />
            </div>
          </div>
        </template>
      </enrol-grid-1>
    </div>
  </div>
</template>
<script>
import enrolGrid1 from '@/app/enrolment/_global/components/templates/layouts/enrol-grid-1'
import FocPwp from '@/app/eshop/focpwp/components/FocPwp'
import EnrolmentSteppedFooterNavigation from '@/app/enrolment/_global/components/elements/enrolmentSteppedfooterNavigation'
import { mapGetters } from 'vuex'

export default {
  name: 'EnrolmentSizesSelectionPage',
  components: { FocPwp, EnrolmentSteppedFooterNavigation, enrolGrid1 },
  data() {
    return {
      title: '',
    }
  },
  $_veeValidate: {
    validator: 'new',
  },
  props: {
    enrolmentData: { type: Object, required: true },
    previous: { type: String },
    next: { type: String },
    prevAction: { type: Function },
    nextAction: { type: Function },
  },
  mounted() {
    let vue = this
    vue.title = this.$refs.pwpFoc.title()
  },
  methods: {
    async validate() {
      this.enrolmentData.step_states['select-pwp-foc'] = false
      if (this.$refs.pwpFoc !== undefined) {
        this.$refs.pwpFoc.preCheckout(this.nextPwpFocAction)
      }
    },
    nextPwpFocAction() {
      this.enrolmentData.step_states['select-pwp-foc'] = true
      this.$nextTick(() => {
        this.nextAction()
      })
    },
  },
  computed: {
    ...mapGetters(['getErrors']),
  },
}
</script>
