<script setup>
import { useDialogPluginComponent } from "quasar";
const props = defineProps({
  url: {
    type: String,
    required: true
  },
  mimeType: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  },
  // 圖片/視頻的寬高
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "70vh"
  },
  // 圖片的 fit 模式
  fit: {
    type: String,
    default: "contain"
  }
});
defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
]);
const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
</script>

<template>
    <q-dialog ref="dialogRef" @hide="onDialogHide" full-width >
        <q-card class="q-dialog-plugin" :bordered="false" square>
            <q-toolbar class="bg-primary text-white">
                <q-toolbar-title>{{ title || "\u6587\u4EF6\u9810\u89BD" }}</q-toolbar-title>
                <q-space />
                <q-btn
                    :href="url"
                    target="_blank"
                    dense
                    flat
                    icon="sym_o_download"
                    title="下載"
                />
                <q-btn dense flat icon="sym_o_close" v-close-popup />
            </q-toolbar>

            <q-card-section class="q-pa-md">
                <LDocumentViewer
                    :url="url"
                    :mime-type="mimeType"
                    :width="width"
                    :height="height"
                    :fit="fit"
                />
            </q-card-section>
        </q-card>
    </q-dialog>
</template>
