<template>
  <div>
    <Dialog
      diaTitle="预览文件"
      v-model="diaVisible"
      fullscreen
      @close="closeFun"
    >
      <div v-if="url" class="content">
        <iframe class="iframe" :src="url" />
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getKKFileViewURLFromMinioApi } from '@/api/data/data';
import Dialog from '@/components/common/dialog/index.vue';

interface Props {
  modelValue: boolean;
  fileId: number;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  fileId: 0,
});

const env = import.meta.env;
const diaVisible = ref(false);
const url = ref('');

const emit = defineEmits(['update:modelValue']);

watch(() => props.modelValue, (val: boolean) => {
  diaVisible.value = val;
  if (val) {
    getPreviewUrlFun();
  }
});

const getPreviewUrlFun = () => {
  const params = {
    fileId: props.fileId,
  };
  getKKFileViewURLFromMinioApi(params).then((res: any) => {
    if (res.code === 200) {
      url.value = `${env.VITE_API_FILE_PREVIEW_URL}?${res.data.encodeKKFileViewURL}`;
    }
  });
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  .iframe {
    width: 100%;
    height: calc(100vh - 74px);
  }
}
</style>
