[WIP] Добавил карточку пациента на приеме

src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue

@@ -1,14 +1,130 @@
 <template lang="pug">
-  medcard-form-wrapper(title="Пациент на приеме", title-link="Медкарта")
+  medcard-form-wrapper(v-if="patient", title="Пациент на приеме", title-link="Медкарта")
+    .flex.flex-col
+      .header.flex.px-6.py-5.justify-between
+        .flex.text-base.font-medium.gap-x-3
+          img.h-14.w-14.object-cover.rounded-full(:src="patient?.avatar")
+          .flex.flex-col.justify-center.gap-y-1
+            .font-bold.text-xll {{patient.last_name + " " + patient.first_name + " " + patient.patronymic}}
+            .grey-color.text-smm {{patient?.birthday}}
+        .flex.flex-col.gap-y-1.text-smm.font-medium
+          .flex.items-center.gap-x-2
+            .priority.flex(:class="choiceClass(patient.priority)")
+            .text-smm(:class="choiceColor(patient.priority)") {{choicePriority(patient.priority)}}
+          .grey-color.text-smm Приоритет
+      .flex
+        .data.flex.w-full.h-full(v-for="item in data")
+          .flex.flex-col.px-6.py-4.gap-y-6
+            .text-m.font-bold {{item.title}}
+            .flex.flex-col.text-smm 
+              .grey-color {{item.text1}}
+              .font-medium {{item.first}}
+            .flex.flex-col.text-smm
+              .grey-color {{item.text2}}
+              .font-medium {{item.second}}
 </template>
 
 <script>
 import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
+import * as moment from "moment";
 
 export default {
   name: "CurrentPatientForm",
   components: { MedcardFormWrapper },
+  data() {
+    return {
+      patient: patientList
+        .find(({ label }) => label === "Пациенты")
+        .data.find(
+          ({ time }) =>
+            time.from <= moment().format("HH:MM") &&
+            time.to >= moment().format("HH:MM")
+        ),
+      prioritys: [
+        { name: "Без приоритета", id: 0, class: "none-priority" },
+        { name: "Высокий", id: 1, class: "high-priority" },
+        { name: "Средний", id: 2, class: "middle-priority" },
+        { name: "Низский", id: 3, class: "low-priority" },
+      ],
+      data: [
+        { title: "Запись", text1: "Дата", text2: "Время" },
+        { title: "Данные", text1: "Телефон", text2: "Email" },
+        { title: "Страхование", text1: "Компания", text2: "Полис" },
+      ],
+    };
+  },
+  methods: {
+    choiceClass(priority) {
+      return this.prioritys.find(({ id }) => id === priority).class;
+    },
+    choicePriority(priority) {
+      return this.prioritys.find(({ id }) => id === priority).name;
+    },
+    choiceColor(priority) {
+      return {
+        "grey-color": !priority,
+        "red-color": priority === 1,
+        "blue-color": priority === 2,
+        "green-color": priority === 3,
+      };
+    },
+  },
+  watch: {
+    patient: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.data[0].first = moment().format("DD MMMM");
+        this.data[0].second =
+          this.patient?.time?.from + "-" + this.patient?.time?.to;
+
+        this.data[1].first = this.patient?.phone;
+        this.data[1].second = this.patient?.email;
+
+        this.data[2].first = this.patient?.company;
+        this.data[2].second = this.patient?.policy;
+      },
+    },
+  },
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.header
+  border-bottom: 1px solid var(--gray-scondary)
+
+.priority
+  height: 8px
+  width: 8px
+  border-radius: 50%
+
+.data
+  border-right: 1px solid var(--gray-scondary)
+  &:last-child
+    border-right: none
+
+.high-priority
+  background: var(--system-color-red)
+
+.middle-priority
+  background: var(--btn-blue-color)
+
+.low-priority
+  background: var(--system-color-green)
+
+.none-priority
+  border: 1.5px solid var(--font-grey-color)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.red-color
+  color: var(--system-color-red)
+
+.blue-color
+  color: var(--btn-blue-color)
+
+.green-color
+  color: var(--system-color-green)
+</style>

src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue

@@ -16,7 +16,7 @@
           .text-m.font-bold {{patient.time.from + " - " + patient.time.to}}
           .grey-color.font-medium.text-smm(
             :class="{'red-color': !index}"
-          ) {{index ? "Время посещения" : "Скоро прием" }}
+            ) {{index ? "Время посещения" : "Скоро прием" }}
         .flex
       .gradient-name.flex.absolute(v-if="isGradient")
 </template>