WIP Agreement Person

src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue

@@ -20,21 +20,23 @@
         label="Серия и номер" 
       )
     .flex.justify-between
-      base-select.w-80(
+      kit-short-list.w-80(
         v-model="selectedPatient.address",
         :items="patientAddresses"
         label="Адрес"  
       )
-      base-select(
+      kit-short-list(
         v-model="selectedPatient.phone",
         label="Телефон",
         :items="patientPhones"
       )
-    input(:value='patientEqualClient') 
-
+    .flex.items-center
+      .text Пациент и заказчик одно лицо
+      kit-toggle(v-model="patientEqualClient") 
+    .test {{clientFullName}}
     kit-long-list(
       :get-items="getPerson",
-      v-model="client",
+      v-model="clientFullName",
       label='Заказчик')
     //-.flex.justify-between
       base-custom-select.w-80(
@@ -50,13 +52,14 @@
         label="Серия и номер" 
       )
     .flex.justify-between
-      base-input.w-80(
-        v-model="patient.address",
+      kit-short-list.w-80(
+        v-model="selectedPatient.address",
+        :items="patientAddresses"
         label="Адрес"  
       )
-      base-input(
-        v-model="patient.phone",
-        v-mask="'+7 (###) ###-##-##'",
+      kit-short-list(
+        v-model="selectedPatient.phone",
+        :items="patientPhones",
         label="Телефон" 
       )
 </template>
@@ -66,6 +69,9 @@ import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import KitLongList from "@/components/kit/KitLongList.vue";
+import KitShortList from "@/components/kit/KitShortList.vue";
+import KitToggle from "@/components/kit/KitToggle.vue";
+//import { fetchWrapper } from "@/shared/fetchWrapper";
 
 import { mask } from "vue-the-mask";
 export default {
@@ -75,6 +81,8 @@ export default {
     BaseCustomSelect,
     BaseSelect,
     KitLongList,
+    KitShortList,
+    KitToggle,
   },
   directives: { mask },
   data() {
@@ -87,12 +95,13 @@ export default {
           label: "",
         },
         seriesAndNumber: "2354 125423",
-        phone: undefined,
-        address: undefined,
+        phone: {},
+        address: {},
       },
       patientAddresses: [],
       patientPhones: [],
       client: {},
+      patient: {},
     };
   },
   computed: {
@@ -105,13 +114,15 @@ export default {
         },
       ];
     },
-    patient() {
-      return this.$store.state.currentPatient;
-    },
     patientFullName() {
-      console.log(this.patient);
       return `${this.patient.last_name} ${this.patient.first_name} ${this.patient.patronymic}`;
     },
+    clientFullName() {
+      return {
+        id: this.client.id,
+        label: `${this.client.last_name} ${this.client.first_name} ${this.client.patronymic}`,
+      };
+    },
   },
   methods: {
     getPerson(val) {
@@ -123,6 +134,28 @@ export default {
       ];
       return vals.filter((el) => ~el.label.indexOf(val));
     },
+    fetchAddresses(personId) {
+      console.log(personId);
+      return [
+        { id: 1, label: "Пушкина Колотушкина, д.16" },
+        { id: 2, label: "Лермонтова, д.18" },
+        {
+          id: 3,
+          label: "Россия, г.Санкт-Петербург, 60 лет Октября, д.52, кв.19",
+        },
+        { id: 4, label: "г.Москва, ул.Цыцкина, д.118/2, кв.98" },
+      ];
+    },
+    fetchPhones(personId) {
+      console.log(personId);
+      return [{ id: 1, label: "+7 953 650 89 12" }];
+    },
+  },
+  mounted() {
+    this.patient = { ...this.$store.state.currentPatient };
+    this.client = { ...this.patient };
+    this.patientAddresses = this.fetchAddresses("patient-id");
+    this.patientPhones = this.fetchPhones("phone-id");
   },
 };
 </script>