<template>
  <template v-for="item in menuList">
    <el-sub-menu v-if="item.childList?.length >0" :key="item.O_PATH  + item.NAME"  :index="item.O_PATH + item.NAME">
      <template #title>
<!--        <el-icon >-->
<!--          <edit />-->
<!--        </el-icon>-->
        <span :class="`layer-${item.layer}-title`" >{{item.NAME}}</span>
      </template>
       <menu-i :menu-list="item.childList"/>
    </el-sub-menu>
    <el-menu-item :class="`layer-${item.layer}-title`" @click="homeCountAdd" v-else :key="item.O_PATH  + item.NAME" :route="{name:item.O_PATH || 'NotFound'}" :index="item.O_PATH " >
      <template #title>
        <div >{{item.NAME}}</div>
      </template>
    </el-menu-item>
  </template>
</template>

<script>
import {Edit} from "@element-plus/icons-vue";
import {useRootStore} from "@/stores/useStore";

export default {
  name: "MenuI",
  components: {Edit},
  props:{
    menuList:{

    }
  },
  setup() {
    const store= useRootStore()
    function homeCountAdd() {
      store.toHomeCounter++
    }
    return {
      homeCountAdd
    }
  }
}
</script>

<style scoped lang="scss">

</style>
