<template lang="pug">
  .flex.flex-col.justify-between
    span.font-bold.text-xl Договор
    base-stepper-quasar(
      :currentStep="currentStep",
      :steps="steps",
      :next-step="nextStep",
      :prev-step="prevStep",
      flat
    )
      component(v-bind:is="currentTabComponent")
</template>

<script>
import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
import AgreementServices from "./FormsAgreementCreate/AgreementServices";
import BaseStepperQuasar from "@/components/base/BaseStepperQuasar";

export default {
  name: "StepperCreateAgreement",
  components: {
    AgreementCommon,
    AgreementPerson,
    AgreementServices,
    BaseStepperQuasar,
  },
  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-services",
        },
      ],
    };
  },
  computed: {
    currentTabComponent: function () {
      return this.steps[this.currentStep]?.component;
    },
  },
  methods: {
    nextStep() {
      this.currentStep += 1;
    },
    prevStep() {
      this.currentStep -= 1;
    },
    finish() {},
  },
};
</script>
