<template lang="pug">
  medical-form-wrapper(
    title="Документы",
    :is-check-change="isCheckChange",
    :is-edit="isEdit",
    :cancel="cancelEdit",
    :open-edit="openEdit",
  )
    .form-wrap.gap-24.w-full
      .data-section.flex.flex-col.gap-4(v-for="data in configData")
        .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
        .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
          .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
            img.photo.object-cover(
              v-if="docData[data.dataKey][field.key]",
              :src="docData[data.dataKey][field.key]",
              :alt="docData[data.dataKey][field.label]",
            )
            .replace-photo.font-medium.text-base.cursor-pointer(
              v-if="isEdit"
            ) {{ docData[data.dataKey][field.key] ? "Заменить фото" : "Добавить фото"}}
          base-input(
            v-else,
            v-model="docData[data.dataKey][field.key]",
            @update:model-value="checkChangeDocData"
            :disabled="!isEdit",
            :width="278",
            :standout="!isEdit",
            :outlined="isEdit", 
            :rule="field.rules",
            text-color="black",
          )
</template>

<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import { documentForm } from "@/pages/newMedicalCard/utils/medicalConfig";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseAvatar from "@/components/base/BaseAvatar.vue";
import BaseLoader from "@/components/Loader/BaseLoader.vue";
export default {
  name: "DocumentsForm",
  components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseLoader },
  data() {
    return {
      configData: documentForm,
      isEdit: false,
      docData: null,
      isCheckChange: false,
      isLoadingData: true,
      initializationData: {
        passport: {
          id: null,
          series: null,
          number: null,
          issued_by_org: null,
          issued_by_org_code: null,
          issued_by_date: null,
          photo: null,
        },
        insurance_number: {
          insurance_number: null,
          photo_insurance_number: null,
        },
        tax_identification_number: {
          tax_identification_number: null,
          photo_tax_identification_number: null,
        },
      },
    };
  },
  computed: {
    initialDocData() {
      return this.$store.state.medical?.documents;
    },
  },
  methods: {
    cancelEdit() {
      this.docData = JSON.parse(JSON.stringify(this.initialDocData));
      this.isEdit = false;
    },
    openEdit() {
      this.isEdit = true;
    },
    checkChangeDocData() {
      this.isCheckChange =
        JSON.stringify(this.docData) !== JSON.stringify(this.initialDocData);
    },
  },
  watch: {
    initialDocData: {
      deep: true,
      immediate: true,
      handler(value) {
        if (Object.keys(value).length)
          this.docData = JSON.parse(JSON.stringify(this.initialDocData));
        else this.docData = this.initializationData;
      },
    },
  },
};
</script>
<style lang="sass" scoped>
.form-wrap
  display: grid
  grid-template-columns: repeat(3, 1fr)
  grid-template-rows: repeat(1, 1fr)
  @media(max-width: 1900px)
    grid-template-columns: repeat(2, 1fr)
    grid-template-rows: 2.5fr 0.5fr
  @media(max-width: 1320px)
    grid-template-columns: repeat(1, 1fr)
    grid-template-rows: 2.5fr 0.5fr 0.5fr
.label-field
  color: var(--font-grey-color)
.replace-photo
  color: var(--btn-blue-color)
.photo-field
  min-width: 302px
.photo
  height: 100%
</style>
