<i18n>
{
  "en": {
    "HistoryCard": {
      "event": "Event",
      "author": "Author",
      "datetime": "Date and time",
      "tableTitle": "Change history",
      "comment": "Status",
      "noHistoryResult": "No history result"
    }
  },
  "ru": {
    "HistoryCard": {
      "event": "Событие",
      "author": "Пользователь",
      "datetime": "Дата и время",
      "tableTitle": "История изменений",
      "comment": "Статус",
      "noHistoryResult": "Нет результата по истории изменений"
    }
  }
}
</i18n>

<template>
  <div class="row q-pa-md justify-center" v-if="common.active === 'history'">
    <div class="col-12 max-1280-width">
      <div v-if="history.length" class="column q-gutter-y-sm">
        <div class="tab-header">
          {{ $t('HistoryCard.tableTitle') }}
        </div>
        <q-table
          class="HistoryTable"
          :columns="columns"
          :data="history"
          :pagination.sync="pagination"
          hide-bottom
          wrap-cells
          separator="false"
        >
          <template v-slot:header="props">
            <q-tr :props="props" class="HistoryTable-Theader">
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                class="HistoryTable-TH col-header"
              >
                {{ col.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="HistoryTable-Row">
              <q-td :prop="props" name="datetime" class="HistoryTable-Cell">
                {{ convertDate(props.row.date) }}
              </q-td>
              <q-td :prop="props" name="comment" class="HistoryTable-Cell">
                {{ props.row.comment }}
              </q-td>
              <q-td :prop="props" name="topic" class="HistoryTable-Cell">
                {{ props.row.topic }}
              </q-td>
              <q-td :prop="props" name="assignee" class="HistoryTable-Cell">
                {{ props.row.assignee }}
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </div>
      <div v-else class="full-width text-center">
        {{ $t('HistoryCard.noHistoryResult') }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { convertDateFromBackendFormat, DateFormat } from '@utils/format-date';
import get from 'lodash/get';
import { dispatchStatement } from '@services/document-registry';

export default {
  props: ['common', 'model'],
  data() {
    return {
      pagination: {
        rowsPerPage: 0,
      },
    };
  },
  methods: {
    convertDate(val) {
      return convertDateFromBackendFormat(val);
    },
  },
  computed: {
    columns() {
      const headerStyle = 'font-size: 16px; font-weight: 600';
      return [
        {
          align: 'left',
          field: 'date',
          format: (val) =>
            convertDateFromBackendFormat(val, DateFormat.dateTimeFullWithMS),
          label: this.$t('HistoryCard.datetime'),
          name: 'datetime',
          sortable: true,
        },
        {
          align: 'left',
          field: 'comment',
          label: this.$t('HistoryCard.event'),
          name: 'comment',
          sortable: false,
          style: 'white-space: pre-wrap',
        },
        {
          align: 'left',
          field: 'topic',
          label: this.$t('HistoryCard.comment'),
          name: 'topic',
          sortable: true,
        },
        {
          align: 'left',
          field: 'assignee',
          label: this.$t('HistoryCard.author'),
          name: 'assignee',
          sortable: true,
        },
      ];
    },
    history() {
      const parentId = this.parentCardId;
      let parentHistory = [];
      if (parentId) {
        parentHistory = get(this.model, `${parentId}.history`) || [];
      }
      const history = get(this.model, 'history') || [];
      return [...parentHistory, ...history];
    },
    parentCardId(): string {
      return this?.model?.parentId;
    },
  },
  watch: {
    parentCardId(newId: string): void {
      if (newId) {
        return new Promise((resolve, reject) => {
          try {
            dispatchStatement(newId)
              .then((model) => {
                this.$store.commit(`utils/cards/addModel`, {
                  model,
                  path: `${this.common.path}.${newId}`,
                });
                return resolve();
              })
              .catch((e) => reject(e));
          } catch (e) {
            return reject(e);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-header {
  font-family: 'Golos Text', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.015em;
  color: rgba(2, 12, 18, 0.9);
}

.col-header {
  font-family: 'Golos Text', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 10px !important;
  line-height: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.HistoryTable {
  font-family: 'Golos UI', sans-serif;
  &-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);
    height: auto;
    display: grid;
    grid-template-columns: 1.2fr 5fr 2fr 2fr;
  }
  &-TH {
    padding: 7px;
  }
  &-Row {
    background: rgba(38, 117, 166, 0.025);
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1.2fr 5fr 2fr 2fr;
    margin-bottom: 4px;
  }
  &-Cell {
    height: auto;
    display: flex;
    align-items: center;
    padding: 0 4px 0 4px;
    &:not(:last-child) {
      padding-right: 4px;
    }
    &:first-child {
      padding-left: 4px;
    }
    &:last-child {
      //justify-content: flex-end;
      //text-align: right;
    }
    &[name='datetime'] {
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.58);
    }
    &[name='comment'] {
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.9);
    }
    &[name='topic'] {
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.9);
    }
  }
}
</style>
