<!--
 * @Author: zhanyoulin<zhanyoulin456@163.com>
 * @Date: 2023-06-25 09:01:18
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 15:18:35
 * @Description: 
-->
<template>
  <template v-for="subItem in menuList" :key="subItem.menuId">
    <t-submenu v-if="subItem.children?.length" :value="subItem.menuSign" :title="subItem.menuName">
      <template #icon>
        <t-icon size="16" :name="subItem.icon" />
      </template>
      <SubMenu :menu-list="subItem.children" />
    </t-submenu>
    <t-menu-item v-else :value="subItem.menuSign" @click="handleClickMenu(subItem)" class="reset-menu-item">
      <!-- <template #icon>
        <t-icon :name="subItem.icon" />
      </template> -->
      <span>{{ subItem.menuName }}</span>
    </t-menu-item>
  </template>
</template>

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

defineProps<{ menuList: Menu.MenuOptions[] }>()

const router = useRouter()
const handleClickMenu = (subItem: Menu.MenuOptions) => {
  router.push({
    name: subItem.menuSign
  })
}
</script>

<style lang="less">
.t-sub-menu .t-sub-menu__title:hover {
  color: var(--t-menu-hover-text-color) !important;
  background-color: transparent !important;
}

.t-menu--collapse {
  .is-active {
    .t-sub-menu__title {
      color: #fff !important;
      background-color: var(--t-color-primary) !important;
    }
  }
}

.t-default-menu {
  .reset-menu-item {
    &.t-is-active {
      &::after {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 3px;
        height: 20px;
        border-radius: 1.5px;
        content: '';
        background-color: var(--primary);
      }
    }
  }
}
</style>
