<template>
  <b-steps
    class="mt-6 mb-5"
    type="is-info"
    size="is-large"
    :has-navigation="false"
    v-model="idStatus"
  >
    <b-step-item
      label="Pre Registro"
      icon="account-plus"
      :visible="idStatus < 6"
      :clickable="false"
    />

    <b-step-item
      label="Pre Registro Validado"
      icon="account-clock"
      :visible="idStatus < 6"
      :clickable="false"
    />

    <b-step-item
      label="Registro"
      icon="account"
      :visible="idStatus < 6"
      :clickable="false"
    />

    <b-step-item
      label="Pre Termino"
      icon="account-details"
      :visible="idStatus < 6"
      :clickable="false"
    />

    <b-step-item
      label="Termino"
      icon="account-clock"
      :visible="idStatus < 6"
      :clickable="false"
    />

    <b-step-item
      label="Liberacion"
      icon="account-check"
      :visible="idStatus < 6"
      :clickable="false"
    />

    <b-step-item
      class="bad"
      type="is-danger"
      label="Carta Aceptación Rechazada"
      icon="file"
      :clickable="false"
      :visible="idStatus === 6"
    />

    <b-step-item
      class="bad"
      type="is-danger "
      label="Carta Termino Rechazada"
      icon="file"
      :clickable="false"
      :visible="idStatus === 7"
    />

    <b-step-item
      class="bad"
      type="is-danger"
      label="Informe Global Rechazado"
      icon="file"
      :clickable="false"
      :visible="idStatus === 8"
    />

    <b-step-item
      class="bad"
      type="is-danger bad"
      label="Cancelado"
      icon="account-cancel"
      :clickable="false"
      :visible="idStatus === 9"
    />
  </b-steps>
</template>

<script>
export default {
  props: {
    idStatus: { type: Number, required: true },
  },
}
</script>

<style>
.b-steps .steps .step-items .step-item.is-danger::before,
.b-steps .steps .step-items .step-item.is-danger::after {
  display: none !important;
  content: none !important;
}
</style>
