<i18n>
{
  "en": {
    "OrganizationFormPayAttr": {
      "bankCorrespondentAccount": "Bank correspondent account",
      "beneficiaryBankName": "Beneficiary's bank name",
      "bik": "BIK of the payee's bank",
      "checkingAccount": "Checking account",
      "kpp": "IEC",
      "tab": "Payment details",
      "title": "Payment details",
      "send": "Send",
      "save": "Save",
      "cancel": "Cancel"
    }
  },
  "ru": {
    "OrganizationFormPayAttr": {
      "bankCorrespondentAccount": "Корреспондентский счет банка",
      "beneficiaryBankName": "Наименование банка получателя платежа",
      "bik": "БИК банка получателя платежа",
      "checkingAccount": "Расчетный счет",
      "kpp": "КПП",
      "tab": "Выплатные реквизиты",
      "title": "Выплатные реквизиты",
      "send": "Отправить",
      "save": "Сохранить",
      "cancel": "Отмена"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div v-if="!readonly" class="q-gutter-y-md">
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="kpp"
            filled
            :label="$t('OrganizationFormPayAttr.kpp')"
            :rules="[exactNumberOfCharsRule(9)]"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="checkingAccount"
            filled
            :label="$t('OrganizationFormPayAttr.checkingAccount')"
            mask="####################"
            :rules="[exactNumberOfCharsRule(20)]"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="bik"
            filled
            :label="$t('OrganizationFormPayAttr.bik')"
            mask="#########"
            :rules="[exactNumberOfCharsRule(9)]"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="bankCorrespondentAccount"
            filled
            :label="$t('OrganizationFormPayAttr.bankCorrespondentAccount')"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="bankName"
            filled
            :label="$t('OrganizationFormPayAttr.beneficiaryBankName')"
          />
        </div>
      </div>
      <q-btn
        v-if="!inputData.isEditProcess"
        color="primary"
        :label="$t('OrganizationFormPayAttr.send')"
        type="submit"
      />
      <div v-if="inputData.isEditProcess" class="row q-gutter-y-md">
        <q-btn
          class="col-xs-12 col-sm-auto"
          color="primary"
          :label="$t('OrganizationFormPayAttr.cancel')"
          type="button"
          outline
          @click="cancelProcess"
        />
        <q-btn
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          color="primary"
          :label="$t('OrganizationFormPayAttr.save')"
          type="submit"
        />
      </div>
    </div>
    <div v-else class="q-gutter-y-xs">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('OrganizationFormPayAttr.kpp') }}
        </div>
        <div class="col text-grey-7">{{ kpp }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('OrganizationFormPayAttr.checkingAccount') }}
        </div>
        <div class="col text-grey-7">{{ checkingAccount }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('OrganizationFormPayAttr.bik') }}
        </div>
        <div class="col text-grey-7">{{ bik }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('OrganizationFormPayAttr.bankCorrespondentAccount') }}
        </div>
        <div class="col text-grey-7">{{ bankCorrespondentAccount }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('OrganizationFormPayAttr.beneficiaryBankName') }}
        </div>
        <div class="col text-grey-7">{{ bankName }}</div>
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import { exactNumberOfCharsRule } from '@utils/field-validation/basic';
import get from 'lodash/get';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      bankCorrespondentAccount: '',
      bankName: '',
      bik: '',
      checkingAccount: '',
      kpp: '',
    };
  },
  computed: {
    outputData() {
      return {
        organization: {
          bankCorrespondentAccount: this.bankCorrespondentAccount,
          bankName: this.bankName,
          bik: this.bik,
          checkingAccount: this.checkingAccount,
          kpp: this.kpp,
        },
        transExit: false,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          this.bankCorrespondentAccount = get(
            val,
            'organization.bankCorrespondentAccount',
            ''
          );
          this.bankName = get(val, 'organization.bankName', '');
          this.bik = get(val, 'organization.bik', '');
          this.checkingAccount = get(val, 'organization.checkingAccount', '');
          this.kpp = get(val, 'organization.kpp', '');
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    cancelProcess(e) {
      this.$emit('submit', e, {
        transExit: true,
      });
    },
    exactNumberOfCharsRule,
  },
};
</script>
