/*
 * Author: 黎永顺
 * name: 薪资项目-拓扑图
 * Description:
 * Date: 2023/10/19
 */
import React, { FunctionComponent, useEffect, useRef } from "react";
// @ts-ignore
import G6 from "@antv/g6";
import API from "@/api";
// @ts-ignore
import uuidV4 from "uuid/v4";
import "./registerShape";

interface OwnProps {
}

type Props = OwnProps;

const index: FunctionComponent<Props> = (props) => {
  const ref: any = useRef(null);
  let graph: any = null;
  useEffect(() => {
    initG6().then(r => {
    });
    return () => {
    };
  }, []);
  // 1688699208883
  const initG6 = async () => {
    const { data: { data: result } }: any = await API.CalculateService.getSalarysobItemTopology({
      salarySobId: "31",
      salaryItemId: "1688699208872"
    });
    const dataSource = {
      id: result.salaryItemId.toString(), label: result.salaryItemName || "",
      subLabel: result.result || "", formula: result.formula, level: 0,
      children: !_.isEmpty(result.children) ? traverse(result.children) : []
    };
    const width = ref.current.scrollWidth;
    const height = ref.current.scrollHeight;
    // @ts-ignore
    G6.Util.traverseTree(dataSource, (subtree: any) => {
      // if (subtree.level === undefined) subtree.level = 0;
      // subtree.children?.forEach((child: any) => child.level = subtree.level + 1);
      switch (subtree.level) {
        case 0:
          subtree.type = "root";
          break;
        case 1:
          subtree.type = "level1node";
          // subtree.collapsed = true;
          break;
        default:
          subtree.type = "othernode";
      }
    });
    if (!graph) {
      graph = new G6.TreeGraph({
        // fitCenter: true, linkCenter: true,
        container: ref.current, width, height, fitView: true,
        layout: {
          // LR
          type: "compactBox", direction: "LR", getHGap: function getVGap() {
            return 5;
          }
        },
        defaultEdge:
        //   {
        //   type: "cubic-vertical",
        //   style: {
        //     stroke: "#A3B1BF"
        //   }
        // },
          {
            type: "round-poly",
            sourceAnchor: 0,
            targetAnchor: 1,
            style: {
              radius: 8,
              stroke: "rgb(19, 33, 92)"
            }
          },
        defaultNode: {
          style: {
            cursor: "pointer"
          },
          // anchorPoints: [
          //   [0.5, 0],
          //   [0.5, 1]
          // ]
          anchorPoints: [
            [0.9, 0.5],
            [0, 0.5]
          ]
        },
        nodeStateStyles: {
          hover: {
            fill: "#fff",
            shadowBlur: 30,
            shadowColor: "#ddd"
          },
          operatorhover: {
            "operator-box": {
              opacity: 1
            }
          }
        },
        modes: {
          default: ["zoom-canvas", "drag-canvas", "collapse-expand", "drag-node"]
        }
      });
    }
    graph.data(dataSource);
    graph.render();
    graph.on("node:mouseenter", (e: any) => {
      if (e.target.get("name")?.includes("operator")) {
        graph.setItemState(e.item, "operatorhover", true);
      } else {
        graph.setItemState(e.item, "hover", true);
      }
    });
    graph.on("node:mouseleave", (e: any) => {
      graph.setItemState(e.item, "operatorhover", false);
      graph.setItemState(e.item, "hover", false);
    });
    graph.on("node:click", (e: any) => {
      // graph.zoom(3, { x: e.canvasX, y: e.canvasY });
    });
  };

  return (<div ref={ref} style={{ width: "100%", height: "100%" }}/>);
};

export default index;

const traverse: any = (arr: any[]) => {
  return _.map(arr, item => {
    if (!_.isEmpty(item.children)) {
      const uuid = uuidV4();
      return {
        id: uuid, label: item.salaryItemName,
        subLabel: item.result, formula: item.formula,
        ratio: 1, increase: true, level: 1, collapsed: true,
        children: traverse(item.children)
      };
    } else {
      const uuid = uuidV4();
      return {
        id: uuid, label: item.salaryItemName,
        subLabel: item.result, formula: item.formula,
        ratio: 1, increase: true, level: 2
      };
    }
  });
};
