From 405ef5ade91a9c305290beb18fd1ca1edd0f3de8 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Thu, 13 Apr 2023 17:36:08 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D1=81=20?=
 =?UTF-8?q?=D0=B1=D1=8D=D0=BA=D0=B0=20=D0=BD=D0=B0=20=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC=D0=B5=20=D1=81=D1=82=D1=80=D0=B0=D1=85=D0=BE=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |   1 +
 .../BasicDataForms/InsuranceForm.vue          | 118 ++++++++++++++++++
 .../components/BasicInsuranceForm.vue         |  95 --------------
 .../components/MedicalBasicDataWrapper.vue    |   5 +-
 .../newMedicalCard/utils/medicalConfig.js     |  59 ++++-----
 src/store/modules/medicalCard.js              |  36 +++++-
 6 files changed, 187 insertions(+), 127 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
 delete mode 100644 src/pages/newMedicalCard/components/BasicInsuranceForm.vue

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index dcd8e2a..62a1d85 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -61,3 +61,4 @@
   --bg-disable-grey-color: #f0f0f0
   --bg-grey-color: rgba(37, 40, 80, 0.15)
   --bg-aqua-blue: #55c5e8
+
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
new file mode 100644
index 0000000..6111c58
--- /dev/null
+++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+  medical-form-wrapper(
+    title="Страховка",
+    :is-edit="isEdit",
+    :open-edit="openEdit",
+    :cancel="cancelEdit"
+  )
+    .form-wrap.gap-24.w-full
+      .data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
+        .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
+        .flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
+          .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'photo'")
+            img.avatar.object-cover(
+              v-if="basic[insurance.insuranceKey][field.key]",
+              :src="basic[insurance.insuranceKey][field.key]",
+              alt="AV"
+            )
+            .replace-photo.font-medium.text-base.cursor-pointer(
+              v-if="isEdit"
+            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+          .flex.flex-col.relative(v-else)
+            base-input(
+              v-model="basic[insurance.insuranceKey][field?.key]",
+              @update:model-value="checkChangeInput",
+              :disabled="!isEdit",
+              :standout="!isEdit",
+              :outlined="isEdit",
+              :type="field.type", 
+              :width="300",
+              text-color="black"
+            )
+            .flex.font-medium.text-smm.absolute.top-10(
+              v-if="basic?.benefit[insurance?.discount]",
+              :style="{color: 'var(--font-grey-color)'}"
+            )
+              span Процент скидки: 
+              span(
+                :style="{color: 'var(--font-dark-blue-color)'}"
+              ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
+</template>
+
+<script>
+import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { mapGetters, mapState } from "vuex";
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+
+export default {
+  name: "InsuranceForm",
+  components: { MedicalFormWrapper, BaseAvatar, BaseInput },
+  data() {
+    return {
+      insuranceConfig: baseInsuranceForm,
+      isCheckChange: false,
+      isEdit: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      url: "getUrl",
+      initDataBasic: "getBasicData",
+    }),
+    ...mapState({
+      basic: (state) => state.medical.basicData,
+    }),
+  },
+  methods: {
+    checkChangeInput() {
+      let initData = JSON.stringify(this.initDataBasic);
+      let changeData = JSON.stringify(this.basic);
+      if (initData !== changeData) {
+        this.isCheckChange = true;
+      } else {
+        this.isCheckChange = false;
+      }
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.select
+  width: 324px
+
+.avatar-field
+  min-width: 324px
+
+.avatar
+  height: 100%
+
+.replace-photo
+  color: var(--btn-blue-color)
+
+.input
+  color: purple
+
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
+
+.label-field
+  color: var(--font-grey-color)
+</style>
diff --git a/src/pages/newMedicalCard/components/BasicInsuranceForm.vue b/src/pages/newMedicalCard/components/BasicInsuranceForm.vue
deleted file mode 100644
index 001d340..0000000
--- a/src/pages/newMedicalCard/components/BasicInsuranceForm.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template lang="pug">
-  medical-form-wrapper(
-    title="Страховка"
-  )
-    .form-wrap.gap-24.w-full(@click="click")
-      .data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
-        .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
-          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
-          .avatar-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
-            base-avatar(:size="40")
-              //- img.avatar.object-cover(
-              //-   v-if="basic[insurance.insuranceKey]"
-              //-   alt="AV"
-              //- )
-              //- span(v-else) {{ avatar }}
-            .replace-photo.font-medium.text-base.cursor-pointer
-          
-          base-input(
-            v-model="basic[insurance.insuranceKey][field.key]"
-            :type="field.type" 
-            :width="300"
-            text-color="black"
-          )
-</template>
-
-<script>
-import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/configMedical";
-import BaseAvatar from "@/components/base/BaseAvatar.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
-import { mapGetters, mapState } from "vuex";
-
-export default {
-  name: "BasicDataForm",
-  components: { MedicalFormWrapper, BaseAvatar, BaseInput },
-  data() {
-    return {
-      insuranceConfig: baseInsuranceForm,
-      isCheckChange: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      url: "getUrl",
-      // avatar: "getAvatar",
-      initDataBasic: "getBasicData",
-    }),
-    ...mapState({
-      basic: (state) => state.medical.basicData,
-      // basic: (state) => state.medical.medicalCard.person,
-    }),
-  },
-  methods: {
-    click() {
-      console.log(this.basic);
-    },
-    // checkChangeInput() {
-    //   let initInsurance = JSON.stringify(this.initDataBasic);
-    //   let changeInsurance = JSON.stringify(this.basic);
-    //   if (initInsurance !== changeInsurance) {
-    //     this.isCheckChange = true;
-    //   } else {
-    //     this.isCheckChange = false;
-    //   }
-    // },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.select
-  width: 324px
-.avatar-field
-  min-width: 324px
-.avatar
-  height: 100%
-  border-radius: 50%
-.replace-photo
-  color: var(--btn-blue-color)
-.input
-  color: purple
-.form-wrap
-  display: grid
-  grid-template-columns: repeat(3, 1fr)
-  grid-template-rows: repeat(1, 1fr)
-  @media(max-width: 1900px)
-    grid-template-columns: repeat(2, 1fr)
-    grid-template-rows: repeat(2, 1fr)
-  @media(max-width: 1320px)
-    grid-template-columns: repeat(1, 1fr)
-    grid-template-rows: repeat(3, 1fr)
-.label-field
-  color: var(--font-grey-color)
-</style>
diff --git a/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue b/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue
index 7d1550f..2fddb42 100644
--- a/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue
@@ -2,14 +2,17 @@
   .flex.flex-col.gap-y-2.wrapper
     basic-data-form
     documents-form
+    insurance-form
 </template>
 
 <script>
 import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue";
 import DocumentsForm from "@/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue";
+import InsuranceForm from "@/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue";
+
 export default {
   name: "MedicalBasicDataWrapper",
-  components: { BasicDataForm, DocumentsForm },
+  components: { BasicDataForm, DocumentsForm, InsuranceForm },
 };
 </script>
 <style lang="sass" scoped>
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index 5fbe612..feea9e8 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -181,6 +181,27 @@ export const baseInfoMenu = [
 ];
 
 export const baseInsuranceForm = [
+  {
+    insuranceLabel: "ДМС",
+    insuranceKey: "insuranceDMS",
+    fields: [
+      {
+        key: "series",
+        label: "Серия",
+        type: "text",
+      },
+      {
+        key: "number",
+        label: "Номер",
+        type: "text",
+      },
+      {
+        key: "photo",
+        label: "Фото ДМС",
+        type: "photo",
+      },
+    ],
+  },
   {
     insuranceLabel: "ОМС",
     insuranceKey: "insuranceOMS",
@@ -188,12 +209,12 @@ export const baseInsuranceForm = [
       {
         key: "series",
         label: "Серия",
-        type: "number",
+        type: "text",
       },
       {
         key: "number",
         label: "Номер",
-        type: "number",
+        type: "text",
       },
       {
         key: "photo",
@@ -203,42 +224,22 @@ export const baseInsuranceForm = [
     ],
   },
   {
-    insuranceLabel: "ДМС",
-    insuranceKey: "insuranceDMS",
+    insuranceLabel: "Категория льготы",
+    insuranceKey: "benefit",
+    discount: "discount",
     fields: [
       {
-        key: "series",
-        label: "Серия",
-        type: "number",
-      },
-      {
-        key: "number",
-        label: "Номер",
-        type: "number",
+        key: "name",
+        label: "Категория",
+        type: "select",
       },
       {
         key: "photo",
-        label: "Фото ДМС",
+        label: "Документы",
         type: "photo",
       },
     ],
   },
-  // {
-  //   insuranceLabel: "Категория льготы",
-  //   insuranceKey: "benefit",
-  //   fields: [
-  //     {
-  //       key: "benefit",
-  //       label: "Категория",
-  //       type: "text",
-  //     },
-  //     {
-  //       key: "photo",
-  //       label: "Документы",
-  //       type: "photo",
-  //     },
-  //   ],
-  // },
 ];
 export const routesDictionary = {
   "/clients": "Клиенты",
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index 315fb70..116750b 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -26,6 +26,21 @@ const state = () => ({
       house_number: null,
       apartment_number: null,
     },
+    insuranceDMS: {
+      series: null,
+      number: null,
+      photo: null,
+    },
+    insuranceOMS: {
+      series: null,
+      number: null,
+      photo: null,
+    },
+    benefit: {
+      name: null,
+      discount: null,
+      photo: null,
+    },
   },
   avatar: "",
 });
@@ -74,12 +89,29 @@ const getters = {
         id: residenceAddress?.id,
       },
       insuranceDMS: {
-        series: person.insurance_policy.find((e) => e.title === "DMS")?.series,
+        series: person?.insurance_policy?.find((e) => e.title === "DMS")
+          ?.series,
         number: person.insurance_policy.find((e) => e.title === "DMS")?.number,
+        photo: person.insurance_policy.find((e) => e.title === "DMS")?.photo
+          ? rootState.getUrl +
+            person.insurance_policy.find((e) => e.title === "DMS")?.photo
+          : null,
       },
       insuranceOMS: {
-        series: person.insurance_policy.find((e) => e.title === "OMS")?.series,
+        series: person?.insurance_policy?.find((e) => e.title === "OMS")
+          ?.series,
         number: person.insurance_policy.find((e) => e.title === "OMS")?.number,
+        photo: person.insurance_policy.find((e) => e.title === "OMS")?.photo
+          ? rootState.getUrl +
+            person.insurance_policy.find((e) => e.title === "OMS")?.photo
+          : null,
+      },
+      benefit: {
+        name: person?.benefit?.name,
+        discount: person?.benefit?.discount,
+        photo: person?.photo_benefit
+          ? rootState.getUrl + person.photo_benefit
+          : null,
       },
     };
   },