<template lang="pug">
  .wrapper.flex.w-full.relative.mx-2
    .wrapper-medical.relative.flex.gap-y-4.flex-col.h-full.w-full( class="pb-52px")
      .card-upper.flex.flex-col.gap-y-4.px-6.py-6
        medical-card-header(:number-card="numberCard")
        .card-basic-info.flex
          base-detail-info(
            :title="configData.identity_document.title"
            :height="configData.identity_document.height"
            :data="medicalDataInit.identity_document"
            )
            base-detail-input(
              v-for="field in configData.identity_document.fields"
              :field="field"
              :data="medicalDataInit.identity_document"
              )
          .flex.flex-col.gap-30px
            base-detail-info(
              :title="configData.registration_address.title"
              :height="configData.registration_address.height"
              :data="medicalDataInit.registration_address"
              )
              base-detail-input(
                v-for="field in configData.registration_address.fields"
                :field="field"
                :data="medicalDataInit.registration_address"
                )
            base-detail-info(
              :title="configData.temporary_address.title"
              :height="configData.temporary_address.height"
              :data="medicalDataInit.temporary_address"
              )
              base-detail-input(
                v-for="field in configData.temporary_address.fields"
                :field="field"
                :data="medicalDataInit.temporary_address"
                )
          .flex.flex-col.gap-2
            base-detail-info(
              :title="configData.snils.title"
              :height="configData.snils.height"
              :data="medicalDataInit.snils"
              )
              base-detail-input(
                v-for="field in configData.snils.fields"
                :field="field"
                :data="medicalDataInit.snils"
                )
            base-detail-info(
              :title="configData.policy.title"
              :height="configData.policy.height"
              :data="medicalDataInit.policy"
              )
              base-detail-input(
                v-for="field in configData.policy.fields"
                :field="field"
                :data="medicalDataInit.policy"
                )
          base-detail-info(
            :title="configData.policy_organization.title"
            :height="configData.policy_organization.height"
            :data="medicalDataInit.policy_organization"
            )
            base-detail-input(
              v-for="field in configData.policy_organization.fields"
              :field="field"
              :data="medicalDataInit.policy_organization"
              )
          .flex.flex-col.gap-4
            base-detail-info(
              :title="configData.additional.title"
              :height="configData.additional.height"
              :data="medicalDataInit.additional"
              )
              base-detail-input(
                v-for="field in configData.additional.fields"
                :field="field"
                :data="medicalDataInit.additional"
                )
            base-detail-info(
              :title="configData.agreement_form.title"
              :height="configData.agreement_form.height"
              direction-row
              )
              base-detail-input(
                v-for="field in configData.agreement_form.fields"
                :field="field"
                :data="medicalDataInit.agreement_form"
              )
      .flex.flex-col(class="px-92px gap-y-60px")
        .flex.flex-col(class="gap-y-2.5")
          .flex.flex-col.gap-y-2(v-for="(key, index) in Object.keys(dentalIndications)")
            span.font-bold.text-xsx {{`${index+1}. ${configData.dental_indications[key]}`}}
            medical-dental-formula(v-if="key === 'dental_formula'" :formula-data="dentalIndications[key]")
            base-input(v-model="dentalIndications[key]", outlined, v-else)
        .flex.justify-center
          q-btn(
            color="primary",
            label="Сохранить",
            padding="8px 24px",
            @click="validateFormMedical"
            no-caps
          )
</template>

<script>
import MedicalCardHeader from "@/pages/medicalCard/components/MedicalCardHeader.vue";
import MedicalDentalFormula from "@/pages/medicalCard/components/MedicalDentalFormula.vue";
import BaseDetailInput from "@/components/base/BaseDetailInput.vue";
import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
import { formulaDataMap } from "@/pages/medicalCard/utils/medicalConfig";
import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput.vue";
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
export default {
  name: "MedicalCardWrapper",
  components: {
    ClientDetailInput,
    BaseInput,
    BaseDetailInfo,
    BaseDetailInput,
    MedicalCardHeader,
    MedicalDentalFormula,
  },
  data() {
    return {
      numberCard: "",
      configData: medicalDetailConfig,
      medicalDataInit: {
        identity_document: {
          number_series: null,
          issued_by_org: null,
          issued_by_org_code: null,
          issued_by_date: null,
        },
        registration_address: {
          registration_address: null,
        },
        temporary_address: {
          temporary_address: null,
        },
        snils: {
          insurance_number: null,
        },
        policy: {
          series: null,
          number: null,
        },
        policy_organization: {
          policy_organization: null,
        },
        additional: {
          name_confidant: null,
          phone_confidant: null,
        },
        benefit_code: {
          benefit_code: null,
        },
        agreement_form: {
          agreement: null,
          agreement_date: null,
        },
      },
      dentalIndications: {
        complaints: "",
        allergic_history: "",
        past_diseases: "",
        medications_taken: "",
        thermometry: "",
        tonometry: "",
        disease_progress: "",
        visual_examination: "",
        oral_examination: "",
        dental_formula: formulaDataMap,
        dental_bite: "",
        hygiene_index: "",
        dmf_index: "",
        diagnostic_findings: "",
        icd_code: "",
        survey_plan: "",
        survey_data: "",
        clinical_diagnosis: "",
        treatment_plan: "",
        treatment_protocol: "",
      },
    };
  },
  methods: {
    validateFormMedical() {
      console.log(this.medicalDataInit);
    },
    saveDataMedical(data) {
      this.numberCard = data?.number && data.number;
      const confidant = data ? data["confidant"] : undefined;
      const pass = data
        ? data?.person?.identity_document?.find((el) => el.kind === "PASSPORT")
        : null;
      this.medicalDataInit = {
        ...data,
        identity_document: {
          ...pass,
          number_series: `${pass.series} ${pass.number}`,
          issued_by_date: new Date(pass.issued_by_date),
        },
        registration_address: {
          registration_address: data?.person?.address?.find(
            (el) => !el["registration_flg"]
          )?.join_adress,
        },
        temporary_address: {
          temporary_address: data?.person?.address?.find(
            (el) => !el["temporary_registration_flg"]
          )?.join_adress,
        },
        snils: {
          ...data?.person["insurance_number"],
        },
        policy: {
          ...data?.person["insurance_policy"][0],
        },
        policy_organization: {
          ...data?.person["insurance_policy"][0],
        },
        additional: {
          name_confidant: confidant
            ? `${confidant?.last_name} ${confidant?.last_name} ${confidant?.patronymic}`
            : null,
          phone_confidant: confidant?.contacts?.find(
            (el) => el?.kind === "PHONE"
          )?.username,
        },
        benefit_code: {
          benefit_code: data?.benefit_code,
        },
        agreement_form: {
          agreement: data?.agreement,
          agreement_date: null,
        },
      };
    },
    async fetchDataMedicalCard() {
      await fetchWrapper
        .get(
          `medical_card/medical_history/${localStorage.getItem(
            "medicalId"
          )}/detail/`
        )
        .then((res) => this.saveDataMedical(res));
    },
  },
  mounted() {
    this.fetchDataMedicalCard();
  },
};
</script>

<style lang="sass" scoped>
.wrapper
  overflow: auto
  border-top-left-radius: 4px
  border-top-right-radius: 4px
.wrapper-medical
  background-color: var(--default-white)
  height: calc(100vh - 64px)
  overflow: auto
  &::-webkit-scrollbar
    height: 4px
    width: 4px
  &::-webkit-scrollbar-track
    background-color: rgba(211, 212, 220, 0.5)
    border-radius: 8px
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)
.card-basic-info
  display: grid
  grid-template-columns: 280px 292px 180px 360px 463px
  gap: 16px
  padding: 0 20px 20px 0
  overflow-x: auto
  &::-webkit-scrollbar
    height: 4px
    width: 4px
  &::-webkit-scrollbar-track
    background-color: rgba(211, 212, 220, 0.5)
    border-radius: 8px
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)
.card-upper
  border-bottom: 1px solid var(--border-light-grey-color)
</style>
