<template>
  <div>
    <q-dialog v-model="open" @hide="hideModal">
      <q-card
        v-if="model"
        class="full-width q-pa-md no-shadow"
        style="max-width: 500px"
      >
        <q-card-section>
          <div class="text-h6">
            {{ $t('registries.objectCard.annulInfo') }}
          </div>
        </q-card-section>
        <q-card-section class="q-gutter-y-md">
          <BaseLabelValue v-if="model.title">
            <template v-slot:label>{{ $t('registries.name') }}</template>
            <template v-slot:value>
              {{ model.title }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.created">
            <template v-slot:label>{{
              $t('registries.unloadingList.createDate')
            }}</template>
            <template v-slot:value>
              {{ formatDate(model.created) }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.departmentName">
            <template v-slot:label>{{
              $t('registries.unloadingList.departmentName')
            }}</template>
            <template v-slot:value>
              {{ model.departmentName }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.regionName">
            <template v-slot:label>{{
              $t('registries.unloadingList.region')
            }}</template>
            <template v-slot:value>
              {{ model.regionName }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.state">
            <template v-slot:label>{{
              $t('registries.unloadingList.state')
            }}</template>
            <template v-slot:value>
              {{ model.state }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.importTimestamp">
            <template v-slot:label>{{
              $t('registries.unloadingList.importTimestamp')
            }}</template>
            <template v-slot:value>
              {{ formatDate(model.importTimestamp) }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.importFileName && model.importFileLink">
            <template v-slot:label>{{
              $t('registries.unloadingList.importFile')
            }}</template>
            <template v-slot:value>
              <q-btn
                color="primary"
                :label="model.importFileName"
                @click="
                  saveImportFile(model.importFileLink, model.importFileName)
                "
              />
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.importUserId">
            <template v-slot:label>{{
              $t('registries.unloadingList.importUserId')
            }}</template>
            <template v-slot:value>
              {{ model.importUserId }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.cancelDate">
            <template v-slot:label>{{
              $t('registries.objectCard.cancelDate')
            }}</template>
            <template v-slot:value>
              {{ formatDate(model.cancelDate) }}
            </template>
          </BaseLabelValue>
          <BaseLabelValue v-if="model.cancelReason">
            <template v-slot:label>{{
              $t('registries.objectCard.annulReason')
            }}</template>
            <template v-slot:value>
              {{ model.cancelReason }}
            </template>
          </BaseLabelValue>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from 'vue-property-decorator';
import { convertDateFromTimestamp } from '@utils/format-date';
import { DateFormat } from '@constants/utils/format-date';
import S3UrlSignerFilesService from '@services/s3urlsigner/files';
import { saveAs } from 'file-saver';
import { notifyError } from '@utils/notify';
@Component({
  components: {},
})
export default class AnnulInfoDialog extends Vue {
  @PropSync('openDialog') open?: boolean;
  @Prop() model!: any;

  private hideModal(): void {
    this.open = false;
    this.model = undefined;
  }

  private async saveImportFile(url: string, fileName: string): Promise<void> {
    try {
      const { file } = await S3UrlSignerFilesService.fetchFileFromS3ByUrl({
        url,
      });
      saveAs(file, `${fileName}.xml`);
    } catch (e) {
      notifyError(e.message.toString());
    }
  }

  private formatDate(date: string): string {
    return convertDateFromTimestamp(date, DateFormat.date);
  }
}
</script>
