<template lang="pug">
  .flex.flex-col.gap-y-6
    
    base-input(
      label="ФИО пациента",
      v-model="patientFullName",
      disabled
      outlined
    )
    //-.flex.justify-between
      base-select.w-80(
        placeholder="Тип документа",
        v-model="patient.doc_type",
        :items="patentIdentityDocumentTypes",
        label="Документ, удостоверяющий личность"            
      )
      base-input(
        v-model="patient.seriesAndNumber", 
        disabled,
        mask="#### ######"  
        label="Серия и номер" 
      )
    .flex.justify-between
      kit-short-list.w-80(
        v-model="selectedPatient.address",
        :items="patientAddresses"
        label="Адрес"  
      )
      kit-short-list(
        v-model="selectedPatient.phone",
        label="Телефон",
        :items="patientPhones"
      )
    .flex.items-center
      .text Пациент и заказчик одно лицо
      kit-toggle(v-model="patientEqualClient") 
    .test {{clientFullName}}
    kit-long-list(
      :get-items="getPerson",
      v-model="clientFullName",
      label='Заказчик')
    //-.flex.justify-between
      base-select.w-80(
        placeholder="Тип документа",
        v-model="patient.doc_type",
        :items="patentIdentityDocumentTypes",
        label="Документ, удостоверяющий личность"            
      )
      base-input(
        v-model="patient.seriesAndNumber", 
        disabled,
        mask="#### ######"  
        label="Серия и номер" 
      )
    .flex.justify-between
      kit-short-list.w-80(
        v-model="selectedPatient.address",
        :items="patientAddresses"
        label="Адрес"  
      )
      kit-short-list(
        v-model="selectedPatient.phone",
        :items="patientPhones",
        label="Телефон" 
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
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";

export default {
  name: "AgreementPerson",
  components: {
    BaseInput,
    BaseSelect,
    KitLongList,
    KitShortList,
    KitToggle,
  },
  data() {
    return {
      patientEqualClient: true,
      selectedPatient: {
        full_name: "",
        doc_type: {
          id: null,
          label: "",
        },
        seriesAndNumber: "2354 125423",
        phone: {},
        address: {},
      },
      patientAddresses: [],
      patientPhones: [],
      client: {},
      patient: {},
    };
  },
  computed: {
    patentIdentityDocumentTypes() {
      return [
        { id: "Паспорт", label: "Паспорт" },
        {
          id: "Водительское удостоверение",
          label: "Водительское удостоверение",
        },
      ];
    },
    patientFullName() {
      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) {
      let vals = [
        { id: 1, label: "Петров Антон Серггевич" },
        { id: 2, label: "Мамк Антон Серггевич" },
        { id: 3, label: "Петров Егор Анатольевич" },
        { id: 4, label: "Антионо Антон Серггевич" },
      ];
      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>
