<template>
  <div v-if="!menuInfo.hideMenu">
  <a-sub-menu :key="menuInfo.menuId" v-bind="$props" v-on="$listeners">

        <span slot="title">
          <a-icon v-if="menuInfo.icon" :type="menuInfo.icon" /><span>
            <a-tooltip placement="right" v-if="menuInfo.icon" >
                  <template slot="title">
                    <span > {{  $t(menuInfo.title)   }}  </span>
                  </template>
                  <span> {{  $t(menuInfo.title)  }}  </span>
            </a-tooltip>
          </span>
        </span>
        <template v-for="item in menuInfo.childrenMenu">
            <a-menu-item v-if="!item.hideMenu &&!item.childrenMenu" :key="item.menuId">
              <a-tooltip placement="right" v-if="menuInfo.icon" >
                  <template slot="title">
                    <span > {{   $t(item.title)  }}  </span>
                  </template>
                  <app-link :to="item"> {{ $t(item.title)}} </app-link>
            </a-tooltip>
        
            </a-menu-item>
            <sub-menu v-else :key="item.menuId" :menu-info="item " />
        </template>
  </a-sub-menu>
  </div>
</template>



<script>
/**
 *  前端取component 路径为 请求path
 */
import { Menu } from 'ant-design-vue';
import AppLink from "./Link.vue";
export default {
  components: {
    "app-link": AppLink,
  },
   name: 'SubMenu',
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {

  },
};
</script>