<template>
  <div class="column">
    <div class="masthead">
      <div class="sky-background">
        <div class="row details-bar q-px-md q-pt-md">
          <div class="q-pr-xs">
            <q-btn
              class="back-button q-px-xs"
              icon="pgs-arrow-left"
              dense
              size="sm"
              @click="returnToParentViews('recruits')"
            />
          </div>
          <div>
            <div class="row header-details q-gutter-x-sm">
              <div class="col-shrink">
                <span>Подробная информация по результатам импорта</span>
              </div>

              <div class="col-shrink column counter neutral">
                <span>Всего обработано</span>
                <span>{{ isNumber(data.allCount) ? data.allCount : '—' }}</span>
              </div>

              <router-link
                class="col-shrink column counter positive"
                :to="{ name: 'log-success', query: { importId: logRecordId } }"
              >
                <span>Успешно</span>
                <span>
                  {{ isNumber(data.successCount) ? data.successCount : '—' }}
                </span>
              </router-link>

              <router-link
                class="col-shrink column counter negative"
                :to="{ name: 'log-error', query: { importId: logRecordId } }"
              >
                <span>С ошибками</span>
                <span>
                  {{ isNumber(data.errorCount) ? data.errorCount : '—' }}
                </span>
              </router-link>
            </div>
          </div>
          <div style="flex-grow: 1" />
        </div>
      </div>
    </div>
    <div>
      <!-- Здесь содержимое -->
      <!-- <router-view :data="data" :loading="loading" /> -->
      <centered-1280-box>
        <white-card>
          <div class="q-pa-md">
            <data-table
              :loading="loading"
              :data="recordData"
              :pagination.sync="pagination"
              @request="onRequest"
              :rows-per-page-options="[10, 25, 50, 100]"
            />
          </div>
        </white-card>
      </centered-1280-box>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.masthead {
  background-color: rgba(53, 126, 172, 0.05);
  border-bottom: 1px solid rgba(1, 72, 116, 0.11);

  .details-bar {
    display: flex;
    flex-flow: row;

    .back-button {
      border: 1px solid rgba(1, 72, 116, 0.18) !important;
      border-radius: 24px !important;
      color: #1491cf !important;
    }

    .header-details {
      > div,
      a {
        overflow-x: hidden;
        text-decoration: none;
        font-family: 'Golos Text', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 26px;
        letter-spacing: -0.02em;
        color: rgba(2, 12, 18, 0.9);

        padding: 0 8px 0 8px;
        margin-bottom: 10px;

        &.counter {
          min-width: 7em;
          text-align: center;
          font-family: 'Golos Text', sans-serif;
          font-weight: 600;
          font-size: 12px;
          line-height: 15px;
          color: rgba(2, 12, 18, 0.58);

          &.neutral {
            background: rgba(53, 126, 172, 0.05);
            color: rgba(2, 12, 18, 0.58);
            border: 1px solid rgba(2, 12, 18, 0.18);
          }

          &.positive {
            background: #e3fefa;
            color: #04967d;
            border: 1px solid #04967d;
          }

          &.negative {
            background: #fdf3ed;
            color: #cf5f14;
            border: 1px solid #cf5f14;
          }
        }
      }
    }
  }
}
</style>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { isNumber } from 'lodash';

import ReturnToParentView from '@mixins/ReturnToParentView';
import UrlIntegratedSearch from '@/recruits/mixins/url-integrated-search';
import centered1280Box from '@/recruits/components/common/centered-1280-box.vue';
import whiteCard from '@/recruits/components/common/white-card.vue';
import dataTable from '@/recruits/components/common/log-import-details-table.vue';
import {
  JournalServiceApi,
  ImportDetailedInfo,
} from '@/recruits/openapi/journal-service';
import { SearchFilter, UrlQueryParams } from '@/recruits/models';
import { QPagination } from '@models/models-ui';

@Component({
  components: {
    dataTable,
    centered1280Box,
    whiteCard,
  },
  methods: {
    isNumber,
  },
})
export default class ImportLogDetails extends Mixins(
  ReturnToParentView,
  UrlIntegratedSearch
) {
  pagination: QPagination = {
    sortBy: '',
    descending: false,
    page: 1,
    rowsPerPage: 50,
    rowsNumber: 1000,
  };

  private api = new JournalServiceApi();
  public filter = new SearchFilter();
  public data: any = {};
  public recordData: Array<ImportDetailedInfo> = [];
  public readonly logRecordId: string = this.$route.params.id;

  public async fetchData(
    query: UrlQueryParams
  ): Promise<{ totalRows: number | undefined }> {
    const { page, perpage } = query;
    const { data } = await this.api.getDetailImport(
      this.logRecordId,
      page || '1',
      perpage || '10'
    );
    this.data = data;
    this.recordData = data.detailInfo || [];
    return {
      totalRows: (data as any).allCount,
    };
  }
}
</script>
