<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 w-e-text w-e-text-container 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-html="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 || "";

      if (content) {
        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", `<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", `<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}_${time}`;

              newTitle = title.replace("<h3", `<h3 id="${id}"`);
            }

            content = content.replace(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) {
      if (!el || !parentEl) {
        return;
      }

      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>
