/**
 * @author: clay
 * @data: 2019/07/16
 * @description: edit mode: 悬浮交互
 */
// 用来获取调用此js的vue组件实例（this）
let vm = null;
let hourItem = null;
const sendThis = (topo) => {
  vm = topo;
};
export default {
  sendThis, // 暴露函数
  name: "hover-event-edit",
  options: {
    getEvents() {
      return {
        "node:mouseover": "onNodeHover",
        // "node:mouseout": "onNodeOut",
        // "mouseleave":"onNodeLeave",
      };
    },
    onNodeHover(event) {
      let graph = vm.getGraph();
      let hoverNode = event.item;
      const name = event.shape.get("name");//todo ??
      const item = event.item;
      if (name && name.startsWith("item")) {
        graph.updateItem(item, {//更新元素，包括更新数据、样式等
          selectedIndex: Number(name.split("-")[1])
        });
      } else {
        graph.updateItem(item, {
          selectedIndex: NaN
        });
      }
      if (name && name.startsWith("marker")) {
        hoverNode.setState("hover", true, graph);
        hourItem=hoverNode;
      }else {
        if (hourItem!=null){
          hourItem.setState("hover", false)
        }
      }
    },
    // onNodeOut(event) {
    //   console.log('移出节点')
      // const name = event.shape.get("name");
      // let hoverNode = event.item;
      // console.log('name',name)
      // if (name && name.startsWith("marker")) {
      //   hoverNode.setState("hover", false);
      // }
      // if (hourItem!=null){
      //   hourItem.setState("hover", false)
      // }
      // hoverNode.setState("hover", false);
    // },
    // onNodeLeave(event) {
    //   console.log('移出节点2')
    //   if (hourItem!=null){
    //     hourItem.setState("hover", false)
    //   }
    // }
  }
};