// 导入 HtmlNode 及其模型，为后续继承做准备
import { HtmlNode, HtmlNodeModel } from '@logicflow/core';
// 导入 Vue 相关方法，用于渲染组件
import { createApp, h } from 'vue';
import ElementPlus from 'element-plus'
// 导入 Vue 组件
import CustomFlow from './customFlow.vue';

/**
 * 定义一个 元素的 HTML 节点类，继承自 HtmlNode
 * 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
 */
class CustomFlowHtmlNode extends HtmlNode {
  isMounted; // 标记组件是否已挂载
  r; // 渲染函数
  app; // Vue 应用实例

  /**
   * 构造函数
   * @param props 传递给节点的属性，包括模型、图模型等
   */
  constructor(props) {
    super(props);
    this.isMounted = false;
    // 创建 元素的渲染函数
    this.r = h(CustomFlow, {
      model: props.model,
      graphModel: props.graphModel,
      properties: {
        ...props.model.getProperties(),
      },
      text: props.model.text.value,
    });

    // 创建 Vue 应用实例，并指定渲染函数
    this.app = createApp({
      render: () => this.r
    });
  }

  /**
   * 将 HTML 内容设置到指定的根元素上
   * @param rootEl 根元素
   */
  setHtml(rootEl) {
    if (!this.isMounted) {
      this.isMounted = true;
      const node = document.createElement('div');
      node.style.width = '100%'
      node.style.height = '100%'
      rootEl.appendChild(node);
      this.app.use(ElementPlus) // 关键：单独注册ElementPlus
      this.app.mount(node);
    } else {
      this.r.component.props.properties = this.props.model.getProperties();
    }
  }

  /**
   * 获取节点文本内容
   * 对于元素，返回 null，因为其内容由特定组件渲染
   * @returns {null}
   */
  getText() {
    return null;
  }
}

/**
 * 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
 * 该类主要设置节点的属性和样式
 */
class CustomFlowHtmlModel extends HtmlNodeModel {
  initNodeData(data) {
    super.initNodeData(data);
    // 仅允许从底部锚点连出
    this.sourceRules.push({
      message: '只能从输出锚点连线',
      validate: (sourceNode, targetNode, sourceAnchor) => 
        // sourceAnchor.name === 'right'
      sourceAnchor.properties.connectionType === 'source'
    });
    
    // 仅允许连接到顶部锚点
    this.targetRules.push({
      message: '只能连接到输入锚点',
      validate: (sourceNode, targetNode, targetAnchor) => 
        // targetAnchor.name === 'left'
      targetAnchor.properties.connectionType === 'target'
    });
  }
  
  /**
   * 设置节点属性
   * 包括宽度、高度、文本编辑属性等
   */
  setAttributes() {
    this.width = 200;
    this.height = 100;
    this.text.editable = false;
  }

  // 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
  getDefaultAnchor() {
     let _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
        return [
            // { x: x, y: y - height / 2, id: "".concat(this.id, "_0") },
            { x: x + width / 2, y: y, name: 'left', id: "".concat(this.id, "_1"), properties: { connectionType: 'target' } },
            // { x: x, y: y + height / 2, id: "".concat(this.id, "_2") },
            { x: x - width / 2, y: y, name: 'right', id: "".concat(this.id, "_3"), properties: { connectionType: 'source' } },
        ];
  }

  /**
   * 获取节点轮廓样式
   * 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
   * @returns {object} 节点轮廓样式
   */
  getOutlineStyle() {
    const style = super.getOutlineStyle();
    style.stroke = 'none';
    // style.hover.stroke = 'none';
    return style;
  }
}

// 导出方法注册
export function registerCustomNode(lf) {
  lf.register({
    type: "CustomNode",
    view: CustomFlowHtmlNode,
    model: CustomFlowHtmlModel
  })
}