<template>
  <el-menu-item :index="menuItem?.composingKey" :style="itemStyle()">
    <sa-icon class="sa-m-r-8" size="16" :icon="menuItem?.logo" />
    <template #title>
      <span class="sa-line-1" :style="textTruncateConfig">{{ getMenuItemText(menuItem) }}</span>
    </template>
  </el-menu-item>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
import { getBreadcrumbText } from '@/utils/navigationI18n';
import { useNavigationConfig } from '@/hooks/useNavigationConfig';

const { t } = useI18n();
const { textTruncateConfig, subMenuItemStyle } = useNavigationConfig();
const props = defineProps(['menuItem', 'level']);

// 获取菜单项的显示文本（国际化）
function getMenuItemText(menuItem) {
  if (!menuItem) return '';

  // 如果菜单项已经被国际化处理过，直接使用name或label
  if (menuItem.name !== menuItem.label || !menuItem.composingKey) {
    return menuItem.name || menuItem.label || '';
  }

  // 否则使用国际化工具函数获取翻译文本
  return getBreadcrumbText(menuItem.composingKey, t) || menuItem.label || menuItem.name || '';
}

function itemStyle() {
  if (props.level) {
    // 合并导航配置和原有样式
    const baseStyle = {
      height: '32px',
      'line-height': '32px',
      'padding-left': 16 + props.level * 8 + 'px',
      'font-size': '12px',
      color: 'var(--sa-font)',
    };

    // 应用子菜单样式配置
    return {
      ...baseStyle,
      ...subMenuItemStyle.value,
      'padding-left': baseStyle['padding-left'], // 保持原有的层级缩进逻辑
    };
  }
}
</script>
