From 99219a6aaab91beba61353f322e8d5ba25a31fb5 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 10 Jan 2023 17:31:23 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=D0=BA=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20=D0=BF=D0=BE=D0=BB=D0=B8=D1=81=D0=B0=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             | 11 ++-
 src/components/base/BaseRadioButtonsGroup.vue | 29 +++++--
 .../components/MedicalBaseData.vue            |  1 +
 .../components/MedicalIdentityDocuments.vue   |  4 -
 .../components/MedicalPolicyDocuments.vue     | 75 +++++++++++++------
 src/pages/medicalCard/utils/medicalConfig.js  | 12 +++
 6 files changed, 98 insertions(+), 34 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index c0c0aee..1276fbf 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -6,11 +6,10 @@
     ) {{ label }}
     .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
       :class="{'border-none': borderNone, 'border-error': borderError }"
-      :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
+      :style="disabledBackgroundStyle"
     )
       input.input.w-full.outline-0.not-italic(
         v-model="value",
-        :style="{'color': disabled && 'var(--font-grey-color-0)'}",
         :class="textClass",
         :placeholder="placeholder",
         :disabled="disabled",
@@ -63,6 +62,13 @@ export default {
             "text-sm": true,
           };
     },
+    disabledBackgroundStyle() {
+      return this.disabled
+        ? {
+            "background-color": "var(--bg-disable-grey-color)",
+          }
+        : false;
+    },
   },
 };
 </script>
@@ -83,6 +89,7 @@ export default {
   background-color: inherit
   &:disabled, &[disabled]
     background-color: var(--bg-disable-grey-color)
+    color: var(--font-grey-color-0)
 .label
   color: var(--font-black-color)
 </style>
diff --git a/src/components/base/BaseRadioButtonsGroup.vue b/src/components/base/BaseRadioButtonsGroup.vue
index feedafa..d93e7c9 100644
--- a/src/components/base/BaseRadioButtonsGroup.vue
+++ b/src/components/base/BaseRadioButtonsGroup.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .container.flex.flex-col.gap-y-2
     .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
-    .group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
+    .group.flex.text-base(:class="radioGroupClasses")
       .option(v-for="item in items")
         input.mr-2(
           type="radio",
@@ -23,10 +23,9 @@ export default {
       type: Array,
       default: () => [],
     },
-    direction: {
-      type: String,
-      default: "row",
-    },
+    directionColumn: Boolean,
+    columnGap: String,
+    rowGap: String,
   },
   computed: {
     value: {
@@ -37,6 +36,26 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
+    radioGroupClasses() {
+      if (this.directionColumn) {
+        return this.columnGap
+          ? {
+              "flex-col": true,
+              [this.columnGap]: true,
+            }
+          : {
+              "flex-col": true,
+              "gap-y-1": true,
+            };
+      }
+      if (this.rowGap)
+        return {
+          [this.rowGap]: true,
+        };
+      return {
+        "gap-x-4": true,
+      };
+    },
   },
 };
 </script>
diff --git a/src/pages/medicalCard/components/MedicalBaseData.vue b/src/pages/medicalCard/components/MedicalBaseData.vue
index 513e5f0..2beaa2b 100644
--- a/src/pages/medicalCard/components/MedicalBaseData.vue
+++ b/src/pages/medicalCard/components/MedicalBaseData.vue
@@ -6,6 +6,7 @@
         base-input.w-full(
           placeholder="ФИО*",
           v-model="clientDetail.fullName",
+          disabled
         )
         base-radio-buttons-group(
           :items="gendersList",
diff --git a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
index a8bfdeb..9ab78e2 100644
--- a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
@@ -23,10 +23,6 @@
             label="Дата выдачи",
             v-model="clientDetail.identity_documents.issued_by_date"
           )
-        base-input(
-          label="Страховая оганизация",
-          placeholder="Введите название организации"
-        )
 </template>
 
 <script>
diff --git a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
index 02f86e5..259e5fd 100644
--- a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
@@ -1,28 +1,38 @@
 <template lang="pug">
   .base.flex.flex-col.gap-y-6
     span.font-bold Полис
+    base-radio-buttons-group(
+      :items="policiesList",
+      v-model="policy",
+      rowGap="gap-x-[182px]"
+    )
     .flex.gap-x-4
-      base-input.input(
-        label="Серия и номер полиса ОМС",
-        placeholder="000000 0000000000",
-        v-model="clientDetail.OMSPolicy.number",
-        v-mask="'###### ##########'"
-      )
-      base-input.input(
-        label="Страховая компания полиса ОМС",
-        v-model="clientDetail.OMSPolicy.organization",
-      )
-    .flex.gap-x-4  
-      base-input.input(
-        label="Серия и номер полиса ДМС",
-        placeholder="000000 0000000000",
-        v-model="clientDetail.DMSPolicy.number",
-        v-mask="'###### ##########'"
-      )
-      base-input.input(
-        label="Страховая компания полиса ДМС",
-        v-model="clientDetail.DMSPolicy.organization",
-      )
+      .flex.flex-col.gap-y-4
+        base-input.input(
+          label="Серия и номер полиса ОМС",
+          placeholder="000000 0000000000",
+          v-model="clientDetail.OMSPolicy.number",
+          v-mask="'###### ##########'",
+          :disabled="!selectedOMSPolicy"
+        )
+        base-input.input(
+          label="Страховая организация полиса ОМС",
+          v-model="clientDetail.OMSPolicy.organization",
+          :disabled="!selectedOMSPolicy"
+        )
+      .flex.flex-col.gap-y-4
+        base-input.input(
+          label="Серия и номер полиса ДМС",
+          placeholder="000000 0000000000",
+          v-model="clientDetail.DMSPolicy.number",
+          v-mask="'###### ##########'",
+          :disabled="selectedOMSPolicy"
+        )
+        base-input.input(
+          label="Страховая организация полиса ДМС",
+          v-model="clientDetail.DMSPolicy.organization",
+          :disabled="selectedOMSPolicy"
+        )
     base-input(
       label="Код категории льготы",
       placeholder="000",
@@ -42,16 +52,35 @@
 import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
-import BaseButton from "@/components/base/BaseButton";
 import { mask } from "vue-the-mask";
+import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
 
 export default {
   name: "MedicalPolicyDocuments",
-  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  components: {
+    BaseInput,
+    BaseInputDate,
+    BaseSelect,
+    BaseRadioButtonsGroup,
+  },
   directives: { mask },
   props: {
     clientDetail: Object,
   },
+  data() {
+    return {
+      policy: "OMS",
+    };
+  },
+  computed: {
+    policiesList() {
+      return medicalDetailConfig.policiesList;
+    },
+    selectedOMSPolicy() {
+      return this.policy === "OMS";
+    },
+  },
 };
 </script>
 
diff --git a/src/pages/medicalCard/utils/medicalConfig.js b/src/pages/medicalCard/utils/medicalConfig.js
index bbfd261..097187f 100644
--- a/src/pages/medicalCard/utils/medicalConfig.js
+++ b/src/pages/medicalCard/utils/medicalConfig.js
@@ -11,6 +11,18 @@ export const medicalDetailConfig = {
       value: "WOMEN",
     },
   ],
+  policiesList: [
+    {
+      id: "1",
+      label: "Полис ОМС",
+      value: "OMS",
+    },
+    {
+      id: "2",
+      label: "Полис ДМС",
+      value: "DMS",
+    },
+  ],
   identity_document: {
     height: 366,
     title: "Паспортные данные",