<i18n>
{
  "en": {
    "ClientsCard": {
      "columns": {
        "date": "Date",
        "description": "Description",
        "name": "Name"
      },
      "tab": "Clients",
      "title": "Organizations"
    }
  },
  "ru": {
    "ClientsCard": {
      "columns": {
        "date": "Дата подключения",
        "description": "Описание",
        "name": "Наименование"
      },
      "tab": "Клиенты",
      "title": "Организации"
    }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'clients'" class="q-pb-md">
    <q-card v-if="!loading" class="no-shadow q-pb-md q-gutter-y-md q-mx-md">
      <div
        class="items-center justify-between row q-pa-md"
        style="border-radius: 0"
      >
        <div class="full-width">
          <q-table
            class="no-shadow text-grey-9"
            row-key="id"
            :columns="columns"
            :data="clients"
            :pagination.sync="pagination"
            :title="$t('ClientsCard.title')"
            :grid="$q.screen.xs"
          >
            <template #item="props">
              <div class="col-12 q-px-md q-py-xs">
                <q-card class="q-table__grid-item col-12 overflow-auto">
                  <div class="q-table__grid-item-card">
                    <div
                      v-for="col in props.cols"
                      :key="col.name"
                      class="q-table__grid-item-row"
                    >
                      <div class="q-table__grid-item-title">
                        {{ col.label }}
                      </div>
                      <div class="q-table__grid-item-value">
                        {{ col.value }}
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>
            </template>
          </q-table>
        </div>
      </div>
    </q-card>
    <q-inner-loading :showing="loading">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { convertDateFromBackendFormat } from '@utils/format-date';

export default {
  props: ['common', 'model'],
  data() {
    return {
      loading: false,
      clients: [],
      pagination: {
        page: 1,
        rowsPerPage: 10,
      },
    };
  },
  computed: {
    columns() {
      return [
        {
          align: 'left',
          field: 'name',
          label: this.$t('ClientsCard.columns.name'),
          name: 'name',
          sortable: true,
        },
        {
          align: 'left',
          field: 'description',
          label: this.$t('ClientsCard.columns.description'),
          name: 'description',
          sortable: true,
        },
        {
          align: 'left',
          field: 'date',
          format: (val) => convertDateFromBackendFormat(val),
          label: this.$t('ClientsCard.columns.date'),
          name: 'date',
          sortable: true,
        },
      ];
    },
  },
  watch: {
    model: {
      handler: function (val) {
        if (val) {
          if (val.clients) {
            this.clients = val.clients;
          }
        }
      },
      immediate: true,
    },
  },
};
</script>
