<template>
  <div class="docx-editor">
    <div id="onlyoffice-editor" style="height: 600px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const documentUrl = ref('https://example.com/document.docx');
const apiUrl = ref('http://onlyoffice-server/web-apps/apps/api/documents/api.js');

const initOnlyOffice = () => {
  if (window.DocEditor) {
    new window.DocEditor('onlyoffice-editor', {
      documentType: 'text',
      document: {
        title: '文档标题.docx',
        url: documentUrl.value,
        fileType: 'docx',
        key: 'doc-' + Date.now(),
        permissions: {
          edit: true,
          download: true,
        }
      },
      editorConfig: {
        callbackUrl: 'https://example.com/save-document',
        user: {
          id: 'user1',
          name: '当前用户'
        },
        customization: {
          autosave: true,
          forcesave: true
        }
      },
      type: 'desktop',
      height: '100%'
    });
  }
};

onMounted(() => {

  const script = document.createElement('script');
  script.src = apiUrl.value;
  script.onload = initOnlyOffice;
  document.head.appendChild(script);
});
</script>