<template lang="pug">
  medical-form-wrapper(title="Основные данные" :change-edit="changeEdit")
    .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} :`}}
          .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
            base-avatar(:size="40")
              img(
                v-if="basicData[data.dataKey][field.key]" 
                :src="url + basicData[data.dataKey][field.key]" 
                alt="AV"
                )
              span(v-else) {{ avatar }}
            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit") Заменить фото
          .select(v-else-if="field.type === 'select'")
            base-select(
              v-model="basicData[data.dataKey][field.key]"
              :hide-dropdown-icon="!isEdit"
              :disable="!isEdit"
              :outlined="isEdit"
              :standout="!isEdit"
              :items="genderOptions"
              bg-color="#e9e9f6"
              )
          base-input(
            v-else 
            :disabled="!isEdit" 
            v-model="basicData[data.dataKey][field.key]" 
            :type="field.type" 
            :width="300" 
            :standout="!isEdit" 
            :outlined="isEdit" 
            text-color="black"
            )
</template>

<script>
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseAvatar from "@/components/base/BaseAvatar.vue";
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import {
  baseDataForm,
  genderOptions,
} from "@/pages/newMedicalCard/utils/configMedical";
import { mapGetters } from "vuex";

export default {
  name: "BasicDataForm",
  components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseSelect },
  data() {
    return {
      isEdit: false,
      genderOptions: genderOptions,
      configData: baseDataForm,
    };
  },
  computed: mapGetters({
    basicData: "getBasicData",
    url: "getUrl",
    avatar: "getAvatar",
  }),
  methods: {
    changeEdit() {
      this.isEdit = !this.isEdit;
    },
  },
};
</script>

<style lang="sass" scoped>
.select
  width: 324px
.avatar-field
  min-width: 310px
.replace-photo
  color: var(--btn-blue-color)
.input
  color: purple
.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: repeat(2, 1fr)
  @media(max-width: 1320px)
    grid-template-columns: repeat(1, 1fr)
    grid-template-rows: repeat(3, 1fr)
.label-field
  color: var(--font-grey-color)
</style>
