<template>
  <div>
    <el-submenu
      :index="menu.orders.toString()"
      v-if="menu.child && menu.child.length > 0"
    >
      <template slot="title">
        <i
          class="menuIcon"
          :class="'iconfont ' + menu.icon"
          v-if="!!menu.icon"
        ></i>
        <span v-text="menu.name"></span>
      </template>
      <leftMenu
        :menu="subMenu"
        v-for="subMenu in menu.child"
        :key="subMenu.id"
      ></leftMenu>
    </el-submenu>
    <el-menu-item
      :index="menu.url"
      v-if="!menu.child || menu.child.length == 0"
    >
      <i
        class="menuIcon"
        :class="'iconfont ' + menu.icon"
        v-if="!!menu.icon"
      ></i>
      <span slot="title" v-text="menu.name"></span>
    </el-menu-item>
  </div>
</template>
<script>
export default {
  name: "leftMenu",
  props: ["menu"],
  data() {
    return {};
  },
  computed: {},
  methods: {},
  created() {},

  mounted() {},
  components: {},
};
</script>

<style scoped>
.menuIcon {
  margin-right: 6px;
  color: #fff;
  width: 16px;
  height:16px;
}
</style>

