<template>
  <div class="page_container">
    <side-nav-bar
      title="开发文档"
      imgSrc="tool_ic_kaifawendang"
      :nav-list="navList"
      :title-path="navList[0] && navList[0].path"
      style="width: 250px;"
    ></side-nav-bar>
    <div class="main_container">
      <router-view :key="$route.params.type + $route.params.id" />
    </div>
  </div>
</template>

<script>
import sideNavBar from "@/components/side-nav-bar";

export default {
  components: {
    sideNavBar,
  },
  data: () => ({
    activePath: "",
    navList: [],
  }),
  methods: {
    initNavList() {
      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(({ data }) => {
        if (data.success == 1) {
          let menu = data.data[0].Child;
          let nav = [];

          for (let i = 0; i < menu.length; i++) {
            let first = menu[i];

            if (first.visit_url == "/technical_support") {
              for (let j = 0; j < first.Child.length; j++) {
                let second = first.Child[j];

                if (second.visit_url == "/technical_support/doc") {
                  let paths = [
                    "/technical_support/doc/introductory",
                    "/technical_support/doc/notice",
                    "/technical_support/doc/trem",
                    "/technical_support/doc/standard",
                    "/technical_support/doc/guide",
                    "/technical_support/doc/api",
                    "/technical_support/doc/questions",
                  ];

                  nav = second.Child.map((item, index) => ({
                    name: item.menu_name,
                    path: item.visit_url,
                    style: paths.indexOf(item.visit_url),
                  }));
                  break;
                }
              }
              break;
            }
          }

          Promise.all(
            nav.map((item, index) => {
              return this.$http.get("/apaas/support/document/menus", {
                params: { style: item.style },
              });
            })
          ).then((responses) => {
            responses.forEach(({ data }, index) => {
              let list = data.data || [];
              let children = list.map((v) => ({
                name: v.title,
                path: nav[index].path + "/" + v.id,
              }));

              if (children.length === 0) {
                this.$set(nav[index], "disabled", true);
              } else {
                if (this.activePath === "") {
                  this.activePath = children[0].path;
                }

                this.$set(nav[index], "path", children[0].path);

                if (children.length > 1) {
                  this.$set(nav[index], "children", children);
                  this.$set(nav[index], "open", true);
                }
              }
            });

            this.navList = nav;
            if (this.activePath && this.$route.params.id === undefined) {
              this.$router.push(this.activePath);
            } else if (this.activePath === "") {
              this.$message.error("您尚未创建任何文档");
            }
          });
        }
      });
    },
  },
  mounted() {
    this.initNavList();
  },
};
</script>

<style scoped>
.page_container {
  height: calc(100vh - 58px);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.side_nav_bar {
  width: 180px;
  flex-shrink: 0;
}
.main_container {
  width: calc(100% - 180px);
  flex-grow: 1;
  flex-shrink: 1;
  background-color: #f6f7fb;
  overflow: auto;
}
</style>
