<i18n>
{
  "en": {
    "ResourceCard": {
      "enabled": "Enabled",
      "id": "Resource ID",
      "description": "Resource description",
      "operationId": "Operation ID",
      "path": "Path"
    }
  },
  "ru": {
    "ResourceCard": {
      "enabled": "Включен",
      "id": "Идентификатор ресурса",
      "description": "Описание ресурса",
      "operationId": "Идентификатор операции",
      "path": "Путь"
    }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'basic' && !loading" class="q-pb-md">
    <q-card 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" style="width: 100%">
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('ResourceCard.id') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ id }}
                    </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('ResourceCard.description') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ description }}
                    </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('ResourceCard.operationId') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ operationId }}
                    </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('ResourceCard.path') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ path }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { BaseCardCommon } from '@/interfaces';

@Component({})
export default class ResourcesCardBasic extends Vue {
  @Prop({}) private common?: BaseCardCommon;
  @Prop({}) private model?: any;

  private id = '';
  private description = '';
  private operationId = '';
  private path = '';
  private loading = false;

  @Watch('model', {
    immediate: true,
  })
  registryWatcher(val: any) {
    if (val) {
      this.id = val.id;
      this.description = val.description;
      this.operationId = val.operationId;
      this.path = val.path;
    }
  }
}
</script>
