<template>
  <div class="ProfileInfo">
    <div class="ProfileInfo__BlockTitle">
      <block-header class="ProfileInfo__Title">
        {{ $t('profile.personalData') }}
      </block-header>
    </div>
    <div class="ProfileInfo__BlockData">
      <div v-if="person" class="ProfileInfo__Avatar">
        <q-avatar v-if="get(person, 'photo')" size="178px">
          <img :src="get(person, 'photo')" />
        </q-avatar>
        <img v-else :src="avatarPlaceholder" />
      </div>
      <ul class="ProfileInfo__List">
        <li class="ProfileInfo__ListItem">
          <data-block :form-data="{ label: $t('profile.lastName') }">
            {{ get(person, 'surname') }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem">
          <data-block :form-data="{ label: $t('profile.firstName') }">
            {{ get(person, 'firstname') }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem">
          <data-block :form-data="{ label: $t('profile.middleName') }">
            {{ get(person, 'middlename') }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem">
          <data-block :form-data="{ label: $t('profile.gender') }">
            {{ get(person, 'sex') }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem">
          <data-block
            :form-data="{
              label: $t('profile.birthDate'),
              icon: 'pgs-calendar',
            }"
          >
            {{ personBirthdate }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem">
          <data-block :form-data="{ label: $t('profile.snils') }">
            {{ get(person, 'snils') }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem ProfileInfo__ListItem_Phone">
          <data-block
            :form-data="{ label: $t('profile.phone'), icon: 'pgs-phone' }"
          >
            {{ get(person, 'phone') }}
          </data-block>
        </li>
        <li class="ProfileInfo__ListItem ProfileInfo__ListItem_Email">
          <data-block
            :form-data="{ label: $t('profile.email'), icon: 'pgs-mail' }"
          >
            {{ get(person, 'email') }}
          </data-block>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Person } from '@/openapi/idm';
import { Component, InjectReactive, Vue } from 'vue-property-decorator';
import get from 'lodash/get';
import { personInjectionKey } from '../utils/keys';

import DataBlock from '@/components/cards/statements/components/dataBlock.vue';
import BlockHeader from '@/recruits/components/common/block-header.vue';

import ProfileAvatarPlaceholder from '@/styles/img/__soldier.svg';
import { convertDateFromBackendFormat } from '@/utils/format-date';

@Component({
  methods: {
    get,
  },
  components: {
    DataBlock,
    BlockHeader,
  },
})
export default class ProfileInfo extends Vue {
  @InjectReactive(personInjectionKey) person: Person | null;

  /* Путь до плейсхолдера аватара */
  avatarPlaceholder: string = ProfileAvatarPlaceholder;

  /**
   * Отфроматированный день рождения персоны
   */
  get personBirthdate(): string {
    return convertDateFromBackendFormat(
      this.person?.birthdate || '',
      this.dateMask
    );
  }

  get dateMask(): string {
    return this.$store.getters['i18N/localeMask'].date;
  }
}
</script>

<style lang="scss" scoped>
.ProfileInfo {
  background-color: #fff;
  position: relative;
  margin-bottom: 16px;
  border-radius: 8px;
  padding: 16px 20px;
  border: 1px solid rgba(1, 72, 116, 0.11);
  display: flex;

  &__BlockTitle {
    width: 25%;
    flex-shrink: 1;
  }

  &__Title {
    position: sticky;
    top: 16px;
    padding: 16px 0;
    margin-bottom: 16px;
    z-index: 1;
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);

    &::before {
      left: -20px !important;
    }
  }

  &__BlockData {
    flex-grow: 1;
    max-width: 75%;
  }

  &__Avatar {
    margin-bottom: 4px;
    border-radius: 4px;
    width: 178px;
    height: 178px;
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      display: block;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 100vw rgba(48, 48, 50, 0.5);
    }
  }

  &__List {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__ListItem {
    width: 33.333333%;
    padding-top: 4px;
    padding-right: 4px;

    &_Phone {
      width: 18%;
    }

    &_Email {
      flex-grow: 1;
    }
  }
}
</style>
