<template>
  <div v-if="!menu.meta || !menu.meta.hidden" class="sidebar-item">
    <el-sub-menu
      v-if="menu?.children && menu?.children.length > 0"
      :index="menu.path"
      popper-class="sidebar-container-popper"
    >
      <template #title>
        <svg-icon 
          v-if="menu.meta && menu.meta.icon" 
          :icon-class="menuIcon" 
          class="sidebar-icon" 
        />
        <span>{{ menu.meta?.title }}</span>
      </template>
      <sidebar-item
        v-for="(child, index) in menu?.children"
        :key="index"
        :menu="child"
        :activeMenu="activeMenu"
      />
    </el-sub-menu>
    <app-link
      v-else-if="menu.meta && !menu.meta.hidden"
      :to="{ path: menu.path }"
    >
      <el-menu-item
        :index="menu.path"
        popper-class="sidebar-popper"
      >
        <template #title>
          <svg-icon 
            v-if="menu.meta && menu.meta.icon" 
            :icon-class="menuIcon" 
            class="sidebar-icon" 
          />
          <span v-if="menu.meta && menu.meta.title">{{ menu.meta.title }}</span>
        </template>
      </el-menu-item>
    </app-link>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { type RouteRecordRaw } from 'vue-router'
import AppLink from '@/components/app-link/index.vue'
import SvgIcon from '@/components/svg-icon/index.vue'

defineOptions({ name: 'LegacySidebarItem', inheritAttrs: false })

const props = defineProps<{
  menu: RouteRecordRaw
  activeMenu: any
}>()

const menuIcon = computed(() => {
  if (props.activeMenu === props.menu.path) {
    return props.menu.meta?.iconActive || props.menu?.meta?.icon
  } else {
    return props.menu?.meta?.icon
  }
})
</script>

<style scoped>
.sidebar-item {
  .sidebar-icon {
    font-size: 20px;
    margin-top: -2px;
    margin-right: 8px;
  }
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  padding: 13px 12px 13px 16px !important;
  font-weight: 500;
  border-radius: 4px;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background: none;
  color: var(--el-color-primary);
}

:deep(.el-menu-item.is-active) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

:deep(.el-sub-menu .el-menu-item) {
  padding-left: 43px !important;
}
</style>