<template>
  <div class="doc_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/technical_support">
          技术支持
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/technical_support/doc">
          开发文档
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ typeText }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main_container">
      <div class="part doc_part">
        <h3 class="part_title">
          <span>{{ title || typeText }}</span>
          <span>更新时间：{{ update_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>
  </div>
</template>

<script>
import helper from "@/services/helper.js";

export default {
  data() {
    return {
      title: "",
      update_time: "",
      content: "",
      navTree: [],
      curNav: "",
    };
  },
  computed: {
    type() {
      return this.$route.params.type;
    },
    typeText() {
      let types = {
        introductory: "平台简介",
        notice: "使用须知",
        trem: "术语说明",
        standard: "标准规范",
        guide: "操作指南",
        api: "接口文档",
        questions: "常见问题",
      };

      return types[this.type];
    },
    docId() {
      return this.$route.params.id;
    },
  },
  created() {
    this.getContent();
  },
  methods: {
    getContent() {
      let successCallback = (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/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) || "";
      };

      this.$http
        .get("/apaas/support/document/get", {
          params: {
            id: this.docId,
          },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.title = data.data.title;
            this.update_time = this.getTimeText(data.data.updated);

            if (data.data.content) {
              successCallback(data.data.content);
            }
          }
        });
    },
    getTimeText(time) {
      return helper.dateStringTransform(time);
    },
    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_container {
  height: 100%;
  padding: 0 20px 30px;
  box-sizing: border-box;
}
.main_container {
  height: calc(100% - 53px);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.main_container > .part {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 20px;
  box-sizing: border-box;
  box-sizing: 0;
}
.main_container > .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>
