<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"
    }
  },
  "ru": {
    "TreasuryDetailsCard": {
      "accountNumberTOFK": "Номер казначейского счета",
      "correspondentBankAccountTOFK": "Номер единого казначейского счета",
      "bikTOFK": "БИК ТОФК",
      "nameTOFK": "Наименование банка ТОФК",
      "tab": "Казначейские счета",
      "title": "Казначейские счета",
      "edit": "Редактировать"
      }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'treasury_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('TreasuryDetailsCard.accountNumberTOFK') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ accountNumberTOFK }}
                    </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('TreasuryDetailsCard.bikTOFK') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ bikTOFK }}
                    </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('TreasuryDetailsCard.correspondentBankAccountTOFK')
                      }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ correspondentBankAccountTOFK }}
                    </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('TreasuryDetailsCard.nameTOFK') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ nameTOFK }}
                    </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('TreasuryDetailsCard.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 {
      accountNumberTOFK: '',
      correspondentBankAccountTOFK: '',
      bikTOFK: '',
      nameTOFK: '',
      loading: false,
    };
  },
  watch: {
    model: {
      handler: function (val) {
        if (val) {
          this.accountNumberTOFK = get(val, 'accountNumberTOFK', '');
          this.correspondentBankAccountTOFK = get(
            val,
            'correspondentBankAccountTOFK',
            ''
          );
          this.bikTOFK = get(val, 'bikTOFK', '');
          this.nameTOFK = get(val, 'nameTOFK', '');
        }
      },
      immediate: true,
    },
  },
  methods: {
    edit() {
      const socketListener = (e) => {
        console.log(e);
        this.common.$websockets.removeListener(socketListener);
      };
      this.common.$websockets.addListener(socketListener);
      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'EditOrganizationBankDataProcess',
        data: {
          organizationId: this.common.id,
        },
      });
      this.loading = true;
    },
  },
};
</script>
