<template>
 <div style="height: 80%;">
    <!-- OnlyOffice 编辑器容器 -->
    <button @click="saveDocument">保存文档</button>
    <div ref="editorContainer" id="editorContainer" style="height: 600px;"></div>

    <!-- 外部按钮触发保存事件 -->
 
  </div>
</template>

<script>
export default {
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    // 在组件挂载后初始化 OnlyOffice 编辑器
      this.initOnlyOfficeEditor();
      console.log( this.editor.events,'event');
      this.editor.events.on('documentSave', () => {
        console.log('Document saved');
      });
 
  },
  methods: {
    initOnlyOfficeEditor() {
      let config = {
          document: {
            //后缀
            fileType: 'xlsx',
            key: '',
            title: '1111e',
            permissions: {
              edit: true,//是否可以编辑: 只能查看，传false
              print: true,
              download: true,
              "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
              "review": true //跟踪变化
            },
            url:'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231013/1ec4228aa3b7e1a01d1516e7081ac46d.xlsx',
          },
          documentType:'spreadsheet',
          editorConfig: {
            callbackUrl:"http://47.110.251.215:8090/blade-manager/exceltab/callbackSave",//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
            lang: 'zh-CN',//语言设置
            //定制
            customization: {
              autosave: true,//是否自动保存
              chat: false,
              forcesave:true,//开启手动保存
              comments: false,
              help: true,
              hideRightMenu:true,
              // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
              //是否显示插件
              plugins: false,
            },
            user:{
            id:111,
            name:'',
          },
          mode:'edit',
          },
          width: '100%',
          height: '100%',
         
        }
      // 初始化 OnlyOffice 编辑器
      this.editor = new DocsAPI.DocEditor('editorContainer',config);

      // 在初始化后加载文档等操作
      // ...
      var saveButton = document.getElementById("slot-btn-dt-save");
    console.log(saveButton,'saveButton');
      // 监听 OnlyOffice 编辑器的事件（如果需要）
      console.log(  this.editor,'  this.editor');
   
    },
    saveDocument() {
      // 调用 OnlyOffice 编辑器的保存方法
      this.editor.save((result) => {
        if (result) {
          // 保存成功的处理逻辑
          console.log("文档已成功保存");
        } else {
          // 保存失败的处理逻辑
          console.error("保存失败");
        }
      });
    },
    handleDocumentSave() {
      // 处理文档保存事件（可选）
      console.log("文档保存事件触发");
    },
     
  },
};
</script>
<style scoped="scoped" lang="scss">
</style>
