<template>
  <div>
    <template v-for="menu in this.menuData">
      <el-submenu :key="menu.menuName" :index="`${menu.id}`" v-if="menu.children && menu.children.length > 0">
        <template slot="title">
          <div class="title">
            {{ menu.menuName }}
          </div>
        </template>
        <menu-tree :menuData="menu.children" @change="changeRouterName"></menu-tree>
      </el-submenu>
      <el-menu-item :key="menu.menuName + ''" :index="menu.menuUrl" @click="goPage(menu)" v-else>
        <div slot="title" class="title">
          {{ menu.menuName }}
        </div>
      </el-menu-item>
    </template>
  </div>
</template>
<script>

export default {
  props: ["menuData"],
  name: "MenuTree",
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    goPage(item) {
      localStorage.setItem('menuName', item.menuName),
      localStorage.setItem('activeId', item.menuUrl)
      this.$emit('change', item.menuUrl)
      this.$router.push(item.menuUrl);
    },
    changeRouterName(val) {
      this.$emit('change', val)
    }
  },
};
</script>
<style>
.el-menu--inline {
  background: #f6f6f8;
}
</style>
<style lang="stylus" scoped>
.header-title {
  display: block;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title {
  display: flex;
  align-items: center;
  // img {
  //   margin-right: 10px;
  // }
}
.el-menu-item {
  height: 40px;
  min-width: 0px;
}
</style>
