<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('signedApplications.label') }}
      </div>
      <div
        class="flex justify-end"
        v-if="
          $AC.haveOneOfScope([
            USER_SCOPES.CLOUD_ADMIN,
            USER_SCOPES.SIGNED_SPECIALIST,
            USER_SCOPES.PACK_SIGNING_SCOPE,
          ])
        "
      >
        <q-btn
          color="primary"
          icon="create"
          :label="$t('signedApplications.sign')"
          class="q-ml-sm"
          @click="doAction"
        />
      </div>
    </div>
    <div>
      <q-dialog
        v-model="isSignDialogOpen"
        :persistent="loading"
        @hide="hideEndProcess"
      >
        <q-card class="full-width no-shadow" style="max-width: 580px">
          <q-card-section>
            <div class="text-h6">
              {{ $t('signedApplications.signDoc') }}
            </div>
          </q-card-section>
          <q-card-section class="q-gutter-y-md">
            <q-select
              v-model="certificate"
              :disable="!certificates.length"
              :options="certificates"
              class="full-width"
              filled
              :label="$t('signedApplications.certList')"
            >
            </q-select>
          </q-card-section>
          <q-card-actions align="right">
            <q-btn
              :disable="!certificate"
              :loading="loading"
              :label="$t('signedApplications.sign')"
              unelevated
              color="primary"
              @click="startProcessSign"
            >
              <template #loading>
                <q-spinner-gears />
              </template>
            </q-btn>
          </q-card-actions>
          <q-inner-loading :showing="isProgressStart && isSignDialogOpen">
            <q-circular-progress
              show-value
              font-size="12px"
              :value="progress"
              size="50px"
              :thickness="0.22"
              color="primary"
              track-color="grey-3"
              class="q-ma-md q-ml-auto q-mr-auto block"
            >
              {{ progress }}%
            </q-circular-progress>
            <div class="text-center">
              {{ $t('signedApplications.signingInProgress') }}
            </div>
            <div v-if="errorIds.length && progress === 100">
              {{ $t('signedApplications.copyIds') }}
            </div>
          </q-inner-loading>
        </q-card>
      </q-dialog>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        class="statements-index-table"
        selection="multiple"
        :data="model.records"
        :loading="model.loading"
        :pagination.sync="model.pagination"
        :columns="columns"
        saveQuery
        @requestTable="init"
        @update="init"
        :selected="selected"
        @update:selected="selected = $event"
      >
        <template v-slot:body-item-resDoc="props">
          <div class="row no-wrap text-no-wrap float-right">
            <q-btn
              v-if="props.row.documents.length"
              style="color: rgba(0, 0, 0, 0.54)"
              icon="folder_open"
              text-color="primary"
              size="16"
              flat
              dense
            >
              <q-badge
                floating
                rounded
                color="red"
                :label="props.row.documents.length"
                class="badge"
              />
              <q-popup-proxy :props="props">
                <div
                  class="q-pa-md flex flex-center documents justify-around"
                  v-for="document in props.row.documents"
                >
                  {{ document.file.name }}
                  <div class="flex q-ml-xs">
                    <base-preview
                      :extension="document.file.name.split('.').pop()"
                      :s3-url="document.file.url"
                    >
                      <q-btn
                        flat
                        dense
                        icon="search"
                        size="16"
                        style="color: rgba(0, 0, 0, 0.54)"
                        color="prime"
                      >
                        <template #loading>
                          <q-spinner-gears />
                        </template>
                        <q-tooltip>
                          {{ $t('registries.objectCard.preview') }}
                        </q-tooltip>
                      </q-btn>
                    </base-preview>
                    <q-btn
                      :disable="!document.file.url"
                      target="_blank"
                      icon="arrow_downward"
                      flat
                      dense
                      size="16"
                      style="color: rgba(0, 0, 0, 0.54)"
                      color="primary"
                      @click="
                        fetchDocumentAttachment(
                          props.row,
                          document.file.name,
                          document.file.url,
                          document
                        )
                      "
                    >
                      <q-tooltip>
                        {{ $t('registries.objectCard.download') }}
                      </q-tooltip>
                    </q-btn>
                  </div>
                </div>
              </q-popup-proxy>
              <q-tooltip :delay="500">{{
                $t('signedApplications.showAdditionalDocuments')
              }}</q-tooltip>
            </q-btn>
            <base-preview
              :extension="
                get(props.row, 'resDocument.template.name', '').split('.').pop()
              "
              :s3-url="get(props.row, 'resDocument.template.url')"
            >
              <q-btn
                flat
                dense
                icon="search"
                size="16"
                style="color: rgba(0, 0, 0, 0.54)"
                color="prime"
              >
                <template #loading>
                  <q-spinner-gears />
                </template>
                <q-tooltip>
                  {{ $t('registries.objectCard.preview') }}
                </q-tooltip>
              </q-btn>
            </base-preview>
            <q-btn
              :disable="!get(props.row, 'resDocument.template.url')"
              target="_blank"
              icon="arrow_downward"
              flat
              dense
              size="16"
              style="color: rgba(0, 0, 0, 0.54)"
              color="primary"
              @click="fetchDocumentAttachment(props.row)"
            >
              <q-tooltip>
                {{ $t('registries.objectCard.download') }}
              </q-tooltip>
            </q-btn>
          </div>
        </template>
        <template #search>
          <a ref="csvLink" />
          <search-bar
            @query="fetch"
            @pagination="resetPagination"
            :query="searchQuery"
            :loading="model.loading"
          />
        </template>
      </BaseTable>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss">
.statements-index-table {
  .q-table th,
  .q-table td {
    padding: {
      left: 10px;
      right: 10px;
    }

    &:first-child {
      padding: {
        left: 16px;
      }
    }

    &:last-child {
      padding: {
        right: 16px;
      }
    }
  }

  .q-table th {
    padding: {
      top: 8px;
      bottom: 8px;
    }
  }

  .q-table td {
    padding: {
      top: 6px;
      bottom: 6px;
    }
  }
}

.documents {
  min-width: 300px;
}
.badge {
  font-size: 9px;
  line-height: 9px;
  padding: 2px 4px;
}
</style>
