import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import "../../css/style.css";
const nodeData = {

  title:'普通节点',
  content:'测试',
  answers:[
    { id: "1", text: "装好了" },
    { id: "2", text: "肯定" },
    { id: "3", text: "拒绝" },
    { id: "4", text: "否定" },
    { id: "5", text: "默认" }
  ]
}
class HtmlCard extends HtmlNode {
  // 重写HtmlNode的setHtml，来控制html节点内容。
  setHtml(rootEl) {
    const { properties } = this.props.model;
    properties.title = properties.title ? properties.title : nodeData.title;
    properties.content = properties.content ? properties.content : nodeData.content;
    properties.answers = properties.answers ? properties.answers : nodeData.answers
    const el = document.createElement("div");
    el.className = "html-card";
    let html = `
        <div class="html-card-header">${properties.title}</div>
        <div class="html-card-body">${properties.content}</div>
    `;
    let htmlLabel = `<div class="html-card-footer">`
    if (properties.answers) {
      properties.answers.forEach((ele) => {
        htmlLabel += `<div class="html-card-label">${ele.text}</div>`
      });
    }
    htmlLabel += `</div>`
    el.innerHTML = html+htmlLabel;
    rootEl.innerHTML = "";
    rootEl.appendChild(el);
    // console.log(rootEl)
    // console.log(rootEl.childNodes.length)
    // const cardEl = this.getCardEl();
    // rootEl.innerHtml = "";
    // rootEl.appendChild(cardEl);
    // if (rootEl.childNodes.length) {
    //   console.log(rootEl.childNodes)
    //   rootEl.parentNode.removeChild(rootEl);
    //   console.log(rootEl)
    //   console.log(cardEl)
    //   rootEl.appendChild(cardEl);
    // }
  }
  getCardEl() {
    const { properties } = this.props.model;
    console.log(properties)
    console.log(document.getElementsByClassName("html-card"))
    let el = document.createElement("div");
    el.className = "html-card";
    
    // el.setAttribute("onclick","setData()")
    const header = document.createElement("div");
    header.className = "html-card-header";
    // console.log(this.props.model)
    // console.log(properties)
    header.innerText = properties.title ? properties.title : nodeData.title;
    // properties.title = properties.title ? properties.title : nodeData.title;
    el.appendChild(header);

    const body = document.createElement("div");
    body.className = "html-card-body";
    body.innerText = properties.content
    body.innerText = properties.content ? properties.content : nodeData.content;
    properties.content = properties.content ? properties.content : nodeData.content;
    el.appendChild(body);

    const footer = document.createElement("div");
    footer.className = "html-card-footer";
    properties.answers = properties.answers ? properties.answers : nodeData.answers
    // properties.answers = properties.answers ? properties.answers : nodeData.answers
    
    if (properties.answers) {
      properties.answers.forEach((ele) => {
        const label = document.createElement("div");
        label.innerText = ele.text;
        label.className = "html-card-label";
        footer.appendChild(label);
      });
    }
    console.log(properties)
    el.appendChild(header);
    el.appendChild(body);
    el.appendChild(footer);
    // window.setData = () => {
    //   // alert("111")
    //   console.log(this.props)
    //   const { graphModel, model } = this.props;
    //   graphModel.eventCenter.emit("custom:button-click", model);
    // };
    return el;
  }
}
class HtmlCardModel extends HtmlNodeModel {
  addField(item) {
    console.log(this.properties)
    console.log(item)
    this.properties = {}
    this.properties.title = item.title
    this.properties.content = item.content
    this.properties.answers = item.answers
    // console.log(this.properties)
    // this.setAttributes();
    // // 为了保持节点顶部位置不变，在节点变化后，对节点进行一个位移,位移距离为添加高度的一半。
    // this.move(0, 24 / 2);
    // 更新节点连接边的path
    // this.incoming.edges.forEach((egde) => {
    //   // 调用自定义的更新方案
    //   egde.updatePathByAnchor();
    // });
    // this.outgoing.edges.forEach((edge) => {
    //   // 调用自定义的更新方案
    //   edge.updatePathByAnchor();
    // });
  }
  initNodeData(data) {
    super.initNodeData(data);
    // 禁止节点文本可以编辑
    this.text.editable = false;
    this.width = 240;
    // 定义连接规则，只允许出口节点连接入口节点
    const rule = {
      message: "只允许出口节点连接入口节点",
      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        console.log(sourceAnchor, targetAnchor)
        return (
          sourceAnchor.type === "sourceAnchor" &&
          targetAnchor.type === "targetAnchor"
        );
      }
    };
    this.sourceRules.push(rule);
  }
  setAttributes() {
    const {
      properties: { content }
    } = this;
    // 动态计算节点的高度
    // const rowSize = Math.ceil(content.length / 20);
    this.height = 100;
  }
  /**
   * 计算每个锚点的位置
   */
  getDefaultAnchor() {
    const { height, x, y, id,properties } = this;
    const anchorPositon = [];
    anchorPositon.push({
      x,
      y: y - height / 2,
      type: "targetAnchor",
      id: `${id}_targetAnchor`
    });
    if (properties.answers) {
      let preOffset = 5;
      properties.answers.forEach((answer) => {
        const text = answer.text;
        // 计算每个锚点的位置，锚点的位置一般相对节点中心点进行偏移
        const offsetX =
          preOffset + (this.getBytesLength(text) * 6 + 4) / 2 - this.width / 2;
        preOffset += this.getBytesLength(text) * 6 + 4 + 10;
        const offsetY = height / 2;
        anchorPositon.push({
          x: x + offsetX,
          y: y + offsetY,
          type: "sourceAnchor",
          id: answer.id
        });
      });
    }
    return anchorPositon;
  }
  getBytesLength(word) {
    if (!word) {
      return 0;
    }
    let totalLength = 0;
    for (let i = 0; i < word.length; i++) {
      const c = word.charCodeAt(i);
      if (word.match(/[A-Z]/)) {
        totalLength += 1.5;
      } else if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
        totalLength += 1.2;
      } else {
        totalLength += 2;
      }
    }
    return totalLength;
  }
}

export default {
  type: "generalNode",
  view: HtmlCard,
  model: HtmlCardModel
};