<template>
  <div class="wps-reader">
    <div id="wps-container" class="wps-container"></div>
    <!-- <div
      class="add-note-container"
      :style="{ position: 'fixed', left: 0, top: 100, 'z-index': 9999999 }"
    >
      我是增加笔记的盒子
    </div> -->
    <RightPanel />
  </div>
</template>
<script>
import WebOfficeSDK from "/public/weboffice/web-office-sdk-v1.1.19.es";
import RightPanel from "./component/rightPanel.vue";
export default {
  components: {
    RightPanel,
  },
  data() {
    return {
      wpsInstance: null, //wpsInstance
    };
  },
  mounted() {
    const { wpsUrl, token } = this.$route.query;
    this.initWps(wpsUrl, token);

    // // 监听鼠标
    // document.addEventListener("mouseover", function (e) {
    //   console.log(e.clientX);
    //   console.log(e.clientY);

    // });
    const selection = window.getSelection() || document.getSelection();
    if (selection) {
      const currentRange = selection.getRangeAt(0);
      this.selection = selection;
      this.currentRange = currentRange;
    }
  },
  destroyed() {
    this.removeWps();
  },
  methods: {
    // 初始化WPS
    async initWps(wpsUrl, token) {
      this.wpsInstance = WebOfficeSDK.config({
        wpsUrl,
        mount: document.querySelector("#wps-container"),
      });
      this.wpsInstance.setToken({ token });
      // 等待加载完毕
      await this.wpsInstance.ready();
      // 注册选取监听
      this.wpsInstance.ApiEvent.AddApiEventListener(
        "WindowSelectionChange",
        (data) => {
          this.handleSelectionChange(data);
        }
      );
    },
    // 监听选取变化
    async handleSelectionChange(data) {
      console.log("data", data);
      const { begin, end } = data;
      const app = this.wpsInstance.Application;
      // 获取选中区域
      const range = await app.ActiveDocument.Range(begin, end);
      // 获取文本
      const text = await range.Text;
      console.log("text", text);
    },
    // 移除监听
    removeWps() {
      if (this.wpsInstance) {
        this.wpsInstance.ApiEvent.RemoveApiEventListener(
          "WindowSelectionChange",
          this.handleSelectionChange
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.wps-reader {
  display: flex;
  .wps-container {
    width: 80vw;
    height: 100vh;
    overflow: hidden;
  }
}
.add-note-container {
  background-color: #999;
  width: 100px;
  height: 100px;
  padding: 20px;
}
</style>
