<template>
  <q-card class="ApiError">
    <q-card-section class="ApiError-Message">
      <q-icon class="ApiError-Message__Icon" name="pgs-warning"/>
      {{ getMessage }}
    </q-card-section>
    <q-card-section class="ApiError-Description">
      {{ getDescription }}
    </q-card-section>
    <q-expansion-item
      v-model="expansion"
      label="Системная информация"
      class="ApiError-SysInfo"
    >
      <q-card-section class="ApiError-Date">
      <span>
        Системное время ошибки:
      </span>
        <span>
        <b>{{ getDate }}</b>
      </span>
      </q-card-section>
      <q-card-section v-if="getError && getDate.length">
      <span>
        Системная информация об ошибке:
      </span>
        <pre>{{ getError }}</pre>
      </q-card-section>
    </q-expansion-item>
    <q-card-actions class="ApiError-Buttons">
      <r-btn label="Закрыть" v-close-popup />
    </q-card-actions>
  </q-card>
</template>

<script lang="ts">
import { Component, Vue, PropSync } from 'vue-property-decorator';
import {fabLastfmSquare} from "@quasar/extras/fontawesome-v5";

@Component({})
export default class ApiErrors extends Vue {
  @PropSync('errorObject')
  errorData: Record<string, any>;

  expansion = false;
  get getDate(): string {
    return this.errorData?.date;
  }

  get getMessage(): string {
    return this.errorData?.message;
  }

  get getError(): unknown {
    return this.errorData?.embedded;
  }

  get getDescription(): string {
    return this.errorData?.description;
  }
}
</script>

<style lang="scss">
.ApiError {
  min-width: 900px;
  &-SysInfo {
    color: #6c7276;
  }
  &-Description {
    font-size: 16px;
  }
  &-Message {
    background-color: rgba(193, 5, 37, 1);
    color: #ffffff;
    font-family: 'Golos UI', sans-serif;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    &__Icon {
      font-size: 50px;
      color: #ffffff;
    }
  }
  &-Buttons {
    display: flex;
    justify-content: flex-end;
  }
}
</style>