<template>
  <div class="siderBar">
    <el-row class="tac">
      <el-col>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <template v-for="(item,index) in menu">
            <el-submenu v-if="item.children" :index="String(index)" :key="index">
              <template slot="title">
                <span>{{item.MenuName}}</span>
              </template>
              <el-menu-item-group>
                <template v-for="(subItem,subIndex) in item.children">
                  <el-submenu v-if="subItem.children" :index="`${index}-${subIndex}`" :key="subIndex">
                    <template slot="title">
                      <span>{{subItem.MenuName}}</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item v-for="(it,inx) in subItem.children" :index="`${index}-${subIndex}-${inx}`" :key="inx">
                        <router-link :to="{name:it.Url,query:{}}" active-class="active">{{it.MenuName}}</router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-menu-item v-else :index="`${index}-${subIndex}`" :key="subIndex">
                    <router-link :to="{name:subItem.Url,query:{}}" active-class="active">{{subItem.MenuName}}</router-link>
                  </el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-else :index="String(index)" :key="index">
              <router-link :to="{name:item.Url,query:{}}" active-class="active">{{item.MenuName}}</router-link>
            </el-menu-item>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['menu'],
  data () {
    return {

    }
  },
  mounted () {
    this.$nextTick(function () {
      console.log(this.menu)
    })
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
