<template>
  <centered-1280-box>
    <div class="column q-gutter-y-sm">
      <div class="tab-header">История изменений</div>
      <q-table
        :columns="columns"
        :data="data.history"
        :rows-per-page-options="[0]"
        class="HistoryTable"
        hide-bottom
        separator="none"
        wrap-cells
      >
        <template v-slot:header="props">
          <q-tr
            :props="props"
            class="HistoryTable-Theader HistoryTable-GridTemplate"
          >
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              class="HistoryTable-TH"
            >
              {{ col.label }}
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr
            :props="props"
            class="HistoryTable-Row HistoryTable-GridTemplate"
          >
            <q-td :prop="props" class="HistoryTable-Cell" name="datetime">
              <span>{{ formatDate(props.row.dateTime, 'DD.MM.YYYY') }}</span>
              <span>{{ formatDate(props.row.dateTime, 'HH:mm:ss.SSS') }}</span>
            </q-td>
            <q-td :prop="props" class="HistoryTable-Cell" name="comment">
              {{ props.row.event }}
            </q-td>
            <q-td class="HistoryTable-Cell HistoryTable-Cell-Column">
              <div v-if="props.row.cause" class="HistoryTable-Cell__Cause">
                {{ cause(props.row.cause) }}
              </div>
              <div v-if="props.row.description" class="HistoryTable-Cell__Desc">
                {{ props.row.description }}
              </div>
            </q-td>
            <q-td :prop="props" class="HistoryTable-Cell" name="topic">
              <status-box
                :status="props.row.status"
                borderless
                class="HistoryTable-Status"
              />
            </q-td>
            <q-td
              :prop="props"
              class="HistoryTable-Cell HistoryTable-Cell-Column"
              name="assignee"
            >
              <div>{{ props.row.userName }}</div>
              <div v-if="props.row.nameVk" class="HistoryTable-Cell__Position">
                {{ props.row.nameVk }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </centered-1280-box>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Centered1280Box from '@/recruits/components/common/centered-1280-box.vue';
import { RecruitV3 } from '@/recruits/openapi/person-registry';
import { formatDate } from '@/recruits/utils';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import { RTableColumn } from '@/interfaces';

@Component({
  methods: {
    formatDate,
  },
  components: { Centered1280Box, StatusBox },
})
export default class HistoryTab extends Vue {
  @Prop()
  readonly data: RecruitV3;

  get columns(): RTableColumn<RecruitV3['history']>[] {
    return [
      {
        align: 'left',
        field: 'date',
        label: 'Дата и время',
        name: 'datetime',
        sortable: true,
      },
      {
        align: 'left',
        field: 'comment',
        label: 'Событие',
        name: 'comment',
        sortable: true,
        style: 'white-space: pre-wrap',
      },
      {
        align: 'left',
        field: 'cause',
        label: 'Описание',
        name: 'cause',
        sortable: true,
        style: 'white-space: pre-wrap',
      },
      {
        align: 'center',
        field: 'status',
        label: 'Статус',
        name: 'status',
        sortable: true,
      },
      {
        align: 'left',
        field: 'userName',
        label: 'Инициатор',
        name: 'userName',
        sortable: true,
      },
    ];
  }

  cause(cause: string): string {
    const dict = this.$store.getters[
      'ervuDictionaries/causeNotConfirmDictionary'
    ];
    return dict[cause] || '';
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/extends';

.q-table tbody td:before {
  background-color: initial;
}

.tab-header {
  font-family: 'Golos Text', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.015em;
  color: rgba(2, 12, 18, 0.9);
  border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

::v-deep .q-table__card {
  background-color: initial;
}

.HistoryTable {
  font-family: 'Golos UI', sans-serif;
  &-GridTemplate {
    grid-template-columns: minmax(0, 190px) 2.2fr 3fr minmax(0, 180px) 2fr;
  }
  &-Table {
    font-family: 'Golos UI', sans-serif;
  }

  &-Theader {
    height: auto;
    display: grid;
    padding: 0 6px 0 0;
    white-space: nowrap;
    color: rgba(2, 12, 18, 0.58);
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  }

  &-TH {
    overflow: hidden;
    padding: 7px;
    @extend %table-header;
  }

  &-Row {
    box-sizing: border-box;
    padding: 2px 6px 2px 0;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
    display: grid;
  }

  &-Cell {
    overflow: hidden;
    height: auto;
    display: flex;
    align-items: center;
    padding: 0 4px 0 4px;

    &:not(:last-child) {
      padding-right: 4px;
    }

    &:first-child {
      padding-left: 4px;
    }

    &-Column {
      flex-direction: column;
      align-items: baseline;
      justify-content: center;
      gap: 2px;
    }

    &[name='datetime'] {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
      gap: 6px;

      > span:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(2, 12, 18, 0.58);
      }
    }

    &[name='comment'] {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
    }

    &[name='topic'] {
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &[name='assignee'] {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
    }

    &__Desc {
      color: rgba(2, 12, 18, 0.58);
      line-height: 14px;
      font-size: 12px;
    }

    &__Cause {
      font-size: 14px;
    }

    &__Position {
      color: rgba(2, 12, 18, 0.58);
      line-height: 14px;
      font-size: 12px;
    }
  }

  &-Status {
    min-height: 32px;
  }
}
</style>
