<template>
  <div class="Directory">
    <q-card class="q-ma-sm q-pa-xs">
      <div class="Directory-InputForm row no-wrap q-gutter-xs q-mb-sm">
        <q-input
          class="Directory-Input col-3"
          label="Номер инцидента"
          v-model="directoryNumber"
          outlined
        />
        <q-file
          class="Directory-File"
          v-model="directoryFile"
          label="Выберите файл"
          accept=".csv"
          :multiple="false"
          outlined
        />
        <q-btn label="Загрузить" color="primary" outline @click="uploadFile" />
      </div>
      <div class="Directory-Log q-mb-sm">
        <q-table :columns="columns" :data="tableData" :bordered="true" />
      </div>
      <div class="Directory-DownloadForm">
        <q-btn
          label="Форма выгрузки"
          outline
          color="primary"
          @click="formDownloadFlagChange"
        />
      </div>
      <q-dialog v-model="formDownloadFlag" persistent>
        <q-card>
          <q-card-section>
            <q-radio v-model="quarter" val="1" label="1 квартал" />
            <q-radio v-model="quarter" val="2" label="2 квартал" />
            <q-radio v-model="quarter" val="3" label="3 квартал" />
            <q-radio v-model="quarter" val="4" label="4 квартал" />
          </q-card-section>
          <q-card-section>
            <q-input v-model="year" label="Введите год" @blur="changeYear"/>
          </q-card-section>
          <q-card-actions>
            <q-btn label="Выгрузить" outline @click="downloadFile" />
            <q-btn label="Отмена" outline @click="formDownloadFlag = false" />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </q-card>
  </div>
</template>

<script>
import { ClassifierApiFactory } from '@openapi/cnsi';
import { notifyError, notifySuccess } from '@utils/notify';
import { convertDateFromTimestamp } from '@utils/format-date';

export default {
  name: 'directory',
  data() {
    return {
      cnsiApi: new ClassifierApiFactory(),
      directoryFile: null,
      directoryNumber: '',
      formDownloadFlag: false,
      quarter: '',
      year: '2022',
      verifyFlag: false,
      columns: [
        {
          name: 'updateStamp',
          field: 'updateStamp',
          label: 'Дата и время обновления',
        },
        {
          name: 'userFullName',
          field: 'userFullName',
          label: 'ФИО пользователя',
        },
        {
          name: 'userId',
          field: 'userId',
          label: 'id пользователя',
        },
        {
          name: 'countUpdate',
          field: 'countUpdate',
          label: 'Количество обновленных строк',
        },
        {
          name: 'countCreate',
          field: 'countCreate',
          label: 'Количество добавленных строк',
        },
        {
          name: 'fileHash',
          field: 'fileHash',
          label: 'hash загруженного CSV-файла',
        },
        {
          name: 'incidentNumber',
          field: 'incidentNumber',
          label: 'Номер инцидента',
        },
      ],
      tableData: [],
    };
  },
  methods: {
    init() {
      this.cnsiApi
        .journalPaging('PGS_PAYMENTS_DISCLOSURE')
        .then((response) => {
          response.data.records.forEach((el) => {
            el.updateStamp = convertDateFromTimestamp(
              el.updateStamp / 1000,
              'DD-MM-YYYY HH-MM'
            );
          });
          this.tableData = response.data.records;
        })
        .catch((e) => {
          notifyError('Не удалось загрузить журнал');
        });
    },
    uploadFile() {
      if (!this.directoryNumber) {
        notifyError('Введите номер инцидента');
        return;
      }
      if (!this.directoryFile) {
        notifyError('Выберите файл');
        return;
      }
      this.cnsiApi
        .uploadClassifier(
          'PGS_PAYMENTS_DISCLOSURE',
          this.directoryFile,
          JSON.stringify({
            userId: this.$store.state.oidcClient.currentUser.person_id,
            userFullName: this.$store.state.oidcClient.currentUser.name,
            userEmail: this.$store.state.oidcClient.currentUser.email,
            incidentNumber: this.directoryNumber,
          }),
          {
            headers: {
              'content-type': 'multipart/form-data',
            },
          }
        )
        .then((response) => {
          notifySuccess('Файл успешно загружен');
          this.directoryFile = null;
          this.directoryNumber = '';
          this.init();
        })
        .catch((e) => {
          notifyError('Не удалось загрузить файл');
        });
    },
    formDownloadFlagChange() {
      this.formDownloadFlag = true;
    },
    changeYear () {
      if (this.year.length !== 4) {
        notifyError('Год должен быть из 4 цифр');
        return;
      }
      if (!this.year.match(/^\d+/)) {
        notifyError('Год должен быть числом');
        return;
      }
      this.verifyFlag = true;
    },
    downloadFile () {
      this.changeYear();
      if (!this.verifyFlag) {
        notifyError('Введен некорректный год');
        return;
      }
      if (!this.quarter) {
        notifyError('Не выбран квартал');
        return;
      }
      this.cnsiApi
        .downloadData('PGS_PAYMENTS_DISCLOSURE')
        .then(response => {
          console.log(response);
          const blob = new Blob([response.data]);
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          const fileName = `${this.quarter}${this.year}`;
          link.download = `${fileName}.csv`;
          link.click();
          URL.revokeObjectURL(link.href);
        })
        .finally(() => {
          this.formDownloadFlag = false;
        })
    },
  },
  mounted() {
    this.init();
  },
};
</script>
