<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>平台简介</span>
          <span>更新时间：2020-10-20 19:00:00</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>
export default {
  data() {
    return {
      content: "",
      navTree: [],
      curNav: "",
    };
  },
  computed: {
    type() {
      return this.$route.params.type;
    },
    typeText() {
      let types = {
        introductory: "平台简介",
        notice: "使用须知",
        trem: "术语说明",
        standard: "标准规范",
        guide: "操作指南",
        api: "接口文档",
        questions: "常见问题",
      };

      return types[this.type];
    },
    typeUrl() {
      let types = {
        introductory: "xxx",
        notice: "xxx",
        trem: "xxx",
        standard: "xxx",
        guide: "xxx",
        api: "xxx",
        questions: "xxx",
      };

      return types[this.type];
    },
  },
  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) || "";
      };

      let richTextContent = `
        <h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1><img src="http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg" style="font-size: 14px; max-width: 100%;"></h1><h1><a href="https://www.baidu.com" target="_blank" style="font-size: 14px;">链接</a></h1><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能</p><h1></h1>
      `;
      successCallback(richTextContent);
    },
    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>
