<template>
  <el-submenu v-if="list.children" :index="list[keyField]">
    <template slot="title">
      <i :class="list.ICON"></i>
      <span>{{ list[titleField] }}</span>
    </template>
    <template v-for="list in list.children" class="aaa">
      <dg-sub-menu
        :list="list"
        :key-field="keyField"
        :pkey-field="pkeyField"
        :title-field="titleField"
        :route-field="routeField"
      ></dg-sub-menu>
    </template>
  </el-submenu>
  <el-menu-item v-else :index="list[keyField]"
    ><i :class="list.ICON"></i><span slot="title">{{ list[titleField] }}</span></el-menu-item
  >
</template>

<script>
import 'font-awesome/css/font-awesome.css'
export default {
  name: 'DgSubMenu',
  props: {
    list: {
      type: Object,
      default: () => {},
    },
    keyField: {
      type: String,
      default: () => '',
    },
    pkeyField: {
      type: String,
      default: () => '',
    },
    titleField: {
      type: String,
      default: () => '',
    },
    routeField: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      menuChildrenList: [],
    }
  },
}
</script>
