<template>
  <q-layout view="hHh Lpr lFf">
    <m-drawer v-model="drawer" />
    <q-page-container
      class="redesigned-container page-height"
      :class="backgroundCss"
    >
      <q-linear-progress v-if="mfeModuleLoading" indeterminate size="xs" />
      <router-view v-else />
      <report-dialog ref="reportDialog" />
    </q-page-container>
    <div
      @click="handlerFormHideUserInfo"
      :class="[
        'user-info__content',
        hideUserTooltip ? 'user-info__content__hide' : '',
      ]"
    >
      <q-icon
        class="arrow"
        :name="hideUserTooltip ? 'pgs-move-left' : 'pgs-move-right'"
      ></q-icon>
      <div>
        <div>{{ currentUser.name }}</div>
        <div class="content__text">
          {{ organizationName }}
        </div>
      </div>
    </div>
    <ConfirmActiveModal @logAuth="signOut" />
  </q-layout>
</template>

<style lang="scss" scoped>
.redesigned-container {
  width: 100vw; // это в комбинации с body { overflow-x: hidden; }
  padding-bottom: 50px;

  background: rgb(247, 249, 251);
  &.redesigned-background {
    background: rgb(247, 249, 251);
  }

  &.white-background {
    background: #fff;
  }

  // На нескольких экранах (например: карточка заявления) сверху появлялся отступ - "margin: 15px"
  // который смещал весь контейнер с верхней рамки браузера
  // добавили вот это что бы исправить ситуацию:
  display: flex;
  flex-direction: column;

  &.page-height {
    min-height: 100vh;
  }
}

.user-info {
  &__content {
    display: flex;
    flex-direction: row;
    gap: 2em;
    padding: 12px;
    border-radius: 4px;
    font-family: 'Golos UI';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    width: max-content;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: rgb(236 241 247);
    border: 1px solid rgba(1, 72, 116, 0.11);
    transform: translateX(0%);
    transition: 0.5s;
    .arrow {
      font-size: 3.5em;
      margin: auto;
    }
    .content__text {
      margin-top: 4px;
      font-weight: 400;
      color: rgba(2, 12, 18, 0.58);
      max-width: 400px;
    }
    &__hide {
      transform: translateX(90%);
      transition: 0.5s;
      .content__text {
        margin-top: 4px;
        font-weight: 400;
        color: rgba(2, 12, 18, 0.58);
        max-width: 400px;
      }
    }
  }
}
</style>

<script lang="ts" src="./index.ts" />
