<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="!!(getData && getData.length)">
        <span> Расшифровка: </span>
        <div class="ApiError-DataMessage">
          <div v-for="(mes, index) in getData" :key="index">{{ mes }}</div>
        </div>
      </q-card-section>
      <q-card-section v-if="!!getError">
        <span> Системная информация об ошибке: </span>
        <div class="ApiError-SystemMessage">{{ getError }}</div>
      </q-card-section>
    </q-expansion-item>
    <q-card-actions
      :class="{ 'ApiError-Buttons__SpaceBetween': isShowRouteBtn }"
      class="ApiError-Buttons"
    >
      <r-btn
        v-if="isShowRouteBtn"
        :label="routeBtn.label"
        @click="goToRoute(routeBtn.routeName)"
      />
      <r-btn label="Закрыть" v-close-popup />
    </q-card-actions>
  </q-card>
</template>

<script lang="ts">
import { Component, Vue, PropSync, Prop } from 'vue-property-decorator';

interface RouteBtn {
  label: string;
  routeName: string;
}

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

  @Prop({ type: Object, default: () => ({}) }) readonly routeBtn: RouteBtn;

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

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

  get getData(): unknown {
    return this.errorData?.data?.data;
  }

  get getDescription(): string {
    return this.errorData?.data?.description;
  }

  get getError(): string {
    return this.errorData?.data?.error;
  }

  get isShowRouteBtn(): boolean {
    return !!(this.routeBtn.routeName && this.routeBtn.label);
  }

  goToRoute(routeName: string): void {
    if (routeName) this.$router.push({ name: routeName });
  }
}
</script>

<style lang="scss" scoped>
.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;
    }
  }
  &-SystemMessage,
  &-DataMessage {
    padding: 5px;
    margin-top: 5px;
    background-color: lightgrey;
    border-left: 2px solid gray;
  }
  &-Buttons {
    display: flex;
    justify-content: flex-end;
    &__SpaceBetween {
      justify-content: space-between;
    }
  }
}
</style>
