<template>
  <div>
    <p class="subtitle is-5">Inscripción a: {{ area(inscripcion.idArea) }}</p>

    <b-steps
      v-model="activeStep"
      :animated="isAnimated"
      :rounded="isRounded"
      :has-navigation="hasNavigation"
    >
      <b-step-item
        step="1"
        label="Registro"
        type="is-success"
        :clickable="isStepsClickable"
      >
      </b-step-item>

      <b-step-item
        step="2"
        label="Validación"
        type="is-success"
        :clickable="isStepsClickable"
      >
      </b-step-item>
    </b-steps>
  </div>
</template>

<script>
export default {
  props: {
    inscripcion: { type: Object, required: true },
    area: { type: Function, required: true },
  },
  data() {
    return {
      activeStep: 0,

      isAnimated: true,
      isRounded: true,
      isLoading: false,

      hasNavigation: false,
      isStepsClickable: false,
    }
  },
  methods: {
    step() {
      if (this.inscripcion.validacion === 1) this.activeStep = 1
    },
  },
  created() {
    this.step()
  },
}
</script>
