<template>
  <q-table v-bind="{ ...$props, ...$attrs }" @request="requestHandler" @update:pagination="paginationHandler"
    :columns="columns" class="HistoryTable" separator="none" :rows-per-page-options="[10, 25, 50, 100]">
    <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.label }}
        </q-th>
      </q-tr>
    </template>
    <template v-slot:body="props">
      <q-tr :props="props" class="HistoryTable-Row">
        <q-td :prop="props" name="idern" class="HistoryTable-Cell">
          <span>{{ props.row.idErn }}</span>
        </q-td>
        <q-td :prop="props" name="fio" class="HistoryTable-Cell">
          {{ props.row.fullName }}
        </q-td>
        <q-td :prop="props" name="result" class="HistoryTable-Cell">
          {{ props.row.result }}
        </q-td>
        <q-td :prop="props" name="log" class="HistoryTable-Cell">
          <div class="column">
            <span v-for="row in props.row.description">{{ row }}</span>
          </div>
        </q-td>
      </q-tr>
    </template>
  </q-table>
</template>
  
<style lang="scss" scoped>
.q-table tbody td:before {
  background-color: initial;
}

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

.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);
    grid-template-columns: minmax(0, 190px) 2fr minmax(0, 180px) 3.5fr;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  }

  &-TH {
    overflow: hidden;
    padding: 7px;
    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;
    color: rgba(2, 12, 18, 0.58);
  }

  &-Row {
    box-sizing: border-box;
    padding: 2px 6px 2px 0;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
    display: grid;
    grid-template-columns: minmax(0, 190px) 2fr minmax(0, 180px) 3.5fr;
  }

  &-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;
    }

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

    &[name='fio'] {
      align-items: flex-start;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
      white-space: initial;
    }

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

    &[name='log'] {
      align-items: flex-start;
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.9);
      white-space: initial;

    }
  }

  &-Status {
    min-height: 32px;
  }
}

::v-deep .q-table__bottom {
  border-top: none;
  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);

  min-height: initial;
  padding-bottom: 0px;
}

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

@Component({})
export default class ImportRecordsTable extends Vue {

  get columns() {
    return [
      {
        align: 'left',
        field: 'idern',
        label: 'ИД ЕРН',
        name: 'idern',
        sortable: false,
      },
      {
        align: 'left',
        field: 'fullName',
        label: 'ФИО Гражданина',
        name: 'fullName',
        sortable: false,
      },
      {
        align: 'center',
        field: 'result',
        label: 'Результат',
        name: 'result',
        sortable: false,
      },
      {
        align: 'left',
        field: 'errors',
        label: 'Дополнительная информация',
        name: 'errors',
        sortable: false,
      },
    ];
  }

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

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

}

</script>
