<template>
  <q-form @submit="submit">
    <div v-if="readonly">
      <div class="row">
        <div class="col text-grey-5">
          {{ indicateOtherIncome.label }}
        </div>
        <div class="col text-grey-7">
          {{ indicateOtherIncome.value ? 'Да' : 'Нет' }}
        </div>
      </div>
      <div v-if="indicateOtherIncome.value">
        <div v-for="(income, i) in incomes" :key="`income-${i}`" class="row">
          <div class="col text-grey-5">
            {{ income.type.label }}
          </div>
          <div class="col text-grey-7">{{ income.amount.value }}</div>
        </div>
      </div>
    </div>
    <div v-else class="q-gutter-y-md">
      <div v-if="description" class="row">
        <div class="col">
          <div>
            <q-banner class="bg-grey-1">
              <template #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
            v-model="indicateOtherIncome.value"
            :label="indicateOtherIncome.label"
          />
        </div>
      </div>
      <q-slide-transition>
        <div v-if="indicateOtherIncome.value" class="q-gutter-y-md">
          <div v-for="(income, i) in incomes" :key="income.id" class="row">
            <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
                          v-model="income.type.value"
                          :label="income.type.label"
                          :options="income.type.options"
                          :rules="[noEmptyCustomValueRule(income.type.isValid)]"
                          filled
                          @input="validateIncomeType(income)"
                        />
                      </div>
                    </div>
                    <div class="row">
                      <div class="col">
                        <q-input
                          v-model="income.amount.value"
                          :label="income.amount.label"
                          :rules="[
                            noEmptyCustomValueWithCustomMessageRule(
                              income.amount.isValid,
                              'Значение должно быть больше нуля'
                            ),
                          ]"
                          filled
                          type="number"
                          @input="validateIncomeAmount(income)"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="col-auto">
                    <q-btn
                      :disable="incomes.length <= 1"
                      color="negative"
                      icon="delete"
                      outline
                      @click="removeIncome(income.id)"
                    />
                  </div>
                </div>
                <div v-if="i < incomes.length - 1" class="row">
                  <div class="col">
                    <q-separator />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-btn
                color="primary"
                outline
                icon="add"
                label="Добавить"
                type="button"
                @click="addIncome"
              />
            </div>
          </div>
        </div>
      </q-slide-transition>
      <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 { v4 } from 'uuid';
import {
  noEmptyCustomValueRule,
  noEmptyCustomValueWithCustomMessageRule,
} from '@utils/field-validation/basic';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      description: '',
      indicateOtherIncome: {
        label: 'Указать сведения об иных доходах',
        value: false,
      },
      incomes: [],
    };
  },
  computed: {
    outputData() {
      return {
        incomes: this.indicateOtherIncome.value
          ? this.incomes.map((income) => {
              return {
                amount: income.amount,
                type: income.type.value,
              };
            })
          : [],
        indicateOtherIncome: this.indicateOtherIncome,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          if (val.description) {
            this.description = val.description;
          }

          if ('indicateOtherIncome' in val) {
            this.indicateOtherIncome = val.indicateOtherIncome;
          }

          if (val.incomes) {
            this.incomes = val.incomes;
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.addIncome();
  },
  methods: {
    validateIncomeType(income) {
      income.type.isValid = income.type.value !== '';
    },
    validateIncomeAmount(income) {
      income.amount.isValid = parseFloat(income.amount.value) > 0;
    },
    addIncome() {
      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,
        },
      };

      this.incomes.push(income);
    },
    removeIncome(id) {
      this.incomes = this.incomes.filter((income) => income.id !== id);
    },
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    noEmptyCustomValueRule,
    noEmptyCustomValueWithCustomMessageRule,
  },
};
</script>
