<template>
  <div class="page_container">
    <side-nav-bar
      title="SDK中心"
      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: () => ({
    navList: [],
  }),
  methods: {
    initNavList() {
      let activePath = "";
      let baseUrl = "/technical_support/sdk";
      let data = [
        {
          name: "JavaScript SDK",
          id: 1,
          children: [
            {
              name: "在地图上添加图层",
              id: 101,
            },
            {
              name: "测测测自己创建测",
              id: 102,
            },
          ],
        },
        {
          name: "Android SDK",
          id: 2,
          children: [
            {
              name: "Android",
              id: 201,
            },
            {
              name: "测测测自己创建测",
              id: 202,
            },
          ],
        },
      ];

      this.navList = data.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 (activePath === "") {
              activePath = path;
            }

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

        return nav;
      });

      if (activePath && this.$route.params.id === undefined) {
        this.$router.push(activePath);
      } else if (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>
