<i18n>
{
  "en": {
    "PaymentDetailsCard": {
      "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",
      "edit": "Edit"
    }
  },
  "ru": {
    "PaymentDetailsCard": {
      "bankCorrespondentAccount": "Корреспондентский счет банка",
      "beneficiaryBankName": "Наименование банка получателя платежа",
      "bik": "БИК банка получателя платежа",
      "checkingAccount": "Расчетный счет",
      "kpp": "КПП",
      "tab": "Выплатные реквизиты",
      "title": "Выплатные реквизиты",
      "edit": "Редактировать"
    }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'payment_details'" class="q-pb-md">
    <q-card v-if="!loading" class="no-shadow q-pb-md q-gutter-y-md q-mx-md">
      <div class="q-mx-md">
        <div class="q-py-md">
          <table class="text-primary">
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('PaymentDetailsCard.kpp') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ kpp }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('PaymentDetailsCard.checkingAccount') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ checkingAccount }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('PaymentDetailsCard.bik') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ bik }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('PaymentDetailsCard.bankCorrespondentAccount') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ bankCorrespondentAccount }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('PaymentDetailsCard.beneficiaryBankName') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ bankName }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
          </table>
          <q-btn
            class="q-mx-md q-mt-md"
            unelevated
            color="primary"
            :label="$t('PaymentDetailsCard.edit')"
            type="button"
            @click="edit"
          />
        </div>
      </div>
    </q-card>
    <div v-if="loading">
      <q-inner-loading :showing="loading">
        <q-spinner-gears color="primary" size="50px" />
      </q-inner-loading>
    </div>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import get from 'lodash/get';
export default {
  props: ['common', 'model'],
  data() {
    return {
      bankCorrespondentAccount: '',
      bankName: '',
      bik: '',
      checkingAccount: '',
      fullname: '',
      dialogDelete: false,
      kpp: '',
      loading: false,
    };
  },
  watch: {
    model: {
      handler: function (val) {
        if (val) {
          this.bankCorrespondentAccount = get(
            val,
            'bankCorrespondentAccount',
            ''
          );
          this.bankName = get(val, 'bankName', '');
          this.bik = get(val, 'bik', '');
          this.checkingAccount = get(val, 'checkingAccount', '');
          this.fullname = get(val, 'fullname', '');
          this.kpp = get(val, 'kpp', '');
        }
      },
      immediate: true,
    },
  },
  methods: {
    edit() {
      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'EditOrgPayAttrsProcess',
        data: {
          organizationId: this.common.id,
        },
      });
      this.loading = true;
    },
  },
};
</script>
