<i18n>
{
  "en": {
    "TreasuryDetailsCard": {
      "accountNumberTOFK": "Treasury account number",
      "correspondentBankAccountTOFK": "United treasury account number",
      "bikTOFK": "BIK TOFK",
      "nameTOFK": "Bank name TOFK",
      "tab": "Treasury details",
      "title": "Treasury details",
      "edit": "Edit",
      "send": "Send",
      "save": "Save",
      "cancel": "Cancel"
    }
  },
  "ru": {
    "TreasuryDetailsCard": {
      "accountNumberTOFK": "Номер казначейского счета",
      "correspondentBankAccountTOFK": "Номер единого казначейского счета",
      "bikTOFK": "БИК ТОФК",
      "nameTOFK": "Наименование банка ТОФК",
      "tab": "Казначейские счета",
      "title": "Казначейские счета",
      "edit": "Редактировать",
      "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="accountNumberTOFK"
            filled
            :label="$t('TreasuryDetailsCard.accountNumberTOFK')"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="correspondentBankAccountTOFK"
            filled
            :label="$t('TreasuryDetailsCard.correspondentBankAccountTOFK')"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="bikTOFK"
            filled
            :label="$t('TreasuryDetailsCard.bikTOFK')"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-input
            v-model="nameTOFK"
            filled
            :label="$t('TreasuryDetailsCard.nameTOFK')"
          />
        </div>
      </div>
      <q-btn
        v-if="!inputData.isEditProcess"
        color="primary"
        :label="$t('TreasuryDetailsCard.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('TreasuryDetailsCard.cancel')"
          type="button"
          outline
          @click="cancelProcess"
        />
        <q-btn
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          color="primary"
          :label="$t('TreasuryDetailsCard.save')"
          type="submit"
        />
      </div>
    </div>
    <div v-else class="q-gutter-y-xs">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('TreasuryDetailsCard.accountNumberTOFK') }}
        </div>
        <div class="col text-grey-7">{{ accountNumberTOFK }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('TreasuryDetailsCard.correspondentBankAccountTOFK') }}
        </div>
        <div class="col text-grey-7">{{ correspondentBankAccountTOFK }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('TreasuryDetailsCard.bikTOFK') }}
        </div>
        <div class="col text-grey-7">{{ bikTOFK }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('TreasuryDetailsCard.nameTOFK') }}
        </div>
        <div class="col text-grey-7">{{ nameTOFK }}</div>
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import get from 'lodash/get';

export default {
  props: ['input-data', 'readonly'],

  data() {
    return {
      id: '',
      accountNumberTOFK: '',
      correspondentBankAccountTOFK: '',
      bikTOFK: '',
      nameTOFK: '',
    };
  },

  computed: {
    outputData() {
      return {
        organization: {
          id: this.id,
          accountNumberTOFK: this.accountNumberTOFK,
          correspondentBankAccountTOFK: this.correspondentBankAccountTOFK,
          bikTOFK: this.bikTOFK,
          nameTOFK: this.nameTOFK,
        },
        transExit: false,
      };
    },
  },

  watch: {
    inputData: {
      handler(val) {
        if (val) {
          this.id = get(val, 'organization.id', '');
          this.accountNumberTOFK = get(
            val,
            'organization.accountNumberTOFK',
            ''
          );
          this.correspondentBankAccountTOFK = get(
            val,
            'organization.correspondentBankAccountTOFK',
            ''
          );
          this.bikTOFK = get(val, 'organization.bikTOFK', '');
          this.nameTOFK = get(val, 'organization.nameTOFK', '');
        }
      },
      immediate: true,
    },
  },

  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    cancelProcess(e) {
      this.$emit('submit', e, {
        transExit: true,
      });
    },
  },
};
</script>
