<template lang="">
  <template v-for="(item, index) in data" :key="index + ''">
    <el-sub-menu v-if="item.children" :index="item.path" >
      <template #title>
<!--        <el-icon><component :is="item.meta.icon" @click="msg(item)"/></el-icon>-->
        <SvgIcon :name="item.meta.icon" color="#303133" size="20px" @click="msg(item)" />
        <span @click="msg(item)">{{ item.meta.title }}</span>
      </template>
      <Mymenu :data="item.children"></Mymenu>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path"  @click="msg(item)">
<!--      <el-icon><component :is="item.meta.icon" /></el-icon>-->
      <SvgIcon :name="item.meta.icon" color="#303133" size="20px" />
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
<script setup>
import SvgIcon from '@/components/Icons.vue';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// Props
    const props = defineProps({
      data: Array
    })

    // Router
    const router = useRouter()

    // Methods
    const msg = (i) => {
      console.log(i.path)
      router.push(i.path)
    }

</script>
<style lang="scss" scoped>
:deep(.el-menu) {
  background-color: transparent;
}
</style>
