<template lang="pug">
  medical-form-wrapper(
    title="Документы"
  )
    .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'")
            base-avatar(
              v-if="photo",
              :size="40",
            )
              img.object-cover(
                :src="url + photo" 
                alt="photo"
              )
            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit && photo") Заменить фото
            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit && !photo") Добавить фото
          base-input(
            v-else
            :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";
export default {
  name: "DocumentsForm",
  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
  data() {
    return {
      configData: documentForm,
      isEdit: false,
      photo: null,
    };
  },
  computed: {
    url() {
      return this.$store.state.url;
    },
  },
};
</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
</style>
