<template>
  <div class="menuTree">
    <label v-for="item in data" :key="item.path">
      <el-submenu v-if="item.children && item.children.length>0" :index="item.path">
        <template slot="title">
          <i v-if="item.icon" :class="item.icon" class="iconfont"></i>
          <span class="menu-text">{{ item.title }}</span>
        </template>
        <menutree :data="item.children" :active="active" :index="item.path" />
      </el-submenu>
      <el-menu-item v-else :index="item.path" :disabled="item.path?false:true">
        <i v-if="item.icon" :class="item.icon" class="iconfont" ></i>
        <span slot="title">
          <span class="menu-text">{{ item.title }}</span>
          <span v-if="(item.path) === active" class="menu-bg" />
        </span>
      </el-menu-item>
    </label>
  </div>
</template>

<script>
    export default {
        name: 'Menutree',
        props: {
            data: {
                type: Array,
                required: true
            },
            active: {
                type: String,
                default: ''
            }
        },
        methods: {
            getPath(path) {
                if (typeof path === 'undefined') {
                    return
                }
                const index = path.indexOf('.')
                return path.substring(0, index)
            }
        }
    }
</script>

<style lang="scss" scoped>
  .menuTree {
    /deep/.el-menu-item {
      position: relative;
      &:hover {
        /*background-color: #192122 !important;*/
      }

      .menu-bg {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        /*background-color: #5da1ff;*/
        opacity: 0.1;
        left: 0;
        top: 0;
      }
    }
    .is-active > .el-submenu__title {
      /*color: #2b77ff;*/
    }
    .iconfont{
      font-size: 18px;
    }
    .menu-text {
      margin-left: 8px;
      font-size: 14px;
    }
  }
  /deep/ {
      .el-tooltip {
        padding: 20px 20px !important;
      }
  }
</style>
