<template>
  <div class="base_slide editbase_slide" id="base_slide">
    <div class="base_logo_wrap">
      <a href="/index">
        <img src="../../../../static/logo.png" />
      </a>
    </div>
    <div class="sidebarWrap">
      <div class="leftsidebarWrap">
        <div class="sideMenu_item" v-for="(item,index) in menus" :key="index">
          <div class="firstindexMenuWrap MenuCursorpointer newsideMenu">
            <i :class="'font_family theicon '+ item.Icon"></i>
            <span
              v-if="item.Permissionurl==''"
              class="firstpri_name MenuText"
            >{{item.Permissionlabel}}</span>
            <router-link v-else :to="item.Permissionurl" :target="item.target">
              <span class="firstpri_name MenuText">{{item.Permissionlabel}}</span>
            </router-link>
            <span class="font_family right_arrow icon-icon_pagination_left1" style="display: none;"></span>
          </div>
          <div class="ScedindexMenuWrap" v-if="item.Children&&item.Children.length>0">
            <ul>
              <li class="newsideMenu" v-for="(child,cindex) in item.Children" :key="cindex">
                <router-link :to="item.Permissionurl+child.Permissionurl" :target="child.target">
                  <span class="sedMenuText MenuText">{{child.Permissionlabel}}</span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var that = null;
//import { menus } from "@/extend/js/newMenus.js";
export default {
  name: "leftBar",
  props: {},
  data() {
    return {
      menus: [],
      routerActive:"",
    };
  },
  created() {
   
  },
  mounted() {
    //this.getMenus();
    this.menus=this.$store.state.menus;
    if(!this.menus||this.menus.length==0){
      this.menus=this.$local.getMenus(this.menus); 
    }
   
    this.routerActive = this.$router.currentRoute.path
  },
  watch: {
    $route: function (to, from) {
      
    }
  },
  methods: {
    goDefault() {
      this.$router.push({
        path: "/course/list"
      });
    },
    getMenus() {
      //this.loading=true;
      // let loadingInstance1 =this.$loading({ fullscreen: true })     
      this.$api
        .get("manage/v1/ManagerToPermission/GetPermissions")
        .then(res => {
          console.log(res);
         // this.loading=false;
      //    loadingInstance1.close()
          this.menus = res.Data;
        });
    },
    active(item,child){
      var res=window.location.pathname;
      var url=item.Permissionurl;
      if(child)url+=child.Permissionurl;     
      return res==url;
    }
  },
  computed: {
    
  }
};
</script>
<style lang="less" scoped>
@import url("../../../../static/css/font.css");
.base_slide {
  top: 0;
  float: left;
  width: 180px;
  height: 100%;
  background-color: #fff;
  overflow-x: hidden;
  // overflow-y: auto;
  color: #fff;
  padding-top: 70px;
}
.base_logo_wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 70px;
  background-color: #273043;
  width: 180px;
}
.base_logo_wrap img {
  height: 27px;
  margin-left: 32px;
  margin-top: 20px;
}
.sidebarWrap {
  min-height: 100%;
  background-color: #273043;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.05);
}
.sidebarWrap .leftsidebarWrap {
  // padding-top: 20px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 100px;
}
.sidebarWrap .leftsidebarWrap .sideMenu_item {
  width: 100%;
  padding-bottom: 15px;
}
.firstindexMenuWrap {
  padding: 0 24px;
  height: 34px;
  line-height: 34px;
}
.MenuCursorpointer {
  cursor: pointer;
}
.firstindexMenuWrap .theicon {
  position: relative;
  top: -1px;
  float: left;
  font-size: 16px;
  display: block;
  vertical-align: middle;
  margin-right: 6px;
}
.sideMenu_item .firstpri_name {
  position: relative;
  font-weight: 500;
  font-size: 14px;
}
.sideMenu_item span {
  display: inline-block;
}
.sideMenu_item .ScedindexMenuWrap {
  width: 100%;
}
.ScedindexMenuWrap ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-right: 2px;
  padding-left: 20px;
}
.ScedindexMenuWrap ul li {
  width: 50%;
  margin-bottom: 2px;
  margin-top: 8px;
}
.sidebarWrap li {
  list-style: none;
}
.sidebarWrap li a {
  height: 22px;
  line-height: 22px;
  text-align: center;
  display: inline-block;
}
.sedMenuText {
  height: 22px;
  line-height: 22px;
  padding: 0 4px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  width: auto;
  white-space: nowrap;
  position: relative;
  border-radius: 2px;
}
.icon-icon_pagination_left1:before {
  content: "\e6b2";
}
.active {
  background: #4b82ff;
}
.router-link-active{
background: #4b82ff;
}
</style>
