<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Подпись документа</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>Подпись достоверна</div>
      </q-banner>
      <table v-if="signature.attachment" class="text-primary">
        <tr>
          <td>
            <q-item>
              <q-item-section>
                <q-item-label class="text-grey-9"> Подписано </q-item-label>
              </q-item-section>
            </q-item>
          </td>
          <td>
            <q-item>
              <q-item-section>
                <q-item-label>
                  {{
                    get(signature.attachment, 'sign.certificate.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">
                  Издатель сертификата
                </q-item-label>
              </q-item-section>
            </q-item>
          </td>
          <td>
            <q-item>
              <q-item-section>
                <q-item-label>
                  {{ get(signature.attachment, 'sign.certificate.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"> Документ </q-item-label>
              </q-item-section>
            </q-item>
          </td>
          <td>
            <q-item>
              <q-item-section>
                <q-item-label>
                  {{ get(signature.attachment, 'name') }}
                </q-item-label>
              </q-item-section>
            </q-item>
          </td>
        </tr>
        <tr>
          <td>
            <q-item>
              <q-item-section>
                <q-item-label class="text-grey-9"> Скачать </q-item-label>
              </q-item-section>
            </q-item>
          </td>
          <td>
            <q-item>
              <q-item-section>
                <q-item-label>
                  <r-btn
                    label="Файл с подписью"
                    icon="attach_file"
                    outline
                    @click="
                      fetchDocumentAttachment(
                        signature.attachment,
                        'download',
                        'sigName',
                        'sigS3url'
                      )
                    "
                  />
                </q-item-label>
              </q-item-section>
            </q-item>
          </td>
        </tr>
      </table>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from 'vue-property-decorator';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';
import get from 'lodash/get';

@Component({
  methods: {
    get,
    fetchDocumentAttachment,
  },
})
export default class SigInfoDialog extends Vue {
  @PropSync('signature') readonly signature: any;
}
</script>
