<template>
  <div v-if="supported && isOnline">
    <span @click.stop="clickHandler" v-if="!withoutTrigger">
      <slot />
    </span>
    <q-dialog
      v-model="dialog"
      full-height
      full-width
      @show="generatePreview"
      @hide="clearModel"
    >
      <q-card class="PreviewDialog no-shadow">
        <q-card-section
          class="PreviewDialog-Section PreviewDialog-Header q-pb-none"
        >
          <div class="text-h6">{{ $t('base.preview.dialog.title') }}</div>
          <span style="flex: 1 1 auto"></span>
          <q-btn
            flat
            round
            icon="pgs-close"
            size="sm"
            text-color="#1491CF"
            v-close-popup
          />
        </q-card-section>
        <q-card-section class="PreviewDialog-Section PreviewDialog-Contant">
          <div ref="fileContainer" class="PreviewDialog-Ref"></div>
        </q-card-section>
        <q-inner-loading :showing="loading">
          <q-spinner-gears color="primary" size="50px" />
        </q-inner-loading>
      </q-card>
    </q-dialog>
  </div>
</template>

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

<style lang="scss">
.PreviewDialog {
  display: flex;
  flex-flow: column;
  &-Section {
    display: flex;
    flex-flow: row;
  }
  &-Header {
    flex: none;
  }
  &-Contant {
    flex: 1 1 auto;
    position: relative;
  }
  &-Ref {
    width: 100%;
    height: 100%;
  }
  &-Container {
    position: absolute;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
  }
  &-Iframe {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
  }
  &-Pre {
    margin: 0;
  }
  &-Img {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}
</style>
