<template>
  <div class="full-width IncidentsTable">
    <div class="full-width headers IncidentsTable-Row">
      <div class="q-pl-xs">Номер инцидента</div>
      <div class="q-pl-xs">ФИО / Дата рождения / ИД ЕРН</div>
      <div class="q-pl-xs text-center">Вид инцидента</div>
      <div class="q-pl-xs text-center">Причина регистрации</div>
      <div class="q-pl-xs text-center">Дата регистрации</div>
      <div class="q-pl-xs text-center">Статус</div>
      <div class="q-pl-xs text-center">Файл</div>
    </div>
    <q-table
      grid
      v-bind="{ ...$props, ...$attrs }"
      @request="requestHandler"
      @update:pagination="paginationHandler"
      row-key="id"
      selection="multiple"
    >
      <template v-slot:item="props">
        <div
          class="full-width body IncidentsTable-Row"
          @dblclick="/*dblClickHandler(props.row.id)*/"
        >
          <div class="IncidentsTable-Col IncidentsTable-Col__Number">
            {{ props.row.number }}
          </div>
          <div class="IncidentsTable-Col IncidentsTable-Col__RecruitInfo">
            <div class="IncidentsTable-Col__Name">
              <router-link
                class="cursor-pointer"
                :to="{ name: 'incident-main', params: { id: props.row.id } }"
              >
                {{ props.row.fullName }}
              </router-link>
            </div>
            <div class="row crap-stick gray-numbers q-pt-xs">
              <div class="flex col no-wrap">
                <q-icon name="pgs-calendar" size="20px" />
                <span class="text-no-wrap ellipsis">
                  {{ formatDate(props.row.birthDate) }}
                </span>
              </div>
              <div class="flex col">
                <span class="text-no-wrap ellipsis">
                  {{ props.row.idERN }}
                </span>
              </div>
            </div>
          </div>
          <div class="IncidentsTable-Col IncidentsTable-Col__Reason">
            {{ incidentType[props.row.errorCode] }}
          </div>
          <div
            class="IncidentsTable-Col IncidentsTable-Col__Reason"
            :style="{ alignItems: props.row.reasonDescription.length > 40 ? 'start' : 'center' }"
          >
            {{ props.row.reasonDescription }}
            <q-tooltip maxWidth="400px" v-if="props.row.reasonDescription.length > 40">{{props.row.reasonDescription }}</q-tooltip>
          </div>
          <div class="IncidentsTable-Col IncidentsTable-Col__Date">
            <span class="IncidentsTable-Col IncidentsTable-Col__Date">
              <q-icon v-if="props.row.registeredDate" name="pgs-calendar" size="20px"/>
              {{ formatDate(props.row.registeredDate) }}
            </span>
          </div>
          <div class="status">
            <status-box
              type="incidents"
              :status="props.row.status"
              borderless
            />
          </div>
          <div class="col-12 col-sm-6 col-md-2 iconFlex">
            <div class="ErrorsImport-Body__Cell ErrorsImport-Body__CellFile" >
              <q-icon v-if="get(props.row, 'file.s3url')"
                class="ErrorsImport-Icon ErrorsImport-Body__CellFile_Icon"
                name="pgs-save"
                @click.stop="downloadFile(props.row)"
              >
                <q-tooltip
                  >Скачать {{ get(props.row, 'file.fileName') }}</q-tooltip
                >
              </q-icon>
            </div>
          </div>
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
.iconFlex {
  display: flex;
  justify-content: center;
}
.ErrorsImport {
  &-Icon {
    margin-left: 5px;
    font-size: 22px;
    cursor: pointer;
  }

  &-Row {
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 0.7fr 0.5fr 0.5fr 0.3fr;
  }

  &-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: 14px;

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

      &_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;
      }
    }
  }
}
div.header-checkbox {
  margin-top: -4px;
  margin-bottom: -4px;
  padding-left: 12px;
  padding-right: 12px;
}

.headers {
  padding: 16px 0 6px 0;
  > div {
    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;
  }
}
.gray-numbers {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  //color: rgba(2, 12, 18, 0.58);
  display: flex;
  align-items: center;
}
.IncidentsTable {
  &-Row {
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 0.7fr 0.5fr 0.5fr 0.3fr;
    > div {
      overflow: hidden;
      position: relative;
    }
  }
  &-Col {
    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;
    justify-content: center;
    &__Name {
      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);
        }
      }
    }
    &__CellFile {
      font-size: 32px;
      margin: auto 0;
    }
    &__Number {
      font-family: 'Golos UI', sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 5px;
    }
    &__RecruitInfo {
      align-self: center;
    }
    &__Reason {
      font-family: 'Golos UI', sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      display: flex;
      margin-right: 5px;
      justify-content: flex-start;
      align-items: center;
    }
    &__Procedure {
      display: flex;
      flex-direction: column;
      padding: 4px 0;
      justify-content: center;
    }
    &__ProcedureType {
      font-family: 'Golos text', sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 14px;
      margin-bottom: 2px;
    }
    &__ProcedureDescription {
      font-family: 'Golos Text', sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
    }
    &__Date {
      //color: rgba(2, 12, 18, 0.58);
      font-family: 'Golos UI', sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.body {
  max-height: 5em;
  padding: 4px 0 4px 0;
  margin: 2px 0 2px 0;
  background: #ffffff;
  border: 1px solid rgba(1, 72, 116, 0.11);
  border-radius: 8px;
  box-shadow: none;

  .crap-stick {
    > div > span {
      line-height: 20px;
    }

    ::v-deep i.pgs-calendar {
      top: -1px;
    }
  }

  > div.checkbox-column {
    padding-left: 11px;
    padding-right: 11px;
  }
  &: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);
  }
  > div:not(:nth-last-of-type(-n + 3))::after {
    // Кроме последних двух
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(1, 72, 116, 0.11);
  }
}

::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, mask } from '@/recruits/utils';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import { Procedure, DictionariesElement } from '@/recruits/openapi/ervu-service';
import { JournalErrorRecord } from '@/recruits/openapi/journal-service';
import S3UrlSignerFilesService from '@services/s3urlsigner/files';
import { saveBlob } from '@utils/files';
import get from 'lodash/get';

@Component({
  components: { StatusBox },
  methods: { mask, formatDate, get },
})
export default class DataTable extends Vue {
  async downloadFile(fileInfo: JournalErrorRecord): 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);
    }
  }

  get incidentType() {
    return this.$store.getters['ervuDictionaries/incidentTypes'];
  }

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

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

  // @Emit('row:dblclick')
  dblClickHandler(recruitId: string) {
    this.$router.push({ name: 'recruit-personal', params: { id: recruitId } });
  }

  getProcedureType(procedure: Procedure): string {
    return procedure?.type || 'Нет процедуры';
  }

  getProcedureDescription(procedure: Procedure): string {
    return procedure?.description || 'Нет описания';
  }

  getIncidentProvider(id: string) {
    const provider = this.$store.getters['ervuDictionaries/incidentsSource']
      .find((element: DictionariesElement) => {
        if (id === element.code) {
          return element;
        }
    });

    return provider?.value;
  }
}
</script>
