<template>
  <!--  <component v-if="icon !== undefined" :is="icon" :class="`${prefixCls}&#45;&#45;sider-menu-icon`" />-->
  <!-- 增加class，样式抽到mom-pro.less中 -->
  <h-icon class="navIcon" :name="myIcon" :color="iconColor"></h-icon>
  <!-- 这里是为了防止第一节不传图标，导致菜单收起时显示不正常 -->
</template>
<script>
import { computed, defineComponent } from 'vue';

// export interface LazyIconProps {
//   icon: string | Function | VNodeChild | JSX.Element;
// }

export default defineComponent({
  name: 'ALazyIcon',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro',
    },
    icon: {
      // type: [String, Function, Object] as PropType<string|Function|VNodeChild|JSX.Element>,
      type: [String, Function, Object],
      default: undefined,
    },
    iconColor: {
      type: String,
      default: undefined,
    },
  },
  setup(props) {
    const myIcon = computed(() => {
      return props.icon.replace('.svg', '');
      // return props.icon;
    });
    // if (typeof props.icon === 'string' && props.icon !== '') {
    //   if (isUrl(props.icon) || isImg(props.icon)) {
    //     return <img src={props.icon} alt="icon" class={`${props.prefixCls}-sider-menu-icon`} />
    //   }
    //   if (props.icon.startsWith('icon-')) {
    //     return <IconFont type={props.icon}  />
    //   }
    // }
    // console.log('unref(props.icon)', unref(props.icon))
    // if (isVNode(unref(props.icon))) {
    //   return props.icon
    // }
    // const ALazyIcon = resolveComponent(`${props.icon}`)
    // return ALazyIcon && ALazyIcon
    // return ALazyIcon && (() => (
    //   <ALazyIcon />
    // )) || null
    return {
      myIcon,
    };
  },
});
</script>
