<template>
  <template v-for="item in data">
    <div
      :class="`sub-menu-item level-${level}`"
      :style="{ marginLeft: level * 20 + 'px' }"
    >
      <el-button
        :type="
          $route.matched.some((v) => v.path === item.path) ? 'success' : 'info'
        "
        @click="$router.push(item.redirect || item.path)"
        >{{ item.meta.title }}</el-button
      >
    </div>
    <template v-if="item.children?.length > 0">
      <subMenuItem :data="item.children" :level="level + 1" />
    </template>
  </template>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive } from 'vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
  data: {},
  level: { default: 0 },
})
const state: any = reactive({})
</script>

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