<template>
  <div class="main">
    <template v-for="menu in menuList" :key="menu.path">
      <!-- 没有子路由 -->
      <el-menu-item :index="menu.name" v-if="!menu.children" @click="headerCliek">
        <template #title>{{ menu.meta.title }}</template>
      </el-menu-item>

      <!-- 只有一个子路由 -->
      <el-menu-item
        :index="menu.children[0].name"
        v-if="menu.children && menu.children.length === 1"
        @click="headerCliek"
      >
        <template #title>{{ menu.children[0].meta.title }}</template>
      </el-menu-item>

      <!-- 多个子路由 -->
      <el-sub-menu :index="menu.name" v-if="menu.children && menu.children.length > 1">
        <template #title>{{ menu.meta.title }}</template>
        <doCreateMenu :menuList="menu.children" />
      </el-sub-menu>
    </template>
  </div>
</template>

<script lang="ts">
export default {
  name: 'doCreateMenu'
};
</script>

<script lang="ts" setup>
import { useRouter } from 'vue-router';

const router = useRouter();
function headerCliek(val: any) {
  router.push({
    name: val.index,
    query: { screen: val.index }
  });
}

let list = defineProps(['menuList']);
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  font-size: 12px;
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 60px; /* 设置水平菜单高度 */
}

/* 也可以设置垂直菜单项的高度 */
.el-menu {
  --el-menu-item-height: 40px; /* 默认菜单项高度 */
}

/* 针对子菜单 */
.el-sub-menu__title {
  height: 20px;
  line-height: 20px;
}

.el-menu-item {
  height: 50px;
  line-height: 50px;
}
</style>
