<template>
    <el-dialog :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览" @close="handleClose" :modal="!withoutModal">
        <OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle" :document-key="documentKey"
            :mode="mode" :type="type" @document-ready="handleDocumentReady" @app-ready="handleAppReady"
            @error="handleError" @initialized="handleInitialized" :force-save="true" :save-timeout="15000" />
    </el-dialog>
</template>
<script>
import OnlyOfficeViewer from './OnlyOfficeViewer';
export default {
    name: 'ViewFile',
    props: {
        file: {
            type: Object,
            default: () => null
        },
      withoutModal: {
        type: Boolean,
        default: false // 默认显示遮罩层
      }
    },
    components: {
        OnlyOfficeViewer
    },
    data() {
        return {
            dialogVisible: true,
            documentUrl: this.file.filePath,
            documentTitle: this.file.fileName,
            documentKey: (this.file?.sourceId || this.file?.id || '') + '',
            mode: 'view',
            type: 'desktop',
        }
    },
    methods: {
        handleDocumentReady() {
            console.log('文档已准备就绪')
        },
        handleAppReady() {
            console.log('应用已准备就绪')
        },
        handleError(error) {
            console.log('错误：', error)
        },
        handleInitialized() {
            console.log('初始化完成')
        },
        handleClose() {
            this.dialogVisible = false
            this.$emit('closeDialog')
        }
    }
}
</script>
<style scoped>
.preview-dialog ::v-deep .el-dialog {
    height: 88vh;
    display: flex;
    flex-direction: column;
}

.preview-dialog ::v-deep .el-dialog__body {
    flex: 1;
    padding: 0;
    height: 0;
    /* 重要：让flex布局生效 */
}

.preview-dialog ::v-deep .onlyoffice-container {
    height: 100%;
}
</style>
