<template lang="pug">
  .flex.flex-col.gap-y-6
    .flex.flex-col.gap-y-6
      span.font-bold.text-xl Договор
      .flex.self-center
        base-stepper(
          :steps="steps",
          :currentStep="currentStep"
        )      
      component(v-bind:is="currentTabComponent")     
    .flex.justify-between
      .flex
        base-button(
            :size="40",
            @click="prevStep",
            v-if="currentStep !== 0",
            outlined,
          ) Назад
      .flex
        base-button(
          :size="40",
          @click="nextStep",
          v-if="currentStep < steps.length-1",
        ) Далее
        base-button(
          :size="40",
          @click="finish",
          v-if="currentStep === steps.length-1"
        ) Завершить
</template>

<script>
import BaseButton from "@/components/base/BaseButton";
import BaseStepper from "@/components/base/BaseStepper";
import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";

export default {
  name: "StepperCreateAgreement",
  components: {
    BaseButton,
    BaseStepper,
    AgreementCommon,
    AgreementPerson,
  },
  data() {
    return {
      currentStep: 0,
      steps: [
        {
          id: 0,
          label: "1",
          value: "Договор",
          component: "agreement-common",
        },
        {
          id: 1,
          label: "2",
          value: "Пациент",
          component: "agreement-person",
        },
        {
          id: 2,
          label: "2",
          value: "Пациент",
          component: "agreement-person",
        },
      ],
    };
  },
  computed: {
    currentTabComponent: function () {
      return this.steps[this.currentStep]?.component;
    },
  },
  methods: {
    nextStep() {
      this.currentStep += 1;
    },
    prevStep() {
      this.currentStep -= 1;
    },
    finish() {},
  },
};
</script>
