<script setup lang="ts" name="SubMenu">
import { useRouter } from 'vue-router'
import { icons } from '@/utils/common'

const router = useRouter()

defineProps<{ menuList: Menu.MenuOptions[] }>()
const handleClickMenu = (route: Menu.MenuOptions) => {
  router.push(route.path)
}

const isUnicode = (val: string | undefined) => {
  if (!val) return false

  return !/ue/g.test(val)
}
</script>

<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-sub-menu v-if="subItem.Children && subItem.Children.length > 0" :index="subItem.path">
      <template #title>
        <el-icon v-if="isUnicode(subItem.meta.icon)">
          <component :is="subItem.meta.icon"></component>
        </el-icon>
        <i v-else class="iconfont el-icon">{{ icons[subItem.meta.icon] }}</i>
        <span>{{ subItem.meta.title }}</span>
      </template>
      <SubMenu :menuList="subItem.Children" />
    </el-sub-menu>
    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
      <el-icon v-if="isUnicode(subItem.meta.icon)">
        <component :is="subItem.meta.icon"></component>
      </el-icon>
      <i v-else class="iconfont el-icon">{{ icons[subItem.meta.icon] }}</i>
      <template #title>
        <span>{{ subItem.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<style scoped>
.iconfont {
  margin-right: 5px;
  width: var(--el-menu-icon-width);
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
</style>
