<template>
  <div class="file-preview">
    <el-dialog id="dialog" :border="false" width="1500" :style="{height: fullscreen?'':'750px;'}" top="10vh"
               :fullscreen="fullscreen"
               :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
               :append-to-body="false"
               :close-on-click-modal="true"
    >
      <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>
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)
const checkImgType=(fileType)=>{
  if(fileType=='png'||fileType=='jpg'||fileType=='jpeg'||fileType=='ico'||fileType=='PNG'||fileType=='JPG'){
   return true
  }else {
    return false
  }
}

</script>

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

  }

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

    }
  }

  .el-dialog__body {
    padding: 0 !important;
  }
}

</style>
