<template lang="pug">
  .wrapper.flex.flex-col.gap-27px.h-full.pb-4
    .flex.flex-col.gap-2
      confidant-form(v-for="(confidant, index) in confidants" :index="index" :confidant="confidant")
    base-button.ml-30px(
      left-icon="icon-plus" 
      added-border-none
      :icon-left-size="12"
      @click="addNewConfidant"
      )
      span.font-medium.text-base Добавить контакт
</template>

<script>
import ConfidantForm from "@/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
import { mapState } from "vuex";

export default {
  name: "MedicalConfidantWrapper",
  components: { ConfidantForm, BaseButton },
  computed: {
    ...mapState({
      confidants: (state) => state.medical.confidantData,
    }),
  },
  methods: {
    addNewConfidant() {
      this.confidants.push(getConfidantObject());
    },
  },
};
</script>

<style lang="sass" scoped>
.wrapper
  width: 83.2%
  overflow-y: auto
  @media (max-width: 600px)
    width: fit-content
  &::-webkit-scrollbar
    width: 0
</style>
