<!--文档预览组件-->
<template>
  <el-dialog title="预览" :model-value="dialogVisible" :before-close="handleClose" :modal="false" :show-close="true" :close-on-click-modal="false" append-to-body>
    <template #title>
      <span class="dialog-title">
        <el-button type="primary" @click="downloadFile()">下载文件</el-button>
      </span>
    </template>

    <div v-if="['doc', 'docx'].includes(fileType)">
      <vue-office-docx :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" />
    </div>
    <div v-else-if="fileType == 'xlsx'">
      <vue-office-excel :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" />
    </div>
    <div v-else-if="fileType == 'pdf'">
      <vue-office-pdf :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" :options="{width: '100%',overflow: 'auto'}" />
    </div>

    <div v-else-if="['png', 'jpg', 'jpeg','gif'].includes(fileType)">
      <el-image :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" :options="{width: '100%',overflow: 'auto'}" />
    </div>

    <div v-else="">
      <el-input v-model="textarea1" style="height: 70vh;overflow: auto" autosize type="textarea" :options="{width: '100%',overflow: 'auto'}" />
    </div>


  </el-dialog>
</template>
<script setup lang="ts">
// 引入VueOffice组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import XEUtils from 'xe-utils'

// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

const textarea1=ref('')
const emit = defineEmits(["closePreviewDialog"]);


const props = defineProps({
  fileName: { type: String, default: '' },// 文件url
  fileType: { type: String, default: '' },// 文件url
  fileUrl: { type: String, default: '' },// 文件url
  dialogVisible: { type: Boolean, default: false },// 控制显示
})

const downloadFile = () => {
  if(XEUtils.startsWith(props.fileUrl, './')||XEUtils.startsWith(props.fileUrl, '/')){
    window.location.href=props.fileUrl
  }else{
    window.location.href=props.fileUrl
  }
}

const rendered = () => {
  console.log('渲染完成')
}
const errorHandler = (e:any) => {
  console.error('渲染失败',e)
  ElMessage({message: '文档渲染失败',type: 'error',})
}
const handleClose = (done) => {
  emit('closePreviewDialog', false)
}
</script>

<script lang="ts">

</script>