<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>

    <doc-width-nav
      class="main_container"
      :title="title"
      :time="update_time"
      :rich-text="content"
    ></doc-width-nav>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import DocWidthNav from "@/components/doc-width-nav.vue";

export default {
  components: {
    DocWidthNav,
  },
  data() {
    return {
      title: "",
      update_time: "",
      content: "",
    };
  },
  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() {
      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) {
              this.content = data.data.content;
            }
          }
        });
    },
    getTimeText(time) {
      return helper.dateStringTransform(time);
    },
  },
};
</script>

<style scoped>
.doc_container {
  height: 100%;
  padding: 0 20px 30px;
  box-sizing: border-box;
}
.main_container {
  height: calc(100% - 53px);
}
</style>
