<template>
  <div class="staging-import q-pa-md">
    <h1 class="page-header">
      Загрузка военных идентификаторов для постановки на учёт
    </h1>
    <q-card v-if="!uploadStatus">
      <q-card-section>
        <r-file-loader
          :acitivity-info="fileLoaderActivityInfo"
          supportedFile=".xml"
          ref="uploader"
          class="file-loader"
          @change="onFileSelected"
        />
      </q-card-section>
      <q-card-section class="q-pt-none">
        <r-btn :disable="!fileXml" label="Загрузить" @click="initUpload" />
      </q-card-section>
    </q-card>
    <q-card v-else>
      <q-card-section>
        <upload-status
          class="upload-status"
          :status="uploadStatus"
          :label="uploadStatusLabel"
          :size="80"
          :line-width="4"
          :file-name="fileXml && fileXml.fileName"
        />
      </q-card-section>
      <q-card-section class="q-pt-none">
        <r-btn
          :style="
            uploadStatus === 'pending' && 'opacity: 0; pointer-events: none;'
          "
          label="Продолжить"
          action
          icon-right="pgs-arrow-right"
          @click="resetUpload"
        />
      </q-card-section>
    </q-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PersonRegistryApi } from '@/recruits/openapi/person-registry';
import RFileLoader from '@components/common/r-file-loader/index.vue';
import UploadStatus from '@/components/common/upload-status/index.vue';
import { ActivityInfo as FileLoaderActivityInfo } from '@components/common/r-file-loader/interfaces';

@Component({
  components: {
    RFileLoader,
    UploadStatus,
  },
})
export default class StagingImport extends Vue {
  personRegistryApi = new PersonRegistryApi();
  public fileXml: { file: File } | null = null;
  uploadStatus: 'pending' | 'success' | 'error' | '' = '';
  uploadStatusMessage = '';

  get uploadStatusLabel(): string {
    if (this.uploadStatusMessage) return this.uploadStatusMessage;
    if (this.uploadStatus === 'pending') return 'Импорт данных из файла';
    if (this.uploadStatus === 'success') return 'Файл импортирован';
    if (this.uploadStatus === 'error') return 'Файл не импортирован';
    return '';
  }

  get fileLoaderActivityInfo(): FileLoaderActivityInfo {
    return {
      select: { buttonCode: 'import_id_select' },
      delete: { buttonCode: 'import_id_delete' },
    };
  }

  async initUpload(): Promise<void> {
    this.$recordActivity({
      buttonCode: 'import_id_upload',
    });
    this.uploadStatusMessage = '';
    try {
      this.uploadStatus = 'pending';
      if (!this.fileXml?.file) return;
      const uploadResponse = await this.personRegistryApi.importListLoadFileXmlV1(
        [this.fileXml.file as File]
      );
      const errorMessage =
        uploadResponse.data[0].descName === 'error' &&
        uploadResponse.data[0].description;

      this.uploadStatus = (errorMessage && 'error') || 'success';
      if (errorMessage) this.uploadStatusMessage = errorMessage;
    } catch (e) {
      this.uploadStatus = 'error';
    }
  }

  resetUpload(): void {
    this.fileXml = null;
    this.uploadStatus = '';
    this.uploadStatusMessage = '';
  }

  onFileSelected(evt: Array<{ file: File }>): void {
    this.fileXml = evt?.[0];
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  font-family: 'Golos Text', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: rgba(2, 12, 18, 0.9);
  margin: 0;
  margin-bottom: 20px;
}

.upload-status {
  min-height: 230px;
}
</style>
