From 84cd449cdc034245271dfd9827a1991b5cbc9636 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 2 May 2023 17:48:55 +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=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D1=83=20?=
 =?UTF-8?q?=D1=81=20=D0=BF=D0=B5=D1=80=D0=B2=D0=B8=D1=87=D0=BD=D1=8B=D0=BC?=
 =?UTF-8?q?=20=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=BE=D0=BC=20=D0=B8=20?=
 =?UTF-8?q?=D1=82=D1=8D=D0=B3=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MedicalProtocolsInspection.vue | 171 +++++++++++++++---
 .../components/MedicalProtocolsList.vue       |   3 +-
 .../components/MedicalProtocolsWrapper.vue    |  14 +-
 3 files changed, 160 insertions(+), 28 deletions(-)

diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue b/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue
index d404ef1..d3fc2ff 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue
+++ b/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue
@@ -1,42 +1,127 @@
 <template lang="pug">
   .protocols-wrapper.h-full.flex.flex-col.gap-y-2
-    .protocol.flex.justify-between.p-6
-      .flex.font-bold.text-6xl Первичный осмотр 2024
-      .flex.gap-x-4
-        .icon.flex.rounded.w-10.h-10.items-center.justify-center
-          q-icon(
-            name="print",
-            size="20px",
-            style="color: var(--font-grey-color)"
-          )
-        .icon.flex.rounded.w-10.h-10.items-center.justify-center
-          q-icon(
-            name="app:basket", 
-            size="20px",
-            style="color: var(--font-grey-color)"
-          )
-    //- .protocol-body
-    .protocol.flex.justify-between.p-6
-      .flex.h-fit.w-fit.gap-2
-        base-button.text-base.font-semibold(outlined, :size="40") Отменить
-        base-button.text-base.font-semibold(:size="40") Сохранить
-      .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
-        .flex.font-semibold.text-7xl 0%
-        .flex.font-medium.text-smm.w-20 заполнение осмотра
+    .flex.font-bold.text-6xl.items-center.h-full.justify-center(
+      v-if="!inspection"
+      :style="{color: 'var(--font-grey-color)'}"
+    ) Выберите осмотр
+    .flex.flex-col.gap-y-2(v-else)
+      .protocol.flex.justify-between.p-6(v-for="elem in list")
+        .flex.font-bold.text-6xl {{elem.label}}
+        .flex.gap-x-4
+          .icon.flex.rounded.w-10.h-10.items-center.justify-center
+            q-icon(
+              name="print",
+              size="20px",
+              style="color: var(--font-grey-color)"
+            )
+          .icon.flex.rounded.w-10.h-10.items-center.justify-center
+            q-icon(
+              name="app:basket", 
+              size="20px",
+              style="color: var(--font-grey-color)"
+            )
+      .protocol-body.flex.flex-col.p-6(v-for="item in list[0].data")
+        .header.flex.justify-between.items-center
+          .flex.font-bold.text-xm {{item.name}}
+          .flex.items-center.h-5(:style="{color: 'var(--btn-blue-color)'}")
+            q-btn(flat, no-caps)
+              q-icon(left, name="app:plus", size="10px")
+              span.text-smm.font-medium Создать шаблон
+        .flex.gap-x-4(:style="{height: '300px'}")
+          .textarea.flex.flex-col.gap-y-1
+            .tag-wrap.flex.gap-x-1.gap-y-1
+              .tag.flex.items-center.px-3.cursor-pointer(v-for="tag in item.tags") {{tag.label}}
+            base-input.px-3(type="textarea", autogrow, borderless placeholder="Введите жалобу...")
+          .filter.flex
+            .flex.gap-x-2
+              base-input(
+                placeholder="Поиск",
+                outlined,
+                :width="232",
+                iconLeft
+              )
+                q-icon(
+                  name="app:icon-search",
+                  size="20px",
+                  style="color: var(--font-grey-color)"
+                )
+              .button
+                q-btn(
+                  icon="filter_alt"
+                  :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+                  padding="0"
+                )
+              .button
+                q-btn(
+                  icon="app:sort-number"
+                  :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+                  padding="0"
+                )
+      .protocol.flex.justify-between.p-6
+        .flex.h-fit.w-fit.gap-2
+          base-button.text-base.font-semibold(outlined, :size="40") Отменить
+          base-button.text-base.font-semibold(:size="40") Сохранить
+        .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
+          .flex.font-semibold.text-7xl 0%
+          .flex.font-medium.text-smm.w-20 заполнение осмотра
 </template>
 
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "MedicalProtocolsInspection",
-  components: { BaseButton },
+  components: { BaseButton, BaseInput },
+  props: { inspection: Boolean },
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          label: "Первичный осмотр 2023 года",
+          data: [
+            {
+              id: 1,
+              name: "Жалобы",
+              tags: [
+                { id: 1, label: "Боль при приеме сладкой пищи" },
+                { id: 2, label: "Жжение языка" },
+                { id: 3, label: "Кровоточивость десен" },
+                { id: 4, label: "Лечение у ортодонта не проводилось" },
+                { id: 5, label: "Ранее зубы лечили в ЛПУ" },
+                { id: 6, label: "Удаление зуба" },
+              ],
+              complaints: [
+                { id: 1, label: "Боль при приеме сладкой пищи" },
+                { id: 2, label: "Жжение языка" },
+                { id: 3, label: "Кровоточивость десен" },
+              ],
+            },
+            {
+              id: 2,
+              name: "Алергологический анамнез",
+              tags: [],
+            },
+            {
+              id: 3,
+              name: "Принимаемые лекарственные препараты",
+              tags: [],
+            },
+          ],
+        },
+      ],
+    };
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .protocols-wrapper
-  width: 89.2%
+  flex: 1
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
 
 .protocol
   background: var(--default-white)
@@ -46,4 +131,40 @@ export default {
 
 .icon
   background: var(--bg-light-grey)
+
+.protocol-body
+  min-height: 394px
+  background: var(--default-white)
+  border-radius: 4px
+  row-gap: 26px
+
+.tag-wrap
+  flex-wrap: wrap !important
+
+.button
+  display: flex
+  align-items: center
+  width: 40px
+  height: 40px
+  justify-content: center
+  cursor: pointer
+  border-radius: 4px
+  background: var(--bg-light-grey)
+
+.tag
+  height: 32px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+
+.textarea
+  width: 800px
+  padding: 4px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.filter
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  padding: 16px 16px 0
+  width: 360px
 </style>
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
index b026cfa..49f9d20 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
+++ b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
@@ -24,7 +24,7 @@
       .flex.py-4.w-full.color-grey.text-base.justify-center
         span.opacity-50 Осмотров: 5
       .flex.gap-y-2
-        .w-full.border.rounded.border-grey.p-4
+        .w-full.border.rounded.border-grey.p-4(@click="openInspection")
           .flex.justify-between.mb-7
             .flex.flex-col.gap-y-1
               span.text-xl.font-bold.color-blue.line-height 2023 г.
@@ -42,6 +42,7 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "MedicalProtocolsList",
   components: { BaseSelect },
+  props: { openInspection: Function },
   data() {
     return {
       sorting: false,
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue b/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue
index 83bf1c7..41adec4 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .wrapper.flex.gap-x-2
-    medical-protocols-list
-    medical-protocols-inspection
+    medical-protocols-list(:open-inspection="openInspection")
+    medical-protocols-inspection(:inspection="inspection")
 </template>
 
 <script>
@@ -10,6 +10,16 @@ import MedicalProtocolsInspection from "@/pages/newMedicalCard/components/Medica
 export default {
   name: "MedicalProtocolsWrapper",
   components: { MedicalProtocolsList, MedicalProtocolsInspection },
+  data() {
+    return {
+      inspection: false,
+    };
+  },
+  methods: {
+    openInspection() {
+      this.inspection = !this.inspection;
+    },
+  },
 };
 </script>