<template>
  <el-menu v-if="menuIndex !== undefined" :default-active="menuIndex"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal">
    <template v-for="(item, i) in menu">
      <el-menu-item :key="i" v-if="item.children.length === 0" :index="(i+1)+''" @click="menuC(item.url)">{{item.name}}</el-menu-item>
      <menuZj :key="i" v-else :obj="item" :fIndex="(i+1)+''"></menuZj>
    </template>
  </el-menu>
  <el-submenu v-else :index="fIndex" :popper-append-to-body="false">
    <template slot="title">{{obj.name}}</template>
    <template v-for="(item, i) in obj.children">
      <el-menu-item :key="i" v-if="item.children.length === 0" :index="fIndex+'-'+(i+1)" @click="menuC(item.url)">{{item.name}}</el-menu-item>
      <menuZj :key="i" v-else :obj="item" :fIndex="fIndex+'-'+(i+1)"></menuZj>
    </template>
  </el-submenu>
</template>

<script>

export default {
  name: "menuZj",
  data() {
    return {
    }
  },
  props:{
    menuIndex: String, // 菜单默认选中项
    menu: Array, // 菜单数据
    obj: Object, // 菜单对象
    fIndex: String, // 父元素的index值
  },
  created() {
    this.init();
  },
  methods: {

    //初始化
    init() {
      
    },
    // 菜单点击跳转
    menuC(url) {
      this.$router.push({
        path: url
      });
    }
  }
}

</script>

<style lang="scss" scoped>
</style>
