<template>
  <div
    id="slidebar-container"
    class="slidebar-container"
  >
    <el-menu
      :default-active="onRoutes"
      class="el-menu-vertical-demo"
      theme="dark"
      unique-opened
      router
    >
      <template v-for="(item, _index) in items">
        <template v-if="item.subs && item.subs.length">
          <el-submenu
            :key="item.index"
            :index="'index_' + _index"
          >
            <template slot="title">
              <i :class="item.icon" />
              {{ item.title }}
            </template>
            <el-menu-item
              v-for="(subItem, i) in item.subs"
              :key="i"
              :index="subItem.index"
            >
              <i
                class="sub-icon"
                :class="subItem.icon"
              />
              {{ subItem.title }}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item
            :key="item.index"
            :index="item.index"
          >
            <i :class="item.icon" />
            {{ item.title }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
  import { getInnerLoginUrl } from '@/utils';
  import storejs from 'storejs';
  import { menuList } from '@/api/layout';

  const BUILD_ENV = process.env.BUILD_ENV;
  export default {
    props: {
      systemType: {
        type: [Number, String],
        default: 38,
      },
    },
    data() {
      return {
        items: [],
      };
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      },
    },
    created() {
      this.getNav();
    },
    methods: {
      getNav() {
        menuList({ systemType: this.systemType }).then((res) => {
          if (res.code == '000000') {
            const { vueMenuDtos, userId } = res.data;
            const i = {
              isSuper: false,
              userID: userId,
            };
            const u = this.getSocketUrl(BUILD_ENV);
            storejs.set('initSocketInfo', { url: u, userId: userId });
            this.$store.dispatch('socket/initSocket', { url: u, userId: userId });
            vueMenuDtos.map((item) => {
              if (item.index.indexOf('administrators') > -1) {
                // 超级管理员
                i.isSuper = true;
              } else {
                // 普通用户
                i.isSuper = false;
              }
            });
            this.$store.commit('main/updateIsSuperAdmin', i);
            this.items = vueMenuDtos;
            sessionStorage.setItem(
              'ADMIN_IM_CENTER_NAVS',
              JSON.stringify(vueMenuDtos)
            );
          // 做当前路由无权限时处理
          // this.checkAuth(this.$route.path.split("/")[1], vueMenuDtos);
          } else {
            window.location.href = getInnerLoginUrl(); // 返回登录页面
          }
        });
      },
      checkAuth(path, navs) {
        const navList = getNavs(navs);

        function getNavs(arr) {
          let nvs = [];
          for (let i = 0; i < arr.length; i++) {
            const nav = arr[i];
            const subs = nav.subs;

            if (subs.length) {
              nvs = nvs.concat(getNavs(subs));
            } else {
              nvs.push(nav.index);
            }
          }
          return nvs;
        }
        if (navList.indexOf(path) == -1) {
          this.$router.push(`/${navList[0]}`);
        }
      },
      getSocketUrl(env) {
        let url = '';
        switch (env) {
        case 'development':
          url = 'https://dev-sockets.yunqueyi.com';
          break;
        case 'test':
          url = 'https://test1-sockets.yunqueyi.com';
          break;
        case 'uat':
          url = 'https://uat-sockets.yunqueyi.com';
          break;
        case 'pro':
          url = 'https://sockets.yunqueyi.com';
          break;
        default:
          url = 'https://dev-sockets.yunqueyi.com';
          break;
        }
        return url;
      },
    },
  };
</script>
<style lang="scss">
.slidebar-container {
  display: block;
  position: absolute;
  left: 0;
  top: 64px;
  bottom: 0;
  width: 215px;
  background: #06232c;
  .el-menu {
    background: #06232c;
    border-right: none;
    .sub-icon {
      font-size: 12px;
    }
    .el-menu-item,
    .el-submenu__title {
      color: #8fa4ac;
    }
    .el-menu-item.is-active {
      color: #fff;
      background: #0d9078 !important;
    }
    .el-menu-item:hover,
    .el-submenu__title:hover,
    .slidebar-container .el-menu .el-menu-item:hover,
    .slidebar-container .el-menu .el-submenu__title:hover {
      color: #fff;
      background: #06232c;
    }

  }
}
</style>

