<script>
export default {
  name: "MenuItem",
  functional: true,
  props: {
    icon: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  render(h, context) {
    const { icon, title } = context.props;
    const vnodes = [];

    if (icon) {
      // 处理 Element UI (Vue 2) 的图标格式：el:tools → <i class="el-icon-tools"></i>
      if (icon.startsWith("el:")) {
        const iconClass = icon.replace("el:", "el-icon-"); // 替换前缀为 el-icon-
        vnodes.push(h("i", { class: iconClass }));
      }
      // 处理 Element Plus (Vue 3) 的图标格式：ep:tools → <svg-icon icon-class="ep:tools" />
      else if (icon.startsWith("ep:")) {
        const iconClass = icon.replace("ep:", "el-icon-"); // 替换前缀为 el-icon-
        vnodes.push(h("i", { class: iconClass }));
      }
      // 兼容无前缀的旧图标（如原来的 svg-icon 用法）
      else {
        vnodes.push(
          h("svg-icon", {
            props: { iconClass: icon },
            class: icon,
          })
        );
      }
    }

    if (title) {
      // 标题处理逻辑保持不变
      const titleNode = h(
        "span",
        { slot: "title", attrs: title.length > 5 ? { title } : {} },
        title
      );
      vnodes.push(titleNode);
    }

    return vnodes;
  },
};
</script>
