<template>
  <el-aside width="200px">
    <el-menu
      class="aside-menu"
      style="height:100%"
      router
      :default-active="$route.query.tabCode">
      <template v-for="item in menuList">
        <el-menu-item v-if="item.children.length === 0" :route="{path: item.uri, query: {tabCode:item.code}}" :key="item.code" :index="item.code"><i class="iconfont" style="margin-right:6px" :class="item.iconUrl"></i>{{item.menuName}}</el-menu-item>
        <el-submenu v-else :key="item.code" :index="item.uri">
          <template slot="title"><i class="iconfont" style="margin-right:6px" :class="item.iconUrl"></i>{{item.menuName}}</template>
          <template v-for="item2 in item.children">
            <el-menu-item v-if="item2.children.length === 0" :route="{path: item2.uri, query: {tabCode:item2.code}}" :key="item2.code" :index="item2.code">{{item2.menuName}}</el-menu-item>
            <el-submenu v-else :key="item2.code" :index="item.uri">
              <template slot="title">{{item2.menuName}}</template>
              <el-menu-item v-for="item3 in item2.children" :route="{path: item3.uri, query: {tabCode:item3.code}}" :key="item3.code" :index="item3.code">{{item3.menuName}}</el-menu-item>
            </el-submenu>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: 'base-aside',
  props: {
    menuList: {
      type: Array,
      required: true,
    }
  },
};
</script>
<style lang="scss" scoped>
.aside-menu /deep/ {
  background-color: #F5F7FA94;
  border-right: 1px solid #E4E7ED !important;
  .el-submenu__title {
    height: 36px;
    line-height: 36px;
    padding: 0 30px;
    color: #606266;
  }
  .el-menu-item {
    position: relative;
    height: 36px;
    line-height: 36px;
    padding: 0 30px;
    color: #606266;
    &.is-active {
      background-color: #F0F5FF ;
      color: #1890ff;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 1px;
        width: 2px;
        bottom: 1px;
        background-color: #1890ff;
      }
    }
  }
  .el-menu-item {
    background-color: #F5F7FA;
  }
}
</style>
