<template>
  <centered-1280-box class="Incidents">
    <p class="Incidents-Header">Инциденты</p>
    <q-table
      :columns="columns"
      :data="data.incidentsByRecruit"
      :hide-pagination="true"
      :rows-per-page-options="[0]"
      binary-state-sort
      class="Table IncidentsTable"
      row-key="name"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
            class="Table-Header"
          >
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props" class="Table-Row" no-hover>
          <q-td
            key="number"
            :props="props"
            class="IncidentsTable-Cell IncidentsTable-Secondary"
          >
            <router-link
              class="cursor-pointer"
              :to="{
                name: 'incident-main',
                params: { id: props.row.id },
              }"
            >
            {{ props.row.number }}
            </router-link>
          </q-td>
          <q-td
            key="errorCode"
            :props="props"
            class="IncidentsTable-Cell IncidentsTable-Error"
          >
            {{ incidentError(props.row.errorCode) }}
          </q-td>
          <q-td
            key="reasonDescription"
            :props="props"
            class="IncidentsTable-Cell IncidentsTable-Reason"
          >
            {{ get(props.row, 'reasonDescription', '-') }}
          </q-td>
          <q-td
            key="registrationDate"
            :props="props"
            class="IncidentsTable-Cell IncidentsTable-Date"
          >
            <div v-if="props.row.registrationDate" class="IncidentsTable-SubCell">
              <q-icon name="pgs-calendar"/>{{ checkDate(props.row.registrationDate) }}
            </div>
          </q-td>
          <q-td
            key="resolveDate"
            :props="props"
            class="IncidentsTable-Cell IncidentsTable-Date"
          >
            <div v-if="props.row.resolveDate" class="IncidentsTable-SubCell">
              <q-icon name="pgs-calendar"/>{{ checkDate(props.row.resolveDate) }}
            </div>
          </q-td>
          <q-td
            key="status"
            :props="props"
            class="IncidentsTable-Cell IncidentsTable-Status"
          >
            <status-box
              type="incidents"
              :status="props.row.status"
              borderless
            />
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </centered-1280-box>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IncidentsByRecruitV2 } from '@/recruits/openapi/ervu-service';
import get from 'lodash/get';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import isArray from 'lodash/isArray';
import { formatDate, isSubpoenaSigned } from '@/recruits/utils';
import Centered1280Box from '@/recruits/components/common/centered-1280-box.vue';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';
import SummonDialog from '@/recruits/components/recruit-card/dialogs/summon_dialog.vue';

@Component({
  methods: {
    get,
    isArray,
    formatDate,
    isSubpoenaSigned,
    fetchDocumentAttachment,
  },
  components: {
    SummonDialog,
    Centered1280Box,
    StatusBox,
  },
})
export default class IncidentsTab extends Vue {
  get: typeof get;
  formatDate: typeof formatDate;
  isArray: typeof isArray;

  @Prop()
  readonly data: { incidentsByRecruit: IncidentsByRecruitV2[] };

  columns = [
    {
      name: 'number',
      label: 'Номер',
      field: 'number',
      align: 'left',
      sortable: true,
    },
    {
      name: 'errorCode',
      label: 'Вид инцидента',
      field: 'errorCode',
      align: 'left',
    },
    {
      name: 'reasonDescription',
      label: 'Причина регистрации инцидента',
      field: 'reasonDescription',
      align: 'center',
    },
    {
      name: 'registrationDate',
      label: 'Дата регистрации',
      field: 'registrationDate',
      align: 'left',
      sortable: true,
    },
    {
      name: 'resolveDate',
      label: 'Дата разрешения инцидента',
      field: 'resolveDate',
      align: 'left',
      // sortable: true,
    },
    {
      name: 'status',
      label: 'Статус',
      field: 'status',
      align: 'left',
    },
  ];

  checkDate(date: string | null) {
    return date ? formatDate(date) : '-';
  }

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

  incidentError(code: string) {
    return this.incidentType[code] || '-';
  }
}
</script>

<style lang="scss" scoped>
.Incidents {
  &-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);
    padding-bottom: 12px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  }
}
.Table {
  font-family: 'Golos text', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  background: none;

  ::v-deep & table {
    border-spacing: 0 6px;

    td {
      border-color: #e3ebf0ff;
      border-style: solid;
      border-width: 1px 0 1px 1px;
      font-size: 14px;
      a {
        color: #015e98;
      }

      &:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      &:last-child {
        border-right-width: 1px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }

  &-Row {
    height: unset;
  }

  &-Header {
    height: unset;
    padding: 0 2px 18px 2px;
    font-weight: 600;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(2, 12, 18, 0.58);
    border: none;
    white-space: break-spaces;
    vertical-align: bottom;

    @media screen and (min-width: 1480px) {
      font-size: 10px;
      padding: 0 3px 22px 3px;
    }
  }
}
.IncidentsTable {
  &-Cell {
    padding: 8px 4px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.9);
    text-align: center;
    white-space: break-spaces;
    background: #fff;
    overflow-wrap: break-word;

    @media screen and (min-width: 1480px) {
      padding: 12px 6px;
      font-size: 14px;
    }
  }

  &-SubCell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  &-Secondary {
    font-weight: 400;
    color: rgba(2, 12, 18, 0.58);
  }

  &-Status {
    height: 100%;
    color: rgba(2, 12, 18, 0.58);
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background-color: #ebf1f7ff;
    padding: 0;

    .status-box::v-deep {
      background: none;

      span {
        display: inline;
      }
    }
  }

  &-Actions {
    overflow: hidden;
    color: #1491cf;
    font-size: 26px;
    padding: 6px 3px;

    @media screen and (min-width: 1600px) {
      white-space: nowrap;
    }

    i {
      margin: 0 3px;
    }
  }

  &-IconContainer {
    display: inline-block;
  }

  &-Icon {
    cursor: pointer;

    &__Not {
      color: rgba(2, 12, 18, 0.58);
      cursor: not-allowed;
    }
  }

  &-SummonObjective {
    width: 20%;
    word-wrap: break-word;
    white-space: break-spaces;
    text-align: left;
  }
  &-Error {
    width: 20%;
    word-wrap: break-word;
    white-space: break-spaces;
    text-align: center;
  }
  &-Reason {
    width: 20%;
    word-wrap: break-word;
    white-space: break-spaces;
    text-align: center;
  }
  &-Date {
    width: 15%;
    font-weight: 400;
    white-space: break-spaces;
    text-align: center;
  }
}
</style>
