<template>
  <div class="file-preview">
    <el-dialog id="dialog" :border="false" width="1200" :style="{height: fullscreen?'':'650px;'}" top="10vh"
               :fullscreen="fullscreen"
               :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
               :append-to-body="false"
               :close-on-click-modal="true"
    >
<!--      <ppt-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'ppt'||fileType === 'pptx'"/>-->
      <pdf-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'pdf'"/>
      <docx-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'docx'"/>
      <image-preview :fileUrl="fileUrl" :fullscreen="fullscreen" :fileName="fileName" v-if="checkImgType(fileType)"/>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElNotification} from "element-plus";

const emit = defineEmits(["update:fileUrl"])
const props = defineProps({
  fileUrl: {
    type: String,
    default: ''
  },
  fileType: {
    type: String,
    default: ''
  },
  fileName: {
    type: String,
    default: ''
  },
  //弹窗是否铺满全屏
  fullscreen: {
    type: Boolean,
    default: false
  }
})
const showPreview = ref(true)
// console.info("🚀 ~method:fileType -----", props.fileType)

const checkImgType=(fileType)=>{
  return fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg' || fileType == 'ico' || fileType == 'PNG' || fileType == 'JPG';
}
// console.info("🚀 ~method:‘checkImgType(props.fileType) -----", checkImgType(props.fileType))
if(props.fileType!=='pdf'&&props.fileType!=='docx'&&!checkImgType(props.fileType)){
  showPreview.value=false
  ElNotification({
    title: '提示',
    message: props.fileName+' 文件不支持预览！',
    type:  'error'
  })
}
</script>

<style lang="scss" scoped>
.file-preview {
  .el-overlay-dialog {
    left: 0 !important;

  }

  .el-dialog__headerbtn {
    .el-dialog__close {
      font-size: 30px;

    }
  }

  .el-dialog__body {
    overflow: hidden;

    padding: 0 !important;
  }
}

</style>
