<template>
  <div class="full-width SuccessImport">
    <div class="full-width SuccessImport-TableHeader SuccessImport-Row">
      <div class="SuccessImport-TableHeader__Col q-pl-xs">Дата и время</div>
      <div class="SuccessImport-TableHeader__Col q-pl-xs">Источник</div>
      <div class="SuccessImport-TableHeader__Col q-pl-xs">
        ФИО гражданина / ИД ЕРН
      </div>
      <div class="SuccessImport-TableHeader__Col q-pl-xs">Статус</div>
      <div class="SuccessImport-TableHeader__Col q-pl-xs">Инициатор</div>
      <div class="SuccessImport-TableHeader__Col q-pl-xs">Организация</div>
      <div class="SuccessImport-TableHeader__Col q-pl-xs">Файл</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 SuccessImport-Row SuccessImport-Body">
          <div class="SuccessImport-Body__Cell flex items-center">
            {{ formatDate(props.row.date, 'DD-MM-YYYY HH:mm:ss.sss') }}
          </div>
          <div class="SuccessImport-Body__Cell flex items-center">
            {{ props.row.source }}
          </div>
          <div
            class="SuccessImport-Body__Cell SuccessImport-Body__Cell_UserInfo"
          >
            <div
              class="SuccessImport-Body__Cell_Link"
            >
              <router-link
                :to="{
                  name: 'recruit-personal',
                  params: { id: props.row.recruitId },
                }"
              >
                {{ props.row.fullName }}
              </router-link>
            </div>
            <div class="SuccessImport-Body__Cell_Second">
              {{ props.row.idERN }}
            </div>
          </div>
          <div class="SuccessImport-Body__Cell flex items-center">
            <div class="SuccessImport-Body__Cell_Main">
              {{ props.row.result }}
            </div>
          </div>
          <div
            class="SuccessImport-Body__Cell SuccessImport-Body__Cell_Main flex items-center"
          >
            {{ props.row.initiator }}
          </div>
          <div
            class="SuccessImport-Body__Cell SuccessImport-Body__Cell_Second flex items-center"
          >
            {{ props.row.nameVK }}
          </div>
          <div class="SuccessImport-Body__Cell SuccessImport-Body__CellFile">
            <q-icon
              class="SuccessImport-Icon SuccessImport-Body__CellFile_Icon"
              name="pgs-save"
              @click.stop="downloadFile(props.row)"
            >
              <q-tooltip>Скачать</q-tooltip>
            </q-icon>
            <div>
              <div>
                {{ props.row.fileName }}
              </div>
              <div class="SuccessImport-Body__CellFile_Id">
                {{ props.row.file.s3Name }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
.SuccessImport {
  &-Icon {
    margin-left: 5px;
    font-size: 22px;
    cursor: pointer;
  }
  &-Row {
    display: grid;
    grid-template-columns: 0.6fr 0.9fr 1fr 0.5fr 0.9fr 1.9fr 1.9fr;
  }
  &-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: 10em;
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    color: rgba(2, 12, 18, 0.9);
    font-family: 'Golos UI', sans-serif;
    font-weight: 400;
    font-size: 12px;
    &__Cell {
      padding: 0 0 0 4px;
      &_UserInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      &_Main {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 3px;
      }
      &_Link {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        a {
          text-decoration: none;
          &:link {
            color: #015e98;
          }
          &:visited {
            color: rgba(2, 12, 18, 0.9);
          }
        }
      }
      &_Second {
        font-size: 10px;
        margin-bottom: 3px;
      }
    }
    &__CellFile {
      display: flex;
      align-items: center;
      &_Icon {
        margin-right: 6px;
      }
      &_Id {
        color: rgba(2, 12, 18, 0.58);
        font-size: 10px;
      }
    }
    &__Success {
      background-color: rgba(227, 254, 250, 1);
    }
    &__Error {
      background-color: rgba(254, 227, 231, 1);
    }
    &__InProgress {
      background-color: rgba(253, 243, 237, 1);
    }
    > div {
      font-style: normal;
      line-height: 14px;
    }
    &:hover {
      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;
    }
    &__Info {
      font-family: 'Golos Text', sans-serif;
      font-size: 12px;
      font-weight: 500;
      & > span {
        margin-right: 10px;
      }
    }
    &__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: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  }
  &-Link {
    color: #015e98;
    font-family: 'Golos UI', sans-serif;
    font-size: 14px;
    text-decoration: none;
  }
}
::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';
import S3UrlSignerFilesService from '@services/s3urlsigner/files';
import { saveBlob } from '@utils/files';
import { SuccessImportRecord } from '@/recruits/openapi/journal-service';

@Component({
  methods: { formatDate },
})
export default class DataTable extends Vue {
  @Emit('update:pagination')
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  paginationHandler(): void {}

  @Emit('request')
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  requestHandler(): void {}

  async downloadFile(fileInfo: SuccessImportRecord): Promise<void> {
    try {
      if (!fileInfo.file?.s3url) return;
      const { file: blob } = await S3UrlSignerFilesService.fetchFileFromS3ByUrl(
        {
          url: fileInfo.file.s3url,
        }
      );
      saveBlob({
        blob,
        fileName: fileInfo.fileName,
        blobType: 'text/xml',
      });
    } catch (e) {
      console.log(e);
    }
  }
}
</script>
