import {HtmlNode, HtmlNodeModel} from '@logicflow/core'

class DataView extends HtmlNode {
  setHtml(rootEl) {
    super.setHtml(rootEl);
    const {properties: {name = "实体对象", props = []}} = this.props.model
    const el = document.createElement('div');
    el.className = 'modelElement';
    el.innerHTML = `
    <b class="mar-b8">${name}</b>
    <div class="content pad-h8">
      <div> ${props.map(e => `<div><b>${e.prop}</b>  ${e.name}</div>`).join('')}</div>
    </div>`;
    rootEl.innerHTML = ''
    rootEl.appendChild(el);
    this.props.model.height = el.offsetHeight
  }
}

class DataModel extends HtmlNodeModel {
  setAttributes() {
    this.text.editable = false
    this.width = 160
  }
}

export class ModelElement {
  static pluginName = "modelElement";

  constructor({lf}) {
    this.lf = lf
    lf.register({type: "model", model: DataModel, view: DataView})
  }
}