<template>
  <div class="doc_width_nav">
    <div class="part doc_part">
      <h3 class="part_title">
        <span>{{ title || "-" }}</span>
        <span>更新时间：{{ time || "-" }}</span>
      </h3>
      <div
        class="part_content doc_content apaas_scroll"
        v-html="content"
        ref="docContent"
      ></div>
    </div>
    <div class="part nav_part">
      <h3 class="part_title">
        <span>导航</span>
      </h3>
      <ul class="part_content nav_content apaas_scroll">
        <li
          v-for="(item, index) in navTree"
          :class="[
            'text_clip',
            'level_' + item.level,
            item.id === curNav ? ' current' : '',
          ]"
          :key="index"
        >
          <a v-text="item.title" @click="clickNav(item)"></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    richText: {
      type: String,
      defalut: "",
    },
    title: {
      type: String,
      defalut: "",
    },
    time: {
      type: String,
      defalut: "",
    },
  },
  data() {
    return {
      content: "",
      navTree: [],
      curNav: "",
    };
  },
  watch: {
    richText() {
      this.translate();
    },
  },
  mounted() {
    this.translate();
  },
  methods: {
    translate() {
      let content = this.richText;
      let titles =
        content.match(
          /<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
        ) || [];
      let time = new Date().getTime();
      let pre_h1_index = 0;
      let pre_h2_index = 0;
      let pre_h3_index = 0;
      let newTitles = titles
        .map((title, index) => {
          let newTitle = title;
          let level = 0;
          let id = "";

          if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
            pre_h1_index++;
            pre_h2_index = 0;
            pre_h3_index = 0;
            level = 1;
            id = `nav_${pre_h1_index}` + "_" + time;

            newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
          } else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
            pre_h2_index++;
            pre_h3_index = 0;
            level = 2;
            id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;

            newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
          } else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
            pre_h3_index++;
            level = 3;
            id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;

            newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
          }

          content = content.replace(new RegExp(title), newTitle);

          return {
            level,
            id,
            title: title.replace(/<\/?.+?>/g, ""),
          };
        })
        .filter((item) => item.title);

      this.content = content;
      this.navTree = newTitles;
      this.curNav = (newTitles[0] && newTitles[0].id) || "";
    },
    clickNav(item) {
      let target = document.querySelector(`#${item.id}`);

      this.setScroll(target, this.$refs.docContent);
      this.curNav = item.id;
    },
    setScroll(el, parentEl) {
      let actualTop = el.offsetTop;
      let current = el.offsetParent;

      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }

      parentEl.scrollTop = actualTop - parentEl.offsetTop;
    },
  },
};
</script>

<style scoped>
.doc_width_nav {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.doc_width_nav > .part {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 20px;
  box-sizing: border-box;
  box-sizing: 0;
}
.doc_width_nav > .part + .part {
  margin-left: 20px;
}
.doc_part {
  flex-grow: 1;
}
.nav_part {
  width: 270px;
  flex-shrink: 0;
}
.part_title {
  padding: 10px 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.part_title::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid #e3e5ef;
}
.part_title > span:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  color: #58617a;
  position: relative;
  padding-left: 15px;
}
.part_title > span:nth-child(1)::before {
  content: "";
  width: 4px;
  height: 18px;
  background-color: #515fe7;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 0;
}
.part_title > span:nth-child(2) {
  font-size: 14px;
  line-height: 24px;
  color: #8890a7;
  padding-left: 20px;
  background-image: url("/../assets/imgs/shop_ic_updatetime.png");
  background-repeat: no-repeat;
  background-position: left center;
}
.part_content {
  height: calc(100% - 76px);
  margin-top: 20px;
  box-sizing: border-box;
  overflow: auto;
}
.doc_content {
  padding: 0 20px;
}
.nav_content {
  padding-left: 20px;
}
.nav_content > li > a {
  display: block;
  height: 30px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 30px;
  color: #58617a;
  text-decoration: none;
  cursor: pointer;
}
.nav_content > li.level_1 > a {
  color: #242c43;
}
.nav_content > li.level_2 > a {
  text-indent: 2em;
}
.nav_content > li.level_3 > a {
  text-indent: 4em;
}
.nav_content > li.current > a {
  background-color: #e6ebfe;
  color: #515fe7;
}
</style>
