<template>
  <div class="page_container">
    <side-nav-bar
      title="SDK中心"
      :nav-list="navList"
      :title-path="activePath"
      :title-icon="require('@/assets/imgs/tool_ic_kaifawendang.png')"
      style="width: 250px;"
    ></side-nav-bar>
    <div class="main_container">
      <router-view
        :parent-path="activePath"
        :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.$http.get("/apaas/support/sdk/menus").then(({ data }) => {
        if (data.success === 1) {
          let baseUrl = "/technical_support/sdk";
          let menu = data.data || [];

          this.navList = menu.map((item) => {
            let children = item.children || [];

            let nav = {
              name: item.name,
              path: `${baseUrl}/${item.name}`,
            };

            if (children.length > 0) {
              nav.children = children.map((v) => {
                let path = `${baseUrl}/${item.name}/${v.id}`;

                if (this.activePath === "") {
                  this.activePath = path;
                }

                return {
                  name: v.name,
                  path: path,
                };
              });
              nav.open = true;
            } else {
              nav.disabled = true;
            }

            return nav;
          });

          if (this.activePath && this.$route.params.id === undefined) {
            this.$router.push(this.activePath);
          } else if (this.activePath === "") {
            this.$message.error("您尚未创建任何SDK文档");
          }
        }
      });
    },
  },
  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>
