<template>
  <div>
    <template v-for="child in menuData">
      <el-submenu
        v-if="child.children.length > 0"
        :index="child.path"
        :key="child.path"
      >
        <template slot="title">
          <i
            v-if="child.iconCls"
            :class="child.iconCls ? child.iconCls : [fa, fa - file]"
          />
          <template v-else-if="child.iconImage">
            <el-image
              v-show="$route.path == child.path"
              :src="child.selectedIconImage"
            ></el-image>
            <el-image
              v-show="$route.path != child.path"
              :src="child.iconImage"
            ></el-image>
          </template>
          <span slot="title">{{ child.name }}</span>
        </template>
        <menu-tree :menuData="child.children" />
      </el-submenu>
      <el-menu-item
        v-else-if="!child.hidden"
        :index="child.path"
        :key="child.path"
        :class="path.includes(child.path) ? 'is-active' : ''"
      >
        <i
          v-if="child.iconCls"
          :class="child.iconCls ? child.iconCls : [fa, fa - file]"
        />
        <template v-else-if="child.iconImage">
          <el-image
            v-show="path.includes(child.path)"
            :src="child.selectedIconImage"
          ></el-image>
          <el-image
            v-show="!path.includes(child.path)"
            :src="child.iconImage"
          ></el-image>
        </template>
        <span slot="title">{{ child.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "menuTree",
  props: ["menuData", "path"],
  watch: {
    // 监听浏览器直接输入路由，将此路由添加到tabnavBox
    path: function (val) {},
  },
};
</script>

<style scoped></style>
