<template>
  <div class="full-width LogObject">
    <div class="full-width LogObject-TableHeader LogObject-Row">
      <div class="LogObject-TableHeader__Col q-pl-xs">Дата и время</div>
      <div class="LogObject-TableHeader__Col q-pl-xs">ФИО/Дата рождения/ИД ЕРН</div>
      <div class="LogObject-TableHeader__Col q-pl-xs">Тип изменения</div>
      <div class="LogObject-TableHeader__Col q-pl-xs">Инициатор</div>
      <div class="LogObject-TableHeader__Col q-pl-xs">Должность</div>
      <div class="LogObject-TableHeader__Col q-pl-xs">Военный id</div>
      <div class="LogObject-TableHeader__Col q-pl-xs">id версии</div>
    </div>
    <q-table
      grid
      v-bind="{ ...$props, ...$attrs }"
      @request="requestHandler"
      @update:pagination="paginationHandler"
      row-key="id"
    >
      <template v-slot:item="props">
        <div
          class="full-width LogObject-Row LogObject-Body"
          @click="props.expand = !props.expand"
        >
          <div class="LogObject-Body__Cell">
            {{ formatDate(props.row.dateTime, 'DD-MM-YYYY HH:mm:ss.sss') }}
          </div>
          <div class="LogObject-Body__Cell RecruitInfo">
            <div class="RecruitInfo-Fio">
              {{ props.row.recruitName }}
            </div>
            <div class="RecruitInfo-BirthDate">
              {{ formatDate(props.row.recruitBirthDate, 'DD.MM.YYYY') }}
            </div>
            <div class="RecruitInfo-IdErn">
              {{ props.row.recruitIdErn }}
            </div>
          </div>
          <div class="LogObject-Body__Cell">{{ getDictRes(changesDict, props.row.type) }}</div>
          <div class="LogObject-Body__Cell">{{ props.row.memberFullName }}</div>
          <div class="LogObject-Body__Cell">{{ props.row.memberJobTitle }}</div>
          <div class="LogObject-Body__Cell">{{ props.row.recruitId }}</div>
          <div class="LogObject-Body__Cell">{{ props.row.versionId }}</div>
        </div>
        <div
          class="full-width LogObject-SubTable LogObject-ExtraInfo"
          v-show="props.expand"
        >
          <div class="LogObject-SubTable__Row LogObject-SubTable__Header">
            <div class="LogObject-SubTable__ColHeader">
              Наименование атрибута
            </div>
            <div class="LogObject-SubTable__ColHeader">
              Название поля в интерфейсе
            </div>
            <div class="LogObject-SubTable__ColHeader">Тип изменения</div>
            <div class="LogObject-SubTable__ColHeader">Старое значение</div>
            <div class="LogObject-SubTable__ColHeader">Новое значение</div>
          </div>
          <div
            class="LogObject-SubTable__Row LogObject-SubTable__Body"
            v-for="change in props.row.changes"
            :key="change.id"
          >
            <div class="LogObject-SubTable__ColBody">
              {{ change.systemField }}
            </div>
            <div class="LogObject-SubTable__ColBody">
              {{ change.interfaceField }}
            </div>
            <div class="LogObject-SubTable__ColBody">
              {{ getDictRes(changesDict, change.type) }}
            </div>
            <div class="LogObject-SubTable__ColBody">{{ change.oldValue }}</div>
            <div class="LogObject-SubTable__ColBody">{{ change.newValue }}</div>
          </div>
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
.LogObject {
  &-Row {
    display: grid;
    grid-template-columns: 0.4fr 0.5fr 0.4fr 0.6fr 0.6fr 0.5fr 0.5fr;
  }
  &-TableHeader {
    padding: 16px 0 6px 0;
    &__Col {
      color: rgba(2, 12, 18, 0.58);
      overflow: hidden;
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 10px;
      line-height: 12px;

      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
  }
  &-Body {
    max-height: 5em;
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    background-color: #fff;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
    > div {
      position: relative;
      padding: 0 4px 0 4px;
      overflow: hidden;
      color: rgba(2, 12, 18, 0.9);
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
    }
    &__Cell {
      align-self: center;
    }
    &:hover {
      cursor: pointer;
      border: 1px solid #1491cf;
      box-shadow: 0 0.6px 1.8px rgba(7, 46, 71, 0.12),
        0 3.2px 8px rgba(7, 46, 71, 0.15);
    }
  }
  &-ExtraInfo {
    border: 1px solid rgba(1, 72, 116, 0.11);
    &__Row {
      padding: 4px 0 4px 4px;
      font-size: 12px;
    }
  }
  &-SubTable {
    padding: 5px;
    &__Header {
      color: rgba(2, 12, 18, 0.58);
      overflow: hidden;
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-size: 9px;
      text-transform: uppercase;
    }
    &__ColHeader {
      padding: 2px 4px;
      &:not(:last-child) {
        border-right: 1px solid rgba(1, 72, 116, 0.11);
      }
    }
    &__ColBody {
      padding: 2px 4px;
      font-family: 'Golos Text', sans-serif;
      font-size: 10px;
      &:not(:last-child) {
        border-right: 1px solid rgba(1, 72, 116, 0.11);
      }
    }
    &__Row {
      display: grid;
      grid-template-columns: 0.7fr 0.7fr 0.3fr 1.5fr 1.5fr;
    }
  }
}
.RecruitInfo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    'fio fio'
    'birthDate idern';
  &-Fio {
    grid-area: fio;
  }
  &-BirthDate {
    grid-area: birthDate;
  }
  &-IdErn {
    grid-area: idern;
  }
}

::v-deep .q-table__bottom {
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: rgba(2, 12, 18, 0.58);
}
</style>

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

import { formatDate } from '@/recruits/utils';

@Component({
  methods: { formatDate },
})
export default class DataTable extends Vue {
  objectDict = {
    recruit: 'Гражданин',
    subpoena: 'Повестка',
  };

  changesDict = {
    create: 'Создание',
    update: 'Обновление',
    delete: 'Удаление',
  };

  @Emit('update:pagination')
  paginationHandler() {}

  @Emit('request')
  requestHandler(value: any) {}

  getDictRes(dict: Record<string, string>, value: string): string {
    return dict[value] || 'Неожиданно';
  }
}
</script>
