<template lang="pug">
  .base.flex.flex-col.gap-y-6
    .flex.flex-col.gap-y-6
      span.font-bold Основное
      .flex.flex-col.gap-y-6
        base-input.w-full(
          placeholder="ФИО*",
          v-model="clientDetail.fullName",
        )
        base-radio-buttons-group(
          :items="gendersList",
          radioButtonsLabel="Пол",
          v-model="clientDetail.gender",
        )
        .flex.gap-x-4
          .input
            base-input-date(
              label="Дата рождения",
              v-model="clientDetail.birth_date",
            )
          .input
            base-input(
              placeholder="000–000–000 00",
              v-mask="'###-###-### ##'",
              label="СНИЛС",
              v-model="clientDetail.insurance_number",
            )
        .flex.flex-col.gap-y-6
          base-input(
            label="Адрес регистрации",
            placeholder="Введите полный адрес"
          )
          base-input(
            label="Фактический адрес места жительства",
            placeholder="Введите полный адрес"
          )
        .flex.gap-x-4
          .input
            base-input(
              label="Номер телефона",
              placeholder="+7 (915) 644–92–23",
              v-mask="'+7 (###) ###-##-##'",
              v-model="clientDetail.phone",
            )
          .input
            base-input(
              label="Email",
              placeholder="user@yandex.ru"
              v-model="clientDetail.email",
            )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import BaseButton from "@/components/base/BaseButton";
import { mask } from "vue-the-mask";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";

export default {
  name: "MedicalBaseData",
  components: {
    BaseInput,
    BaseInputDate,
    BaseSelect,
    BaseButton,
    BaseRadioButtonsGroup,
  },
  directives: { mask },
  props: {
    clientDetail: Object,
  },
  computed: {
    gendersList() {
      return medicalDetailConfig.gendersList;
    },
  },
};
</script>

<style lang="sass" scoped>
.input
  width: 277px
</style>
