<template>
  <div class="jg-menu-item">
    <!-- 这里的listAll用于接收父组件传递进来的菜单列表 -->
    <template v-for="item in menuList">
      <!-- 有child就显示child的下拉型菜单，有小箭头 -->
      <el-submenu v-if="item.children && item.children.length !== 0" :index="getIndex(item.path)" :key="item.index">
        <template slot="title">
          <i :class="item.meta.icon"/>
          <span slot="title">{{item.meta.title}}</span>
        </template>
        <!-- 再次调用自身组件，传入子集，进行循环递归调用 -->
        <jg-menu v-if="item.children && item.children.length > 0" :menu-list="item.children"/>
      </el-submenu>
      <!-- 没有children,就显示单个目录，没有小箭头 -->
      <el-menu-item v-else :index="getIndex(item.path)" :key="item.index">
        <i :class="item.meta.icon"/>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>

export default {
  name: 'JgMenu',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    getIndex (path) {
      return path === '/home' ? '/' : path
    },
  },
}
</script>

<style lang="less" scoped>
  .jg-menu-item {

    .el-menu-item {
      border-radius: 7px;
      box-shadow: 0.2rem 0.2rem 0.2rem #aaa7a7, -0.1rem -0.1rem 0.2rem #FFFFFF;
      margin: 16px 8px;
      padding: 0 20px!important;
      width: 200px;
      font-size: 18px;
    }

    .el-submenu {
      border-radius: 7px;
      box-shadow: 0.2rem 0.2rem 0.2rem #aaa7a7, -0.1rem -0.1rem 0.2rem #FFFFFF;
      margin: 16px 8px;
      width: 200px;
    }

    /deep/ .el-submenu__title {
      font-size: 18px;
      color: inherit;
      transition: none;
    }

    /deep/ .el-submenu__title:hover {
      background-color: inherit !important;
      border-radius: 7px;
    }

    /deep/ .el-submenu .el-menu {
      border-radius: 5px;
    }

    .el-submenu .el-menu-item {
      height: 50px;
      line-height: 50px;
      padding: 0 45px;
      min-width: inherit;
      width: 180px;
    }

    .is-active {
      color: #FFFFFF;
      background-color: #A20D13;
      // box-shadow: inset 0.1rem 0.1rem 0.1rem #c8d0e7, inset -0.1rem -0.1rem 0.2rem #FFFFFF;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6e090c, inset -0.2rem -0.2rem 0.5rem #c71016;

      /deep/ .el-submenu__title:hover {
        background-color: inherit !important;
        border-radius: 7px;
      }
    }
  }
</style>
