<template>
  <div
    class="DataBlock full-height"
    :class="{ border, ['q-pa-sm']: !noPadding }"
    :style="{
      background: noPadding
        ? 'transparent'
        : background || 'rgba(53, 126, 172, 0.05)',
    }"
  >
    <div
      v-if="formData && formData.label"
      class="DataBlock-Label row"
      :class="{ bolder, caps: capsTitle }"
    >
      <span class="full-width" :class="{ 'text-no-wrap': noWrap }">{{
        formData.label
      }}</span>
    </div>
    <div class="DataBlock-Value row no-wrap">
      <div
        v-if="formData && formData.icon"
        class="col-shrink"
        style="align-self: baseline"
      >
        <q-icon
          :name="formData.icon"
          class="vertical-top"
          :style="{
            fontSize: `${formData && formData.label ? 1.2 : 1.7}rem !important`,
          }"
        />
      </div>
      <div class="col">
        <template v-if="!!$slots.default">
          <slot name="default"></slot>
        </template>
        <template v-else>
          <q-skeleton v-if="loading" style="width: 50%" />
          <template v-else>{{
            formData.value === '' ? '\xa0' /* Это &nbsp; */ : formData.value
          }}</template>
        </template>
      </div>
    </div>
    <slot name="badge"></slot>
    <q-tooltip v-if="formData && formData.tooltip" self="center middle">
      {{ formData.tooltip }}
    </q-tooltip>
  </div>
</template>

<script>
export default {
  name: 'data-block',
  props: {
    formData: Object,
    loading: Boolean,
    background: String,
    bolder: Boolean,
    border: Boolean,
    noPadding: Boolean,
    capsTitle: Boolean,
    noWrap: Boolean,
  },
};
</script>

<style lang="scss" scoped>
.DataBlock {
  overflow: hidden;
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  border-radius: 4px;
  &-Label {
    font-size: 12px;
    line-height: 14px;
    color: rgba(2, 12, 18, 0.58);
    overflow: hidden;
    &.bolder {
      font-family: 'Golos Text';
      font-style: normal;
      font-weight: 600;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.58);
      margin-bottom: 8px;
    }
    &.caps {
      font-family: 'Golos Text';
      font-weight: 500;
      font-size: 10px;
      line-height: 12px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
  }
  &-Value {
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(2, 12, 18, 0.9);
  }

  &.border {
    border: 1px solid rgba(1, 72, 116, 0.11);
  }
}
</style>
