<template>
  <div class="catalogueRoot">
    <el-row type="flex" class="title" justify="space-around">
      <span>目录</span>
    </el-row>
    <el-row type="flex" class="tree" justify="space-around">
      <el-tree
        accordion
        :highlight-current="true"
        class="eltree"
        :data="catalogue"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node, data }">
          <span :title="node.label">{{ node.label }}</span>
        </span>
      </el-tree>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "catalogue",
  props: ["catalogue", "pdfDocument"],
  data() {
    return {
      defaultProps: {
        children: "items",
        label: "title",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      if (this.$route.query.fileType === "word") {
        let dom = document.getElementById("detail");
        for (let i = 0; i < dom.children.length; i++) {
          this.getScrollTop(
            dom.children[i],
            data.title,
            document.querySelector(".bg")
          );
        }
      } else {
        let model = {
          gen: data.dest[0].gen,
          num: data.dest[0].num,
        };
        this.pdfDocument.getPageIndex(model).then((res) => {
          let target = document.getElementById("page" + (res + 1));
          let scrollTop = target.offsetTop;
          document.getElementsByClassName("bg")[0].scrollTop = scrollTop;
        });
      }

      this.$emit("titleClick", data);
    },
    getScrollTop(e, t, d) {
      if (e.children.length > 0) {
        for (let i = 0; i < e.children.length; i++) {
          let dom = e.children[i];
          this.getScrollTop(dom, t, d);
        }
      } else {
        if (e.innerText === t) {
          if (e.offsetTop === 0) {
            d.scrollTop = e.parentElement.offsetTop;
          } else {
            d.scrollTop = e.offsetTop;
          }
        }
      }
    },
  },
};
</script>
<style lang="scss">
.el-tree-node__content {
  & > span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}

.el-tree {
  color: #000000 !important;
}

.el-tree-node__expand-icon {
  color: #000000 !important;
}

.el-tree-node__expand-icon.is-leaf {
  color: transparent !important;
  cursor: default !important;
}

.eltree {
  .is-current > .el-tree-node__content {
    color: #247aeb !important;
    font-weight: bolder;
  }

  .el-tree-node__label {
  }
}
</style>

<style lang="scss" scoped>
.catalogueRoot {
  & > .title {
    text-align: center;
    height: 62px;
    border-bottom: 1px solid #a4a9bd;

    & > span {
      letter-spacing: 40px;
      font-size: 20px;
      line-height: 60px;
      color: #969b9f;
    }
  }

  & > .tree {
    & > .eltree {
      height: 814px;
      width: 280px;
      background-color: transparent;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
