<template>
  <div class="SignInfo">
    <span class="SignInfo-Icon" @click.stop="clickHandler">
      <slot />
    </span>
    <q-dialog v-model="openFlag" @hide="clearModel">
      <q-card>
        <q-card-section>
          <div class="text-h6">
            {{ $t('registries.objectCard.documentSignature') }}
          </div>
        </q-card-section>
        <q-card-section class="q-gutter-y-md">
          <q-banner class="bg-grey-1">
            <template #avatar>
              <q-icon color="positive" name="check_circle_outline" />
            </template>
            <div>{{ $t('registries.objectCard.signatureIsValid') }}</div>
          </q-banner>
          <table class="text-primary">
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('registries.objectCard.signed') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ certificateInfo.issuerName }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('registries.objectCard.certificatePublisher') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ certificateInfo.subjectName }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('registries.objectCard.document') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ fileInfo.s3Name }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('registries.objectCard.download') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      <q-btn
                        :label="$t('registries.objectCard.signedFile')"
                        icon="attach_file"
                        outline
                        @click="saveSignature()"
                      />
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
          </table>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { saveAs } from 'file-saver';
import S3UrlSignerFilesService from '@services/s3urlsigner/files';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import get from 'lodash/get';
import { notifyError } from '@utils/notify';
import { CertificateInfo, S3File } from '@/recruits/openapi/ervu-service';

@Component({
  methods: {
    get,
  },
})
export default class SignInfo extends Vue {
  @Prop() certificateInfo: CertificateInfo;
  @Prop() fileInfo: S3File;
  @Prop({
    default: false,
    required: false,
  })
  withoutTrigger: boolean;

  openFlag = false;

  clickHandler(): void {
    this.openFlag = true;
  }

  async saveSignature(): Promise<void> {
    const url = this.fileInfo?.sigS3url;

    if (url) {
      try {
        const { file } = await S3UrlSignerFilesService.fetchFileFromS3ByUrl({
          url: url,
        });
        saveAs(file, this.fileInfo.sigS3url);
      } catch (e) {
        notifyError(e.message.toString());
      }
    } else {
      notifyError('Не определена ссылка для файла подписи');
    }
  }

  @Watch('fileInfo', { immediate: true, deep: true })
  public onFileChange(): void {
    if (this.withoutTrigger && this.fileInfo) {
      this.openFlag = true;
    }
  }

  clearModel(): void {
    this.openFlag = false;
    this.$emit('close');
  }
}
</script>

<style lang="scss" scoped>
.SignInfo {
  &-Icon {
    cursor: pointer;
  }
}
</style>
