<template>
  <div class="onlyoffice-container">
    <iframe
      ref="editorIframe"
      :src="editorUrl"
      frameborder="0"
      @load="handleIframeLoad"
    />
  </div>
</template>

<script>
import { getCookie } from '@/utils/util.js';
export default {
  name: 'OnlyofficeWrapper',
  data() {
    return {
      editorUrl: 'http://192.168.254.6:8888', // 替换为你的 Vue 3 项目地址
      isIframeLoaded: false,
    };
  },
  methods: {
    handleIframeLoad() {
      this.isIframeLoaded = true;
      console.log('编辑器 iframe 已加载');
      this.sendAuthCookieToIframe();
    },
    sendAuthCookieToIframe() {
      if (!this.isIframeLoaded) return;

      const accessToken = getCookie('accessToken'); // 假设你有一个获取特定 cookie 的函数
      const targetOrigin = 'http://192.168.254.6:8888'; // 必须与 editorUrl 的源保持一致

      try {
        this.$refs.editorIframe.contentWindow.postMessage(
          {
            type: 'AUTH_COOKIE',
            data: accessToken,
          },
          targetOrigin
        );
        console.log('已向编辑器发送 accessToken');
      } catch (error) {
        console.error('向编辑器发送 accessToken 失败:', error);
      }
    },
  },
};
</script>

<style scoped>
.onlyoffice-container {
  width: 100%;
  height: 100%;
}
iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
