// 补充导入 ElIcon 和 h 函数
import { defineComponent, computed, h, resolveComponent } from "vue";
import { ElIcon } from "element-plus"; // 导入 Element Plus 的 ElIcon 组件
import "./index.scss";
import type { CSSProperties, PropType } from "vue";

export default defineComponent({
    name: "SvgIcon",
    props: {
        // ... 保持原有 props 定义不变
        name: {
            type: String as PropType<string>,
            required: true
        },
        prefix: {
            type: String as PropType<string>,
            default: "icon"
        },
        color: {
            type: String as PropType<string>
        },
        size: {
            type: Number as PropType<number>
        },
        className: {
            type: String as PropType<string>
        }
    },
    setup(props) {
        // ... 保持原有 setup 逻辑不变
        const symbolId = computed(() => `#${props.prefix}-${props.name}`);
        const svgClass = computed(() => ["svg-icon", props.name && props.name.replace("el:", ""), props.className]);
        const fill = computed(() => (props.color ? props.color : "currentColor"));
        const style = computed<CSSProperties>(() => {
            const { size } = props;
            if (!size) return {};
            return {
                fontSize: `${size}px`
            };
        });
        return {
            symbolId,
            svgClass,
            fill,
            style
        };
    },
    render() {
        const { $attrs, symbolId, svgClass, fill, style } = this;
        if (this.name) {
            if (this.name.startsWith("el:")) {
                // 直接使用导入的 ElIcon 组件，而非全局组件
                return h(
                    ElIcon, // 这里使用导入的 ElIcon 组件
                    {
                        class: svgClass,
                        color: this.color,
                        size: this.size,
                        ...$attrs
                    },
                    {
                        default: () => h(resolveComponent(this.name.slice(3)))
                    }
                );
            } else {
                return h(
                    "svg",
                    {
                        class: svgClass,
                        style,
                        "aria-hidden": "true",
                        ...$attrs
                    },
                    [h("use", { "xlink:href": symbolId, fill })]
                );
            }
        }
        return null;
    }
});
