<template functional>
    <el-submenu :index="props.data.id.toString()">
    <template slot="title">
       <i :class="props.data.icon"></i>
       <span>{{props.data.title}}</span>
     </template>
     <template v-for="item in props.data.child">
       <app-link :to="item.apiUrl" v-if="item.child.length===0" :key="item.id">
        <el-menu-item class="subitem" :index="item.id.toString()">
           <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
         </el-menu-item>
      </app-link>
       <!-- <router-link :to="item.apiUrl" :key="item.id" v-if="item.child.length===0">
         <el-menu-item class="subitem" :index="item.id.toString()">
           <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
         </el-menu-item>
      </router-link> -->
       <sub-menu v-else :data="item" :key="item.id"></sub-menu>
    </template>
  </el-submenu>
 </template>

<script>
import AppLink from './Link'
export default {
   name: "submenu",
   components: { AppLink },
   props: {
     data: [Array, Object]
   }
 };
 </script>
 
<style lang="scss" scoped>
 .el-submenu {
   .el-menu-item {
     padding: 0;
   }
 }
</style>