<template>
    <ENode ref="nodeRef" :componentSchema="props.schema">
        <!-- childImmovable不可拖拽设计 start -->
        <template v-if="pluginManager.getComponentConfingByType(props.schema.type)?.childImmovable" #edit-node>
            <ENodeItem v-for="item in props.schema.children" :key="item.id" :schema="item" />
        </template>
        <!-- childImmovable不可拖拽设计 end -->

        <template v-else #edit-node>
            <!-- 使用本地变量而非直接绑定props -->
            <KEditNodeItem v-if="localChildren" :schemas="localChildren" @update:schemas="handleChildrenUpdate" />
        </template>
    </ENode>
</template>
<script lang="ts" setup>
import ENode from "../../../../node";
import { ComponentSchema, Designer } from "../../../../../types/epic-designer";
import KEditNodeItem from "./editNodeItem.vue";
import { useAttrs, provide, watch, ref, onUnmounted, computed, inject } from "vue";
import { pluginManager, type PageManager } from "@/components/EpicDesigner/utils";

const attrs = useAttrs();
const designer = inject("designer") as Designer;
const pageManager = inject("pageManager", {}) as PageManager;

const nodeRef = ref<HTMLBaseElement | null>(null);

provide("nodeAttrs", attrs);
defineOptions({
    name: "ENodeItem"
});
const props = defineProps<{
    schema: ComponentSchema;
    name?: string;
}>();

// 定义事件用于通知父组件更新
const emit = defineEmits<{
    (e: "update:schema", value: ComponentSchema): void;
}>();

// 创建本地副本存储children
const localChildren = ref<ComponentSchema[]>([]);

// 初始化本地副本
watch(
    () => props.schema.children,
    newChildren => {
        localChildren.value = newChildren ? [...newChildren] : [];
    },
    { immediate: true, deep: true }
);

// 处理子组件更新
const handleChildrenUpdate = (newChildren: ComponentSchema[]) => {
    localChildren.value = [...newChildren];
    // 通知父组件更新整个schema
    emit("update:schema", {
        ...props.schema,
        children: newChildren
    });
};

/**
 * 获取当前组件dom元素
 */
const getComponentElement = computed<HTMLBaseElement | null>(() => {
    const componentInstances = pageManager.componentInstances.value;
    const id = props.schema?.id;
    const componentConfing = pluginManager.getComponentConfingByType(props.schema?.type) ?? null;
    if (!id || !componentInstances?.[id]) {
        return null;
    }
    if (componentConfing?.defaultSchema.input && props.schema?.noFormItem !== true) {
        return componentInstances[id + "formItem"]?.$el;
    }
    const componentInstance = componentInstances[id];
    if (componentInstance?.$el?.nodeName === "#text") {
        return null;
    }
    return componentInstance?.$el;
});

// 监听选中dom元素变化
watch(
    () => getComponentElement.value,
    componentElement => {
        componentElement?.addEventListener("click", setCheckedNode, false);
        componentElement?.addEventListener("mouseover", setHoverNode, false);
        componentElement?.addEventListener("mouseout", clearHoverNode, false);
    }
);

onUnmounted(() => {
    getComponentElement.value?.removeEventListener("click", setCheckedNode, false);
    getComponentElement.value?.removeEventListener("mouseover", setHoverNode, false);
    getComponentElement.value?.removeEventListener("mouseout", clearHoverNode, false);
});

function setCheckedNode(event: Event) {
    event.stopPropagation();
    designer.setCheckedNode(props.schema);
}

function setHoverNode(event: Event) {
    if (props.schema.type === "page") return;
    event.stopPropagation();
    designer.setHoverNode(props.schema);
}

function clearHoverNode(event: Event) {
    event.stopPropagation();
    designer.setHoverNode(null);
}
</script>
