<template>
  <q-form @submit="submit">
    <div v-if="readonly">
      <div class="row">
        <div class="col text-grey-5">Денежную выплату прошу выплачивать</div>
        <div class="col text-grey-7">{{ payment.label }}</div>
      </div>
      <template v-if="payment.value === 'credit'">
        <div
          v-for="(creditField, i) in Object.keys(credit)"
          :key="`creditField-${i}`"
          class="row"
        >
          <template v-if="creditField === 'organization'">
            <div class="col text-grey-5">
              Наименование кредитной организации*
            </div>
            <div class="col text-grey-7">{{ credit[creditField].label }}</div>
          </template>
          <template v-else>
            <div class="col text-grey-5">
              {{ credit[creditField].label }}
            </div>
            <div class="col text-grey-7">{{ credit[creditField].value }}</div>
          </template>
        </div>
      </template>
      <template v-if="payment.value === 'postal'">
        <div
          v-for="(postalField, i) in postal"
          :key="`postalField-${i}`"
          class="row"
        >
          <div class="col text-grey-5">
            {{ postalField.label }}
          </div>
          <div class="col text-grey-7">
            {{
              typeof postalField.value === 'boolean'
                ? `${postalField.value ? 'Да' : 'Нет'}`
                : postalField.value
            }}
          </div>
        </div>
      </template>
    </div>
    <div v-else class="q-gutter-y-md">
      <div class="row text-h6">Денежную выплату прошу выплачивать</div>
      <div class="row">
        <div class="col">
          <q-option-group
            v-model="payment.value"
            :options="payment.options"
            color="primary"
          />
        </div>
      </div>
      <div v-if="payment.value === 'credit'" class="q-gutter-y-md">
        <div class="row q-gutter-x-md">
          <div class="col">
            <q-select
              v-model="credit.organization.value"
              :label="credit.organization.label"
              :options="credit.organization.options"
              :rules="[noEmptyValueRule]"
              filled
            />
          </div>
          <div class="col">
            <q-input
              :label="credit.bic.label"
              :rules="[noEmptyValueRule]"
              :value="credit.organization.value.bic"
              filled
              readonly
            />
          </div>
        </div>
        <div class="row">
          <div class="col">
            <q-input
              :label="credit.corr.label"
              :rules="[noEmptyValueRule]"
              :value="credit.organization.value.corr"
              filled
              readonly
            />
          </div>
        </div>
        <div class="row">
          <div class="col q-gutter-y-md">
            <div class="row text-h6">Данные получателя средств</div>
            <q-input
              v-model="credit.checking.value"
              :label="credit.checking.label"
              :rules="[noEmptyValueRule]"
              filled
              mask="####################"
            />
          </div>
        </div>
      </div>
      <div v-if="payment.value === 'postal'" class="q-gutter-y-md">
        <div class="row">
          <div class="col">
            <q-checkbox
              v-model="postal.isMatches.value"
              :label="postal.isMatches.label"
            />
          </div>
        </div>
        <q-slide-transition>
          <div v-if="!postal.isMatches.value" class="q-gutter-y-md">
            <div class="row">
              <div class="col">
                <q-input
                  v-model="postal.address.value"
                  :label="postal.address.label"
                  :rules="[noEmptyValueRule]"
                  filled
                />
              </div>
            </div>
            <div class="row">
              <div class="col">
                <q-input
                  v-model="postal.branch.value"
                  :label="postal.branch.label"
                  :rules="[noEmptyValueRule]"
                  filled
                  mask="######"
                />
              </div>
            </div>
          </div>
        </q-slide-transition>
      </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 { noEmptyValueRule } from '@utils/field-validation/basic';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      payment: {
        options: [
          {
            label: 'Через кредитную организацию',
            value: 'credit',
          },
          {
            label: 'Через почтовое отделение',
            value: 'postal',
          },
        ],
        value: 'credit',
      },
      credit: {
        organization: {
          label: 'Наименование кредитной организации*',
          options: [
            {
              bic: '044525593',
              corr: '30101810200000000593',
              label: 'АО "АЛЬФА-БАНК"',
              value: 'bank1',
            },
            {
              bic: '044525187',
              corr: '30101810700000000187',
              label: 'БАНК ВТБ (ПАО)',
              value: 'bank2',
            },
            {
              bic: '044525985',
              corr: '30101810300000000985',
              label: 'ПАО БАНК "ФК ОТКРЫТИЕ"',
              value: 'bank3',
            },
            {
              bic: '044525976',
              corr: '30101810500000000976',
              label: 'АКБ "АБСОЛЮТ БАНК" (ПАО)',
              value: 'bank4',
            },
            {
              bic: '044525974',
              corr: '30101810145250000974',
              label: 'АО "ТИНЬКОФФ БАНК"',
              value: 'bank5',
            },
            {
              bic: '044525225',
              corr: '30101810400000000225',
              label: 'ПАО СБЕРБАНК',
              value: 'bank6',
            },
            {
              bic: '044525214',
              corr: '30101810245250000214',
              label: 'АО "Почта Банк"',
              value: 'bank7',
            },
            {
              bic: '044525214',
              corr: '30101810245250000214',
              label: 'АО "Почта Банк"',
              value: 'bank8',
            },
          ],
          value: {
            bic: '044525593',
            corr: '30101810200000000593',
            label: 'АО "АЛЬФА-БАНК"',
            value: 'bank1',
          },
        },
        bic: {
          label: 'БИК*',
          value: '',
        },
        corr: {
          label: 'Корреспондентский счет*',
          value: '',
        },
        checking: {
          label: 'Номер расчетного счета заявителя*',
          value: '',
        },
      },
      postal: {
        isMatches: {
          label: 'Адрес получателя совпадает с адресом оказания услуги',
          value: false,
        },
        address: {
          label: 'Адрес получателя*',
          value: '',
        },
        branch: {
          label: 'Номер почтового отделения (индекс)*',
          value: '',
        },
      },
    };
  },
  computed: {
    // todo refactor to method
    outputData() {
      const paymentValue = this.payment.value;
      let payment = this.payment.options.find(
        (el) => el.value === paymentValue
      );

      if (payment) {
        payment = {
          label: payment.label,
          value: paymentValue,
        };
      }

      const outputData = {};

      if (paymentValue === 'credit') {
        const creditOrganizationValue = this.credit.organization.value;
        let organization = this.credit.organization.options.find(
          (el) => el.value === creditOrganizationValue.value
        );

        if (organization) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.credit.bic.value = organization.bic;
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.credit.corr.value = organization.corr;

          organization = {
            label: organization.label,
            value: organization.value,
          };
        }

        outputData.credit = {
          organization,
          bic: this.credit.bic,
          corr: this.credit.corr,
          checking: this.credit.checking,
        };
      }

      if (paymentValue === 'postal') {
        const postal = {
          isMatches: this.postal.isMatches,
        };

        if (!postal.isMatches.value) {
          postal.address = this.postal.address;
          postal.branch = this.postal.branch;
        }

        outputData.postal = postal;
      }

      return {
        ...outputData,
        payment,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          if (val.payment) {
            this.payment = val.payment;
          }

          if (val.credit) {
            this.credit = val.credit;
          }

          if (val.postal) {
            this.postal = val.postal;
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    noEmptyValueRule,
  },
};
</script>
