<template>
  <div id="SystemMgrContainer">
    <br/>
    <div v-if="auth" class="left">
      <el-scrollbar>
        <el-menu default-active="1" class="SystemMgr-menu" @select="handleSelect">
          <el-menu-item index="1">
            <el-icon>
              <IconPark-peoples-two />
            </el-icon>
            <span>用户信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <IconPark-permissions />
            </el-icon>
            <span>权限信息</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <IconPark-log />
            </el-icon>
            <span>系统日志</span>
          </el-menu-item>
          <!--<el-menu-item index="4">-->
          <!--  <el-icon>-->
          <!--    <ElIconLock />-->
          <!--  </el-icon>-->
          <!--  <span>接口授权</span>-->
          <!--</el-menu-item>-->
          <!--<el-menu-item index="5">-->
          <!--  <el-icon>-->
          <!--    <IconPark-chart-histogram/>-->
          <!--  </el-icon>-->
          <!--  <span>接口监控</span>-->
          <!--</el-menu-item>-->
        </el-menu>
      </el-scrollbar>
    </div>

    <div v-if="auth" class="content">
      <UserManage v-if="activeIndex=='1'" />
      <AuthManage v-if="activeIndex=='2'" />
      <SystemLogs v-if="activeIndex=='3'" />
      <!--<InterfaceAuth v-if="activeIndex=='4'" />-->
      <!--<InterfaceMonitor v-if="activeIndex=='5'" />-->
    </div>

    <el-empty v-if="!auth" description="您不是管理员，暂无权限查看"></el-empty>
  </div>
</template>

<script>
import {defineAsyncComponent} from "vue";

export default {
  data() {
    return {
      auth: false,
      activeIndex: '1'
    }
  },
  components: {
    UserManage: defineAsyncComponent(() => import("@/components/systemManage/UserManage")),
    AuthManage: defineAsyncComponent(() => import("@/components/systemManage/AuthManage")),
    SystemLogs: defineAsyncComponent(() => import("@/components/systemManage/SystemLogs")),
    InterfaceAuth: defineAsyncComponent(() => import("@/components/systemManage/InterfaceAuth")),
    InterfaceMonitor: defineAsyncComponent(() => import("@/components/systemManage/InterfaceMonitor")),
  },
  created() {
    let userInfo = this.$store.state.userInfo;
    if (userInfo.userLevel<2
        || (userInfo.userLevel===2) && userInfo.serviceId.split(',').indexOf(this.$constant.serviceId)>-1 ) {
      this.auth = true;
    }
  },
  mounted() {
  },
  methods: {
    handleSelect(val) {
      let app = this;
      this.activeIndex = '0';
      setTimeout(function () {
        app.activeIndex = val
      })

    }
  }
}
</script>

<style scoped>
#SystemMgrContainer {
  width: 100%;
  height: 100%;
}
#SystemMgrContainer .left {
  display: inline-block;
  width: 20%;
  height: 100%;
}

#SystemMgrContainer .content {
  display: inline-block;
  width: 79%;
  vertical-align: top;
  height: 100%;
}
</style>

<style>
#SystemMgrContainer .el-menu-item,.el-sub-menu__title {
  font-size: 17px !important;
  font-weight: 600;
  color: #373737;
}
</style>