<template lang="pug">
  .wrapper.flex.flex-col.gap-y-6.justify-between
    .flex.flex.flex-col.gap-y-6
      span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
      .flex.self-center
        base-stepper(
          :steps="steps",
          :currentStep="currentStep"
        )
      component(v-bind:is="currentTabComponent")
    .flex.justify-between
      .flex
        base-button.font-semibold(
            :size="40",
            @click="prevStep",
            v-if="currentStep !== 0",
            outlined,
          ) Назад
      .flex
        base-button.font-semibold(
          :size="40",
          @click="nextStep",
          v-if="currentStep < steps.length-1",
        ) Далее
        base-button.font-semibold(
          :size="40",
          @click="finish",
          v-if="currentStep === steps.length-1"
        ) Создать медицинскую карту
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
import BaseStepper from "@/components/base/BaseStepper.vue";

export default {
  name: "FormCreateMedicalCard",
  components: {
    BaseInput,
    BaseButton,
    BaseInputDate,
    BaseSelect,
    MedicalBaseData,
    MedicalIdentityDocuments,
    MedicalPolicyDocuments,
    BaseStepper,
  },
  data() {
    return {
      isBaseData: true,
      isIdentityDoc: false,
      isPolicyDoc: false,
      currentStep: 0,
      steps: [
        {
          id: 0,
          label: "1",
          value: "Основное",
          component: "medical-base-data",
        },
        {
          id: 1,
          label: "2",
          value: "ДУЛ",
          component: "medical-identity-documents",
        },
        {
          id: 2,
          label: "3",
          value: "Полис",
          component: "medical-policy-documents",
        },
      ],
    };
  },
  computed: {
    currentTabComponent: function () {
      return this.steps[this.currentStep]?.component;
    },
  },
  methods: {
    nextStep() {
      this.currentStep += 1;
    },
    prevStep() {
      this.currentStep -= 1;
    },
    finish() {},
  },
};
</script>

<style lang="sass" scoped>
.wrapper
  width: 570px
</style>
