<template>
  <div>
    <el-submenu
      :index="menu.orders.toString()"
      v-if="menu.children && menu.children.length > 0"
    >
      <!-- <template slot="title">
        <i
          class="menuIcon"
          :class="'leftMenuIconfont ' + menu.icon"
          v-if="!!menu.icon"
        ></i>
        <span v-text="menu.name"></span>
      </template> -->
      <leftMenu
        :menu="subMenu"
        v-for="subMenu in menu.children"
        :key="subMenu.id"
      ></leftMenu>
    </el-submenu>
    <el-menu-item
      :index="menu.path"
      v-if="!menu.children || menu.children.length == 0"
    >
      <!-- <i
        class="menuIcon"
        :class="'leftMenuIconfont ' + menu.icon"
        v-if="!!menu.icon"
      ></i> -->
      <img :src="menu.state == 'normal' ? menu.normalImg : menu.activeImg" />
      <span
        slot="title"
        v-text="menu.name"
        style="margin-left: 6px"
        :style="{
          color: menu.state == 'normal' ? 'white' : 'rgb(255, 208, 75)',
        }"
      ></span>
    </el-menu-item>
  </div>
</template>
<script>
export default {
  name: "leftMenu",
  props: ["menu"],
  data() {
    return {
      routerPath: "",
    };
  },
  computed: {},
  methods: {
  },
  created() {
  },

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

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

