<template>
  <div
    :class="{
      container: true,
      'sidebar-open': $store.state.app.sidebar.opened,
    }"
  >
    <div :class="{ 'reader-container': true, 'show-panel': panelVisible }">
      <PDFAnnot
        :url="url"
        ref="pdfRef"
        @copy="copyText"
        @addNote="addNote"
        @ready="ready"
      />
    </div>
    <RightPanel
      readOnly
      :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,
  },
  data() {
    return {
      // url: "http://192.168.1.5:5432/files/upload/20230919/1008502f32c92041fee8d248981770d1.pdf",
      url: "/output.pdf",
      // 新增笔记需要的参数
      form: {
        docId: "", //文档Id
        bookmarkContent: "", //原文内容
        noteContent: "", //笔记内容
        docSType: "pdf", //文档类型
        tagsArr: [], //标签
        jsonStr: {
          //笔记在文档中位置的详细信息（包括标记方式、颜色、页码、起始位置等）
          subtype: "下划线", //标记方式
          color: "#ffff00", //标记颜色
        },
      },
      panelVisible: false, //笔记的窗口
      noteList: note,
      pdfAnnotInstance: null,
    };
  },
  mounted() {
    const { fileId } = this.$route.query;
    this.form.docId = fileId;
  },
  methods: {
    // 关闭笔记窗口
    handleToggleNotePanel() {
      this.panelVisible = !this.panelVisible;
    },
    // 打开编辑笔记窗口
    handleOpenAddUpdateDialog(item) {
      this.$refs.AddOrUpdateNoteDialog.dialogVisible = true;
    },
    // 更新右侧获取笔记
    handleUpdateRightPanel() {
      this.$refs.RightPanel.loadNoteData();
    },
    // 获取当前文件的所有笔记
    // async getCurrentFileNotes() {
    //   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();
    //   }
    // },
    // 渲染笔记
    renderNote() {
      const annotsMap = this.noteList.map((item) => {
        if (typeof item.jsonStr == "string") {
          return JSON.parse(item.jsonStr);
        } else {
          return item.jsonStr;
        }
      });
      this.pdfAnnotInstance.renderAnnots(annotsMap);
      this.pdfAnnotInstance.switchPage(3);
    },
    // 复制文本
    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]);
      console.log("this.form", this.form);
    },

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

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