<template>
  <div class="fwgl_container">
    <sideNavBar
      v-if="is_admin == 3 || is_admin == 4"
      title="运营管控中心"
      imgSrc="tool_fuwu"
      :nav-list="navList"
      :title-path="navList[0] && navList[0].path"
    ></sideNavBar>
    <sideNavBarClass
      v-else-if="is_admin == 1 || is_admin == 2"
      title="运营管控中心"
      imgSrc="tool_fuwu"
      :nav-list="navList"
      :title-path="navList[0] && navList[0].path"
    ></sideNavBarClass>
    <div v-else class="skeleton"></div>
    <div class="main_container">
      <router-view :key="'type_' + $route.params.type"></router-view>
    </div>
  </div>
</template>

<script>
import sideNavBar from "@/components/side-nav-bar";
import sideNavBarClass from "@/components/general/side-nav-bar-class";
export default {
  components: {
    sideNavBar,
    sideNavBarClass,
  },
  data: () => ({
    userNav: [
      {
        name: "服务分析",
        path: `/data_analysis/my_service`,
      },
      {
        name: "应用分析",
        path: `/data_analysis/my_application`,
      },
    ],
    userNav1: [
      {
        name: "运营分析",
        path: `/data_analysis/org_service`,
        child: [
          {
            name: "服务分析",
            path: `/data_analysis/org_service`,
          },
          {
            name: "应用分析",
            path: `/data_analysis/org_application`,
          },
        ],
      },
      {
        name: "运行管控",
        path: `/data_analysis/org_overview`,
        child: [
          {
            name: "运行概况",
            path: `/data_analysis/org_overview`,
          },
          {
            name: "服务管控",
            path: `/data_analysis/org_control`,
          },
        ],
      },
    ],
    userNav2: [
      {
        name: "运营分析",
        path: `/data_analysis/super_service`,
        child: [
          {
            name: "服务分析",
            path: `/data_analysis/super_service`,
          },
          {
            name: "应用分析",
            path: `/data_analysis/super_application`,
          },
        ],
      },
      {
        name: "运行管控",
        path: `/data_analysis/super_overview`,
        child: [
          {
            name: "运行概况",
            path: `/data_analysis/super_overview`,
          },
          {
            name: "服务管控",
            path: `/data_analysis/super_control`,
          },
        ],
      },
    ],
    navList: [],
    is_admin: 0,
  }),
  watch: {
    // "$route.fullPath"(path) {
    //   this.initNavList();
    // },
  },
  methods: {
    initNavList() {
      this.$api.user.getNowUser().then((response) => {
        this.is_admin = response.data.data.is_admin;
        if (this.is_admin == 3 || this.is_admin == 4) {
          this.navList = this.userNav;
        } else if (this.is_admin == 2) {
          this.navList = this.userNav1;
        } else if (this.is_admin == 1) {
          this.navList = this.userNav2;
        }
      });
    },
  },
  mounted() {
    this.initNavList();
  },
};
</script>

<style scoped>
.fwgl_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;
}
.skeleton {
  width: 180px;
  background-color: #0d1847;
}
</style>
