<template>
  <q-form @submit="submit">
    <div v-if="readonly">
      <div :key="`relative-${i}`" v-for="(relative, i) in relatives">
        <div class="row">
          <div class="col text-grey-5">
            Степень родства (по отношению к заявителю)
          </div>
          <div class="col text-grey-7">{{ relative.relationDegree.label }}</div>
        </div>
        <div
          :key="`relative-${i}-personalDataField-${j}`"
          class="row"
          v-for="(personalDataField, j) in relative.personalData"
        >
          <div class="col text-grey-5">
            {{ personalDataField.label }}
          </div>
          <div class="col text-grey-7">
            {{
              typeof personalDataField.value === 'boolean'
                ? `${personalDataField.value ? 'Да' : 'Нет'}`
                : personalDataField.value
            }}
          </div>
        </div>
        <div
          :key="`relative-${i}-requisitesField-${j}`"
          class="row"
          v-for="(requisitesField, j) in Object.keys(relative.requisites)"
        >
          <template v-if="requisitesField === 'registryOffice'">
            <div class="col text-grey-5">
              Орган ЗАГС, выдавший актовую запись*
            </div>
            <div class="col text-grey-7">
              {{ relative.requisites[requisitesField].label }}
            </div>
          </template>
          <template v-else>
            <div class="col text-grey-5">
              {{ relative.requisites[requisitesField].label }}
            </div>
            <div class="col text-grey-7">
              {{ relative.requisites[requisitesField].value }}
            </div>
          </template>
        </div>
        <div
          :key="`relative-${i}-registrationField-${j}`"
          class="row"
          v-for="(registrationField, j) in Object.keys(relative.registration)
            .filter((key) => key !== 'type')
            .reduce((el, key) => {
              el[key] = relative.registration[key];
              return el;
            }, {})"
        >
          <div class="col text-grey-5">
            {{ registrationField.label }}
          </div>
          <div class="col text-grey-7">
            {{
              typeof registrationField.value === 'boolean'
                ? `${registrationField.value ? 'Да' : 'Нет'}`
                : registrationField.value
            }}
          </div>
        </div>
        <div class="row">
          <div class="col text-grey-5">
            {{ relative.indicateOtherIncome.label }}
          </div>
          <div class="col text-grey-7">
            {{ relative.indicateOtherIncome.value ? 'Да' : 'Нет' }}
          </div>
        </div>
        <div v-if="relative.indicateOtherIncome.value">
          <div
            :key="`relative-${i}-income-${j}`"
            class="row"
            v-for="(income, j) in relative.incomes"
          >
            <div class="col text-grey-5">
              {{ income.type.label }}
            </div>
            <div class="col text-grey-7">{{ income.amount.value }}</div>
          </div>
        </div>
        <div class="row" v-if="i < relatives.length - 1">
          <div class="col">
            <q-separator class="q-my-md" />
          </div>
        </div>
      </div>
    </div>
    <div class="q-gutter-y-md" v-else>
      <div :key="relative.id" v-for="(relative, i) in relatives">
        <div class="row">
          <div class="col q-gutter-y-md">
            <q-card bordered flat>
              <q-card-section>
                <div>
                  <div class="row q-gutter-x-md">
                    <div class="col q-gutter-y-md">
                      <div class="row text-h6">
                        Степень родства (по отношению к заявителю)
                      </div>
                      <div class="row">
                        <div class="col">
                          <q-option-group
                            :options="relative.relationDegree.options"
                            color="primary"
                            v-model="relative.relationDegree.value"
                          />
                        </div>
                      </div>
                      <div class="row q-gutter-x-md">
                        <div class="col">
                          <q-input
                            :label="relative.personalData.lastname.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.personalData.lastname.isValid
                              ),
                            ]"
                            filled
                            v-model="relative.personalData.lastname.value"
                            @input="
                              validateField(relative.personalData, 'lastname')
                            "
                          />
                        </div>
                        <div class="col">
                          <q-input
                            :label="relative.personalData.name.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.personalData.name.isValid
                              ),
                            ]"
                            filled
                            v-model="relative.personalData.name.value"
                            @input="
                              validateField(relative.personalData, 'name')
                            "
                          />
                        </div>
                        <div class="col">
                          <q-input
                            :label="relative.personalData.middlename.label"
                            filled
                            hint="При наличии"
                            v-model="relative.personalData.middlename.value"
                          />
                        </div>
                      </div>
                      <div class="row q-gutter-x-md">
                        <div class="col">
                          <q-input
                            :label="relative.personalData.birthdate.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.personalData.birthdate.isValid
                              ),
                            ]"
                            class="q-pb-none"
                            filled
                            mask="##.##.####"
                            v-model="relative.personalData.birthdate.value"
                            @input="
                              validateField(relative.personalData, 'birthdate')
                            "
                          >
                            <template v-slot:append>
                              <q-icon name="event" class="cursor-pointer">
                                <q-popup-proxy
                                  ref="qDateProxy"
                                  transition-show="scale"
                                  transition-hide="scale"
                                >
                                  <q-date
                                    mask="DD.MM.YYYY"
                                    v-model="
                                      relative.personalData.birthdate.value
                                    "
                                    @input="
                                      validateField(
                                        relative.personalData,
                                        'birthdate'
                                      )
                                    "
                                  />
                                </q-popup-proxy>
                              </q-icon>
                            </template>
                          </q-input>
                        </div>
                        <div class="col">
                          <q-input
                            :label="relative.personalData.snils.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.personalData.snils.isValid
                              ),
                            ]"
                            filled
                            mask="###-###-### ##"
                            v-model="relative.personalData.snils.value"
                            @input="
                              validateField(relative.personalData, 'snils')
                            "
                          />
                        </div>
                      </div>
                      <q-slide-transition>
                        <div
                          class="row"
                          v-if="relative.relationDegree.value === 'child'"
                        >
                          <div class="col">
                            <q-checkbox
                              :label="relative.personalData.isGuardian.label"
                              filled
                              v-model="relative.personalData.isGuardian.value"
                            />
                          </div>
                        </div>
                      </q-slide-transition>
                      <div
                        class="row text-h6"
                        v-if="relative.relationDegree.value === 'child'"
                      >
                        Реквизиты актовой записи о рождении
                      </div>
                      <div
                        class="row text-h6"
                        v-if="relative.relationDegree.value === 'spouse'"
                      >
                        Реквизиты актовой записи о браке
                      </div>
                      <div class="row q-gutter-x-md">
                        <div class="col">
                          <q-input
                            :label="relative.requisites.birthRecord.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.requisites.birthRecord.isValid
                              ),
                            ]"
                            filled
                            v-if="relative.relationDegree.value === 'child'"
                            v-model="relative.requisites.birthRecord.value"
                            @input="
                              validateField(relative.requisites, 'birthRecord')
                            "
                          />
                          <q-input
                            :label="relative.requisites.marriageRecord.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.requisites.marriageRecord.isValid
                              ),
                            ]"
                            filled
                            v-if="relative.relationDegree.value === 'spouse'"
                            v-model="relative.requisites.marriageRecord.value"
                            @input="
                              validateField(
                                relative.requisites,
                                'marriageRecord'
                              )
                            "
                          />
                        </div>
                        <div class="col">
                          <q-input
                            :label="relative.requisites.date.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.requisites.date.isValid
                              ),
                            ]"
                            class="q-pb-none"
                            filled
                            mask="##.##.####"
                            v-model="relative.requisites.date.value"
                            @input="validateField(relative.requisites, 'date')"
                          >
                            <template v-slot:append>
                              <q-icon name="event" class="cursor-pointer">
                                <q-popup-proxy
                                  ref="qDateProxy"
                                  transition-show="scale"
                                  transition-hide="scale"
                                >
                                  <q-date
                                    mask="DD.MM.YYYY"
                                    v-model="relative.requisites.date.value"
                                    @input="
                                      validateField(relative.requisites, 'date')
                                    "
                                  />
                                </q-popup-proxy>
                              </q-icon>
                            </template>
                          </q-input>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col">
                          <q-select
                            @filter="registryOfficeFilter"
                            @blur="currentRelative = null"
                            @focus="currentRelative = relative"
                            :label="relative.requisites.registryOffice.label"
                            :options="
                              relative.requisites.registryOffice.filteredOptions
                            "
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.requisites.registryOffice.isValid
                              ),
                            ]"
                            filled
                            input-debounce="0"
                            use-input
                            v-model="relative.requisites.registryOffice.value"
                            @input="validateRegistryOffice(relative)"
                          />
                        </div>
                      </div>
                      <div class="row">
                        <div class="col">
                          <q-input
                            :label="relative.requisites.placeOfBirth.label"
                            :rules="[
                              noEmptyCustomValueRule(
                                relative.requisites.placeOfBirth.isValid
                              ),
                            ]"
                            filled
                            v-model="relative.requisites.placeOfBirth.value"
                            @input="
                              validateField(relative.requisites, 'placeOfBirth')
                            "
                          />
                        </div>
                      </div>
                      <div class="row text-h6">Указать</div>
                      <div class="row">
                        <div class="col">
                          <q-option-group
                            :options="relative.registration.type.options"
                            color="primary"
                            inline
                            v-model="relative.registration.type.value"
                          />
                        </div>
                      </div>
                      <div class="row">
                        <div class="col">
                          <q-checkbox
                            :label="relative.registration.isMatches.label"
                            filled
                            v-model="relative.registration.isMatches.value"
                          />
                        </div>
                      </div>
                      <q-slide-transition>
                        <div
                          class="row"
                          v-if="!relative.registration.isMatches.value"
                        >
                          <div class="col">
                            <BasicMAddressComponent
                              :label="
                                relative.registration.address.permanent.label
                              "
                              :rules="[
                                noEmptyCustomValueRule(
                                  relative.registration.address.permanent
                                    .isValid
                                ),
                              ]"
                              filled
                              :id.sync="
                                relative.registration.address.permanent.id
                              "
                              v-if="
                                relative.registration.type.value === 'permanent'
                              "
                              :value.sync="
                                relative.registration.address.permanent.value
                              "
                              @input="validateAddress(relative)"
                            />
                            <BasicMAddressComponent
                              :label="
                                relative.registration.address.temporary.label
                              "
                              :rules="[
                                noEmptyCustomValueRule(
                                  relative.registration.address.temporary
                                    .isValid
                                ),
                              ]"
                              filled
                              :id.sync="
                                relative.registration.address.temporary.id
                              "
                              v-if="
                                relative.registration.type.value === 'temporary'
                              "
                              :value.sync="
                                relative.registration.address.temporary.value
                              "
                              @input="validateTempAddress(relative)"
                            />
                          </div>
                        </div>
                      </q-slide-transition>
                      <div class="row" v-if="description">
                        <div class="col">
                          <div>
                            <q-banner class="bg-grey-1">
                              <template v-slot:avatar>
                                <q-icon color="primary" name="info" />
                              </template>
                              <div v-html="description" />
                            </q-banner>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col">
                          <q-checkbox
                            :label="relative.indicateOtherIncome.label"
                            v-model="relative.indicateOtherIncome.value"
                          />
                        </div>
                      </div>
                      <q-slide-transition>
                        <div
                          class="q-gutter-y-md"
                          v-if="relative.indicateOtherIncome.value"
                        >
                          <div
                            :key="income.id"
                            class="row"
                            v-for="(income, i) in relative.incomes"
                          >
                            <div class="col">
                              <div class="q-gutter-y-md">
                                <div class="row q-gutter-x-md">
                                  <div class="col q-gutter-y-md">
                                    <div class="row">
                                      <div class="col">
                                        <q-select
                                          :label="income.type.label"
                                          :options="income.type.options"
                                          :rules="[
                                            noEmptyCustomValueRule(
                                              income.type.isValid
                                            ),
                                          ]"
                                          filled
                                          v-model="income.type.value"
                                          @input="validateIncomeType(income)"
                                        />
                                      </div>
                                    </div>
                                    <div class="row">
                                      <div class="col">
                                        <q-input
                                          :label="income.amount.label"
                                          :rules="[
                                            noEmptyCustomValueWithCustomMessageRule(
                                              income.amount.isValid,
                                              'Значение должно быть больше нуля'
                                            ),
                                          ]"
                                          filled
                                          type="number"
                                          v-model="income.amount.value"
                                          @input="validateIncomeAmount(income)"
                                        />
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-auto">
                                    <q-btn
                                      @click="removeIncome(relative, income.id)"
                                      :disable="relative.incomes.length <= 1"
                                      color="negative"
                                      icon="delete"
                                      outline
                                    />
                                  </div>
                                </div>
                                <div
                                  class="row"
                                  v-if="i < relative.incomes.length - 1"
                                >
                                  <div class="col">
                                    <q-separator />
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col">
                              <q-btn
                                @click="addIncome(relative)"
                                color="primary"
                                outline
                                icon="add"
                                label="Добавить данные о доходах"
                                type="button"
                              />
                            </div>
                          </div>
                        </div>
                      </q-slide-transition>
                    </div>
                    <div class="col-auto" v-if="relative.id !== 'root'">
                      <q-btn
                        @click="removeRelative(relative.id)"
                        :disable="relatives.length <= 1"
                        color="negative"
                        icon="delete"
                        outline
                      />
                    </div>
                  </div>
                </div>
              </q-card-section>
            </q-card>
            <div class="row" v-if="i < relatives.length - 1">
              <div class="col">
                <q-separator />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <q-btn
            @click="addRelative()"
            color="primary"
            outline
            icon="add"
            label="Добавить"
            type="button"
          />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <q-btn color="primary" label="Отправить" type="submit" />
        </div>
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import BasicMAddressComponent from '@components/m-address/index.vue';
import { v4 } from 'uuid';
import {
  noEmptyCustomValueRule,
  noEmptyCustomValueWithCustomMessageRule,
} from '@utils/field-validation/basic';

export default {
  props: ['input-data', 'readonly'],
  components: {
    BasicMAddressComponent,
  },
  data() {
    return {
      currentRelative: null,
      description: '',
      relatives: [],
    };
  },
  computed: {
    outputData() {
      return {
        relatives: this.relatives.map((relative) => {
          const relationDegreeValue = relative.relationDegree.value;
          let relationDegree = relative.relationDegree.options.find(
            (el) => el.value === relationDegreeValue
          );

          if (relationDegree) {
            relationDegree = {
              label: relationDegree.label,
              value: relationDegreeValue,
            };
          }

          const personalData = {
            lastname: relative.personalData.lastname,
            name: relative.personalData.name,
            middlename: relative.personalData.middlename,
            birthdate: relative.personalData.birthdate,
            snils: relative.personalData.snils,
          };

          const requisites = {
            date: relative.requisites.date,
            registryOffice: relative.requisites.registryOffice.value,
            placeOfBirth: relative.requisites.placeOfBirth,
          };

          if (relationDegreeValue === 'child') {
            personalData.isGuardian = relative.personalData.isGuardian;

            requisites.birthRecord = relative.requisites.birthRecord;
          }

          if (relationDegreeValue === 'spouse') {
            requisites.marriageRecord = relative.requisites.marriageRecord;
          }

          const registrationValue = relative.registration.type.value;
          let registrationType = relative.registration.type.options.find(
            (el) => el.value === registrationValue
          );

          if (registrationType) {
            registrationType = {
              label: registrationType.label,
              value: registrationValue,
            };
          }

          const registration = {
            type: registrationType,
            isMatches: relative.registration.isMatches,
          };

          if (!registration.isMatches.value) {
            if (registrationValue === 'permanent') {
              registration.address = relative.registration.address.permanent;
            }

            if (registrationValue === 'temporary') {
              registration.address = relative.registration.address.temporary;
            }
          }

          const incomes = relative.indicateOtherIncome.value
            ? relative.incomes.map((income) => {
                return {
                  amount: income.amount,
                  type: income.type.value,
                };
              })
            : [];

          return {
            relationDegree,
            personalData,
            requisites,
            registration,
            incomes,
            indicateOtherIncome: relative.indicateOtherIncome,
          };
        }),
      };
    },
    relationDegreeSpouseChecked() {
      return this.relatives.find(
        (relative) => relative.relationDegree.value === 'spouse'
      );
    },
  },
  created() {
    this.addRelative(true);
  },
  methods: {
    validateField(relative, fieldName) {
      relative[fieldName].isValid = relative[fieldName].value !== '';
    },
    validateIncomeType(income) {
      income.type.isValid = income.type.value !== '';
    },
    validateRegistryOffice(relative) {
      relative.requisites.registryOffice.isValid =
        relative.requisites.registryOffice.value !== '';
    },
    validateIncomeAmount(income) {
      income.amount.isValid = parseFloat(income.amount.value) > 0;
    },
    validateAddress(relative) {
      relative.registration.address.permanent.isValid =
        relative.registration.address.permanent.value !== '';
    },
    validateTempAddress(relative) {
      relative.registration.address.temporary.isValid =
        relative.registration.address.temporary.value !== '';
    },
    addRelative(isRoot = false) {
      const relative = {
        id: isRoot ? 'root' : v4(),
        relationDegree: {
          options: [
            {
              label: 'Несовершеннолетний ребенок',
              value: 'child',
            },
            {
              disable: isRoot,
              label: 'Супруг(а)',
              value: 'spouse',
            },
          ],
          value: 'child',
        },
        personalData: {
          lastname: {
            label: 'Фамилия*',
            value: '',
            isValid: false,
          },
          name: {
            label: 'Имя*',
            value: '',
            isValid: false,
          },
          middlename: {
            label: 'Отчество',
            value: '',
          },
          birthdate: {
            label: 'Дата рождения*',
            value: '',
            isValid: false,
          },
          snils: {
            label: 'СНИЛС*',
            value: '',
            isValid: false,
          },
          isGuardian: {
            label: 'Являюсь опекуном (попечителем) этого ребенка',
            value: false,
          },
        },
        requisites: {
          birthRecord: {
            label: 'Номер актовой записи о рождении*',
            value: '',
            isValid: false,
          },
          date: {
            label: 'Дата*',
            value: '',
            isValid: false,
          },
          marriageRecord: {
            label: 'Номер актовой записи о браке*',
            value: '',
            isValid: false,
          },
          registryOffice: {
            filteredOptions: [],
            label: 'Орган ЗАГС, выдавший актовую запись*',
            options: [
              {
                label: 'Федеральное Управление ЗАГС',
                value: 'R0000000',
              },
              {
                label:
                  'Управление записи актов гражданского состояния Республики Адыгея',
                value: 'R0100000',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния г. Майкопа Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100001',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния г.Адыгейска Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100002',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния Гиагинского района Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100003',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния Кошехабльского района Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100004',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния Красногвардейского района Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100005',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния Майкопского района Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100006',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния Майкопского района п. Каменномостский Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100007',
              },
              {
                label:
                  'Отдел записи актов гражданского состояния Тахтамукайского района Управления записи актов гражданского состояния Республики Адыгея',
                value: 'R0100008',
              },
            ],
            value: {
              label: 'Федеральное Управление ЗАГС',
              value: 'R0000000',
            },
            isValid: true,
          },
          placeOfBirth: {
            label: 'Место рождения*',
            value: '',
            isValid: false,
          },
        },
        registration: {
          type: {
            options: [
              {
                label: 'адрес регистрации (по паспорту)',
                value: 'permanent',
              },
              {
                label: 'адрес временной регистрации',
                value: 'temporary',
              },
            ],
            value: 'permanent',
          },
          isMatches: {
            label:
              'Адрес регистрации члена семьи совпадает с адресом регистрации заявителя',
            value: false,
          },
          address: {
            permanent: {
              label: 'Адрес регистрации (по паспорту)*',
              value: '',
              id: '',
              isValid: false,
            },
            temporary: {
              label: 'Адрес временной регистрации*',
              value: '',
              id: '',
              isValid: false,
            },
          },
        },
        indicateOtherIncome: {
          label: 'Указать сведения об иных доходах',
          value: false,
        },
        incomes: [],
      };

      this.addIncome(relative);

      this.relatives.push(relative);
    },
    removeRelative(id) {
      this.relatives = this.relatives.filter((relative) => relative.id !== id);
    },
    registryOfficeFilter(val, update) {
      if (this.currentRelative) {
        if (val === '') {
          update(() => {
            this.currentRelative.requisites.registryOffice.filteredOptions = this.currentRelative.requisites.registryOffice.options;
          });

          return;
        }

        update(() => {
          const needle = val.toLowerCase();

          this.currentRelative.requisites.registryOffice.filteredOptions = this.currentRelative.requisites.registryOffice.options.filter(
            (el) => el.label.toLowerCase().indexOf(needle) > -1
          );
        });
      }
    },
    addIncome(relative) {
      const income = {
        id: v4(),
        type: {
          label: 'Вид дохода*',
          options: [
            {
              label: 'Алименты',
              value: 'alimony',
            },
            {
              label:
                'Пособие по временной нетрудоспособности, пособие по беременности и родам, а также единовременное пособие женщинам, вставшим на учет в медицинских учреждениях в ранние сроки беременности',
              value: 'disabilityAllowance',
            },
            {
              label:
                'Ежемесячное пособие на период отпуска по уходу за ребенком до достижения им возраста 1,5 лет',
              value: 'maternityLeavenBeforeOneHalf',
            },
            {
              label:
                'Ежемесячные компенсационные выплаты гражданам, состоящим в трудовых отношениях на условиях трудового договора и находящимся в отпуске по уходу за ребенком до достижения им 3-летнего возраста',
              value: 'maternityLeavenBeforeThree',
            },
            {
              label:
                'Ежемесячная компенсационная выплата неработающим женам лиц рядового и начальствующего состава органов внутренних дел Российской Федерации и учреждений уголовно-исполнительной системы в отдаленных гарнизонах и местностях, где отсутствует возможность их трудоустройства',
              value: 'nonWorkingWivesPayment',
            },
            {
              label:
                'Ежемесячное пожизненное содержание судей, вышедших в отставку',
              value: 'judgesMaintenance',
            },
            {
              label:
                'Материальная помощь, оказываемая работодателями своим работникам, в том числе бывшим, уволившимся в связи с выходом на пенсию по инвалидности или по возрасту',
              value: 'retirementAssistance',
            },
            {
              label:
                'Доходы волонтеров, доноров, гранты, суммы благотворительной помощи, стипендии',
              value: 'volunteersDonorsIncomes',
            },
            {
              label: 'Материальная помощь, подарки не превышающие 4000 рублей',
              value: 'giftsLessFourThousand',
            },
            {
              label:
                'Призы в денежной и (или) натуральной формах, полученные спортсменами',
              value: 'athletesPrizes',
            },
          ],
          isValid: true,
          value: {
            label: 'Алименты',
            value: 'alimony',
          },
        },
        amount: {
          label: 'Размер дохода*',
          value: 0,
          isValid: false,
        },
      };

      relative.incomes.push(income);
    },
    removeIncome(relative, id) {
      relative.incomes = relative.incomes.filter((income) => income.id !== id);
    },
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    noEmptyCustomValueRule,
    noEmptyCustomValueWithCustomMessageRule,
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          if (val.description) {
            this.description = val.description;
          }

          if (val.relatives) {
            this.relatives = val.relatives;
          }
        }
      },
      immediate: true,
    },
    relationDegreeSpouseChecked: {
      handler: function (val) {
        let relatives = this.relatives;

        if (val) {
          relatives = relatives.filter((el) => el.id !== val.id);
        }

        relatives.forEach((el) => {
          const option = el.relationDegree.options.find(
            (el) => el.value === 'spouse'
          );

          option.disable = el.id === 'root' || !!val;
        });
      },
      immediate: true,
    },
  },
};
</script>
