WIP Добавил поля для детальной информции, конфиг для мед карты

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -1,10 +1,96 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
     .wrapper-medical.relative.flex.flex-col.px-6.py-6.h-full.w-full
+      base-detail-info(:title="configData.identity_document.title" :height="configData.identity_document.height")
+      .flex.flex-col.gap-30px
+        base-detail-info(:title="configData.registration_address.title" :height="configData.registration_address.height")
+        base-detail-info(:title="configData.temporary_address.title" :height="configData.temporary_address.height")
+      .flex.flex-col.gap-2
+        base-detail-info(:title="configData.snils.title" :height="configData.snils.height")
+        base-detail-info(:title="configData.policy_number_series.title" :height="configData.policy_number_series.height")
+      base-detail-info(:title="configData.policy_organization.title" :height="configData.policy_organization.height")
+      .flex.flex-col.gap-4
+        base-detail-info(:title="configData.additional.title" :height="configData.additional.height")
+        base-detail-info(:title="configData.agreement_form.title" :height="configData.agreement_form.height")
 </template>
 
 <script>
-export default { name: "MedicalCardWrapper" };
+import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+import BaseInput from "@/components/base/BaseInput.vue";
+import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
+export default {
+  name: "MedicalCardWrapper",
+  components: { ClientDetailInput, BaseInput, BaseDetailInfo },
+  data() {
+    return {
+      configData: medicalDetailConfig,
+      medicalDataInit: {},
+    };
+  },
+  methods: {
+    saveDataMedical(data) {
+      const confidant = data ? data["confidant"] : undefined;
+      const pass = data
+        ? data?.person?.identity_document?.find((el) => el.kind === "PASSPORT")
+        : null;
+      this.medicalDataInit = {
+        ...data,
+        identity_document: {
+          ...pass,
+          number_series: `${pass.series} ${pass.number}`,
+        },
+        registration_address: {
+          registration_address: data?.person?.address?.find(
+            (el) => !el["registration_flg"]
+          )?.join_adress,
+        },
+        temporary_address: {
+          temporary_address: data?.person?.address?.find(
+            (el) => !el["temporary_registration_flg"]
+          )?.join_adress,
+        },
+        snils: {
+          ...data?.person["insurance_number"],
+        },
+        policy: {
+          ...data?.person["insurance_policy"][0],
+        },
+        policy_organization: {
+          ...data?.person["insurance_policy"][0],
+        },
+        additional: {
+          name_confidant: confidant
+            ? `${confidant?.last_name} ${confidant?.last_name} ${confidant?.patronymic}`
+            : null,
+          phone_confidant: confidant?.contacts?.find(
+            (el) => el?.kind === "PHONE"
+          ),
+        },
+        benefit_code: {
+          benefit_code: data?.benefit_code,
+        },
+        agreement_form: {
+          agreement: data?.agreement,
+          agreement_date: null,
+        },
+      };
+    },
+    async fetchDataMedicalCard() {
+      await fetchWrapper
+        .get(
+          `medical_card/medical_history/${localStorage.getItem(
+            "medicalId"
+          )}/detail/`
+        )
+        .then((res) => this.saveDataMedical(res));
+    },
+  },
+  mounted() {
+    this.fetchDataMedicalCard();
+  },
+};
 </script>
 
 <style lang="sass" scoped>
@@ -15,4 +101,17 @@ export default { name: "MedicalCardWrapper" };
 .wrapper-medical
   background-color: var(--default-white)
   height: calc(100vh - 64px)
+  display: grid
+  grid-template-columns: 280px 292px 180px 360px 463px
+  gap: 16px
+  overflow: auto
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
 </style>