<template lang="pug">
  .form-wrapper.relative.h-fit.rounded
    transition(name="medical-form", mode="out-in")
      .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
        base-loader
    .flex.flex-col.h-full.gap-25px.p-6
      .flex.w-fit.gap-11px.items-center
        span.font-bold.text-base {{title}}
        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!thisEdit" @click="clickEditForm" size="20")
      slot
      .flex.h-fit.w-fit.gap-2
        base-button.text-base.font-semibold(v-if="thisEdit" outlined :size="40" @click="cancelEdit") Отменить
        base-button.text-base.font-semibold(v-if="thisEdit" :size="40" @click="saveChangeForm") Сохранить изменения
</template>

<script>
import BaseButton from "@/components/base/BaseButton.vue";
import BaseLoader from "@/components/Loader/BaseLoader.vue";
export default {
  name: "MedicalFormWrapper",
  components: { BaseButton, BaseLoader },
  props: {
    title: String,
  },
  data() {
    return {
      thisEdit: false,
      isLoadingData: false,
    };
  },
  methods: {
    clickEditForm() {
      this.thisEdit = true;
    },
    cancelEdit() {
      this.thisEdit = false;
    },
    saveChangeForm() {
      this.isLoadingData = true;
      setTimeout(() => {
        this.isLoadingData = false;
        this.thisEdit = false;
      }, 2000);
    },
  },
};
</script>

<style lang="sass" scoped>
.form-wrapper
  width: 83.2%
  background-color: var(--default-white)
  @media (max-width: 600px)
    width: fit-content
.edit-button
  color: var(--btn-blue-color)
.loader
  background-color: var(--default-white)
.medical-form-enter-from
  opacity: 0
  transform: translateY(0px)
  pointer-events: none
.medical-form-leave-to
  opacity: 0
  transform: translateY(0px)
  pointer-events: none
.medical-form-leave-active
  transition: 0.3s ease
.medical-form-move
  transition: 0.3s ease
</style>
