<template lang="pug">
  q-stepper(
    v-model="currentStep",
    :color="color",
    :flat="flat",
    class="font-input",
    animated
  )
    q-step.overflow-hidden(
      v-for="step in steps",
      :name="step.id",
      :title="step.value",
      :key="step.id",
      :prefix="step.id + 1"
      :done="currentStep > step.id"
    )
      slot
      q-stepper-navigation.flex.justify-between
        .flex
          q-btn(
            @click="prevStep",
            v-if="currentStep !== 0",
            outline,
            no-caps,
            label="Назад",
            color="primary",
            padding="8px 24px"
          )
        .flex
          q-btn(
            @click="nextStep",
            v-if="currentStep < steps.length-1",
            no-caps,
            label="Далее",
            color="primary",
            padding="8px 24px"
          )
          q-btn(
            @click="finish",
            v-if="currentStep === steps.length-1",
            no-caps,
            :label="finishLabel",
            color="primary",
            padding="8px 24px"
          )
</template>

<script>
export default {
  name: "BaseStepperQuasar",
  props: {
    name: Number,
    steps: Array,
    currentStep: {
      type: Number,
      default: 0,
    },
    nextStep: Function,
    prevStep: Function,
    flat: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "primary",
    },
    finishLabel: {
      type: String,
      default: "Завершить",
    },
    finish: {
      type: Function,
      default: () => {},
    },
  },
};
</script>

<style lang="sass" scoped>
.font-input
  font-feature-settings: 'pnum' on, 'lnum' on
</style>
