<template>
  <div class="full-width">
    <div class="full-width headers NotificationTable-Row">
      <div class="q-pl-xs">Наименование вк</div>
      <div class="q-pl-xs">ФИО / ИД ЕРН</div>
      <div class="text-center">Дата постановки</div>
      <div class="text-center">Статус</div>
      <div class="text-center">Решение</div>
    </div>
    <q-table
      grid
      v-bind="{ ...$props, ...$attrs }"
      @request="requestHandler"
      @update:pagination="paginationHandler"
      row-key="id"
      selection="multiple"
      :selected.sync="selected"
    >
      <template v-slot:item="props">
        <div
          class="full-width body NotificationTable-Row"
          @dblclick="/*dblClickHandler(props.row.id)*/"
        >
          <div class="NotificationTable-Col__NameVK">
            {{ props.row.nameMilitaryCommissariat }}
          </div>
          <div class="NotificationTable-Col__FIO">
            <span class="NotificationTable-Col__FIO__Name">
              {{ props.row.recruitFullName }}
            </span>
            <span class="NotificationTable-Col__FIO__ERN">
              {{ props.row.idErn }}
            </span>
          </div>
          <div class="NotificationTable-Col__BirthDate">
            <q-icon
              name="pgs-calendar"
              class="NotificationTable-Col__BirthDate__Icon"
            />
            <span class="NotificationTable-Col__BirthDate__Date">
              {{ formatDate(props.row.dateMilitaryRegistration) }}
            </span>
          </div>
          <div class="status">
            <status-box :status="props.row.status" borderless />
          </div>
          <div class="full-width NotificationTable-Col__Buttons">
            <q-icon
              class="NotificationTable-Content__Icon NotificationTable-Content__Icon__Not"
              name="pgs-view"
            >
              <q-tooltip>Предпросмотр</q-tooltip>
            </q-icon>
            <q-icon
              class="NotificationTable-Content__Icon"
              name="pgs-import"
              @click="downloadFile(getLink(props.row.attached))"
            />
          </div>
        </div>
      </template>
    </q-table>
  </div>
</template>

<style lang="scss" scoped>
.NotificationTable {
  &-Row {
    display: grid;
    grid-template-columns: 4fr 1.4fr 0.9fr 0.9fr 1fr 99px;
  }
  &-Col {
    &__NameVK {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
      display: flex;
      align-items: center;
    }
    &__FIO {
      display: grid;
      grid-template-areas:
        'fio fio fio'
        'ern ern ern';
      grid-template-columns: 20px 0.8fr 1fr;
      grid-template-rows: 1fr 1.3fr;
      &__Name {
        grid-area: fio;
        font-family: 'Golos UI', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: rgba(2, 12, 18, 0.9);
      }
      &__ERN {
        grid-area: ern;
        align-self: flex-end;
      }
      &__Date,
      &__ERN {
        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);
      }
    }
    &__Passport {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &__BirthDate {
      display: flex;
      align-items: center;
      justify-content: center;
      &__Icon {
        color: rgba(2, 12, 18, 0.7);
        font-size: 16px;
        margin-right: 6px;
      }
      &__Date {
        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);
      }
    }
    &__Buttons {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &-Content {
    &__Bold {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.9);
    }
    &__Grey {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: rgba(2, 12, 18, 0.58);
    }
    &__BirthDate {
      margin-right: 22px;
    }
    &__Icon {
      font-size: 26px;
      cursor: pointer;
      color: #1491cf;
      &:not(:last-child) {
        margin-right: 10px;
      }
      &__Not {
        cursor: not-allowed;
      }
    }
  }
}

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

.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;
  > div.checkbox-column {
    padding-left: 11px;
    padding-right: 11px;
  }
  > div {
    position: relative;
    padding: 0 4px 0 4px;
    overflow: hidden;
    &.status {
      margin-top: -4px;
      margin-bottom: -4px;
      padding: 0;
    }
  }
  &: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 + 2))::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, Watch } from 'vue-property-decorator';
import { copyToClipboard } from 'quasar';

import { formatDate, mask } from '@/recruits/utils';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import { statusDictionary } from '@/recruits/models';
import S3UrlSignerFilesService from '@services/s3urlsigner/files';
import { saveBlob } from '@utils/files';

@Component({
  components: { StatusBox },
  methods: { mask, formatDate },
})
export default class DataTable extends Vue {
  // TODO: Исправить очистку выбранных людей
  selected: string[] = [];
  massSelected = false;

  @Watch('massSelected')
  massSelect(newData: boolean): void {
    this.selected = [];
    if (newData) {
      if (Array.isArray(this.$attrs.data)) {
        this.$attrs.data.forEach((item: Record<string, any>) => {
          this.selected.push(item.id);
        });
      }
    } else {
      this.selected = [];
    }
  }

  @Emit('row-selected')
  @Watch('selected')
  selectRow() {}

  public getStatusTitle(status: string): string {
    return statusDictionary[status] || status;
  }

  @Emit('request')
  requestHandler(value: any): void {
    this.selected = [];
  }

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

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

  public sendToClipBoard(textValue: string) {
    copyToClipboard(textValue);
    this.$q.notify({
      message: `'${textValue}' скопирован`,
    });
  }

  getLink(ob: Record<string, string>): Record<string, string> {
    return {
      fileName: ob.fileName,
      s3url: ob.s3url,
    };
  }

  async downloadFile(atach: Record<string, string>): Promise<void> {
    const s3url = atach.s3url;
    const fileName = 'Решение о постановке на воинский учёт по новому адресу.pdf';
    try {
      const { file: blob } = await S3UrlSignerFilesService.fetchFileFromS3ByUrl(
        {
          url: s3url,
        }
      );
      saveBlob({
        blob,
        fileName,
      });
    } catch (e) {
      console.log(e);
    }
  }
}
</script>
