<template>
  <div
    :class="{
      container: true,
      'sidebar-open': $store.state.app.sidebar.opened,
    }"
  >
    <div :class="{ 'reader-container': true, 'show-panel': panelVisible }">
      <PDFAnnot
        :url="url"
        v-if="url"
        ref="pdfRef"
        @copy="copyText"
        @addNote="addNote"
        @ready="ready"
      />
    </div>
    <RightPanel
      ref="RightPanel"
      readOnly
      currrentFileOnly
      :class="[
        'right-panel',
        panelVisible ? 'translateXLeft' : 'translateXRight',
      ]"
      @handleOpenAddUpdateDialog="handleOpenAddUpdateDialog"
      @handleToggleNotePanel="handleToggleNotePanel"
    />
    <AddOrUpdateNoteDialog
      :formData="form"
      ref="AddOrUpdateNoteDialog"
      @update="handleUpdateRightPanel"
    />
  </div>
</template>

<script>
import PDFAnnot from "@/components/PdfViewer/index.vue";
import RightPanel from "../components/rightPanel.vue";
import AddOrUpdateNoteDialog from "../components/addOrUpdateNoteDialog.vue";
import { deepCopy } from "@/utils/index";
import { getNoteByFile } from "@/api/doc/index";
// import { note } from "../components/mockData";
export default {
  components: {
    PDFAnnot,
    RightPanel,
    AddOrUpdateNoteDialog,
  },
  // 向子/孙组件注入依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
  provide() {
    return {
      currrentFileOnly: true,
      readOnly: true,
      fileId: () => {
        return this.form.docId; //使用方法返回保证响应式
      },
      pdfSwitchPage: this.pdfSwitchPage,
      updateNoteList: this.updateNoteList,
    };
  },
  data() {
    return {
      // url: "http://localhost:99/basePdfFiles/upload/20231007/1008502f32c92041fee8d248981770d1.pdf",
      // url: "/output.pdf",
      // 新增笔记需要的参数
      form: {
        docId: "", //文档Id
        bookmarkContent: "", //原文内容
        noteContent: "", //笔记内容
        docSType: "pdf", //文档类型
        tagsArr: [], //标签
        jsonStr: {
          //笔记在文档中位置的详细信息（包括标记方式、颜色、页码、起始位置等）
          subtype: "下划线", //标记方式
          color: "#ffff00", //标记颜色
        },
      },
      panelVisible: false, //笔记的窗口
      noteList: [],
      pdfAnnotInstance: null,
      url: "",
    };
  },
  mounted() {
    const { fileId, url } = this.$route.query;
    this.form.docId = fileId;
    this.url = url;
  },
  methods: {
    // 关闭笔记窗口
    handleToggleNotePanel() {
      this.panelVisible = !this.panelVisible;
    },
    // 打开编辑笔记窗口
    handleOpenAddUpdateDialog(item) {
      this.$refs.AddOrUpdateNoteDialog.dialogVisible = true;
    },
    // 更新右侧获取笔记
    handleUpdateRightPanel() {
      this.$refs.RightPanel.loadNoteData();
    },
    // 获取当前文件的所有笔记
    // async getCurrentFileNotes() {
    //   // this.noteList=this.$refs.RightPanel.$refs.NoteList.noteList
    //   // const params = {
    //   //   currentPage: 1,
    //   //   pageCount: 100,
    //   //   fileId: this.form.docId,
    //   // };
    //   // let res = await getNoteByFile(params);
    //   // if (res.data) {
    //   //   this.noteList = res.data.records;
    //   //   this.renderNote();
    //   // }
    // },
    updateNoteList(noteList) {
      this.noteList = noteList;
      if (!this.pdfAnnotInstance) {
        return;
      }
      this.renderNote();
    },
    // 渲染笔记
    renderNote() {
      if (!this.noteList) {
        return;
      }
      const annotsMap = this.noteList.map((item) => {
        if (typeof item.jsonStr == "string") {
          return JSON.parse(item.jsonStr);
        } else {
          return item.jsonStr;
        }
      });
      this.pdfAnnotInstance.renderAnnots(annotsMap);
    },
    // pdf跳转页面
    pdfSwitchPage(page) {
      this.pdfAnnotInstance.switchPage(page);
    },
    // 复制文本
    copyText(value) {
      console.log("value", value);
    },
    // 添加笔记
    addNote(value) {
      console.log("value", value);
      this.handleOpenAddUpdateDialog();
      const { info } = value[0];
      this.form.bookmarkContent = info;
      this.form.jsonStr = deepCopy(value[0]);
    },

    ready(value) {
      this.pdfAnnotInstance = value;
      this.renderNote();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../components/index.scss";
</style>
