/**
 * elementsDate 图数据
 * id 图id
 * height 图高
 * fitViewPadding 图边距
 * visible 是否显示 tooptip 缩放等
 * isUsercase 图谱设计 右侧case图特有参数
 */
const commonFuns = (params) => {
  let {elementsDate, id, height, fitViewPadding, isUsercase, 
    visible = true, nodeSize, offsetDiffs, _this} = params;
  var container = document.getElementById(`${id}`)
  if (!container) return
  container.innerHTML = null
  const width = container.scrollWidth
  const contHeight = container.scrollHeight
  const graph = new G6.Graph({
    container: container,
    width: width,
    fitViewPadding: fitViewPadding || 20,
    fitCenter: true,
    height: height || contHeight,
    fitView: true,
    nodeStateStyles: {
      // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
      hover: {
        // fill: 'lightsteelblue',
        cursor: 'pointer',
        // fill: '#000',
      },
      // 鼠标点击节点，即 click 状态为 true 时的样式
      click: {
        // stroke: '#000',
        // lineWidth: 3,
        cursor: 'pointer',
      },
    },
    edgeStateStyles: {
      // selected: {
      //   lineWidth: 3
      // }
    },
    layout: {
      rankdir: 'LR',
      align: 'UL',
      controlPoints: true,
      nodesepFunc: () => 1,
      ranksepFunc: () => 1,
    },
    defaultNode: {
      size: nodeSize || 30,
      shape: "circle",
      color: "#9EC9FF",
      style: {
        fill: "#9EC9FF",
        lineWidth: 1,
        cursor: 'pointer',
      },
      anchorPoints: [
        [0, 0.5],
        [1, 0.5],
        [0.5, 0],
        [0.5, 1],
      ],
      labelCfg: {
        position: 'bottom',
        style: {
          fontSize: 14,
          fill: '#000',
          textAlign: 'center',
          cursor: 'pointer',
        }
      },
      icon: {
        cursor: 'pointer',
        width: nodeSize ? 24: 16,
        height: nodeSize ? 24: 16,
      }
    },
    defaultEdge: {
      type: 'quadratic',
      style: {
        stroke: '#1890ff',
        endArrow: {
          path: 'M 0,0 L 8,4 L 8,-4 Z',
          fill: '#1890ff',
        },
        lineAppendWidth: 3,
        cursor: 'pointer',
      },
      loopCfg: {
        dist: !!isUsercase?70:30
      },
      labelCfg: {
        position: 'center', // 其实默认就是 center，这里写出来便于理解
        autoRotate: true, // 使文本随边旋转
        style: {
          fontSize: 14,
          cursor: 'pointer',
        },
      },
    },
    modes: {
      default: [
        visible == true ?'drag-canvas': '',
        visible == true?'zoom-canvas': '',
        visible == true?'drag-node': '',
        // {
        //   type: visible == true ? 'tooltip': '',
        //   formatText(model) {
        //     const cfg = model.fullLabel
        //     const text = cfg
        //     return text
        //   },
        // },
        // {
        //   type: visible == true ? 'edge-tooltip': '',
        //   formatText(model) {
        //     const cfg = model.fullLabel;
        //     const text = cfg
        //     return text
        //   },
        // }
      ],
    },
  })
  const canvas = graph.get('canvas');
  canvas.set('localRefresh', false);
  graph.data(elementsDate)
  graph.render()
  graph.fitView()
  const edgesinit = graph.save().edges
  if (edgesinit.length !== 0) {
    G6.Util.processParallelEdges(edgesinit, !!offsetDiffs ? offsetDiffs: 15);
  }
  if (!!isUsercase) {
    const edges = graph.save().edges
    G6.Util.processParallelEdges(edges)
    graph.getEdges().forEach((edge, i) => {
      graph.updateItem(edge, edges[i])
    })
  }
  graph.on('node:click', (evt) => {
    const { item } = evt;
    const { color } = item.getModel().style;
    let styleOpt = {
      stateStyles: {
        selected: {
          stroke: color,
          lineWidth: 2,
          fill: color,
          shadowBlur: 10,
          shadowColor: color
        }
      }
    }
    if (_this) {
      graph.getEdges().forEach((edge) => {
        graph.clearItemStates(edge, 'selected');
      })
      graph.getNodes().forEach((node) => {
        let ids = node.getID();
        if (ids !== item.getID()) {
          graph.clearItemStates(node, 'selected');
        }
      })
      graph.updateItem(item, styleOpt)
      graph.setItemState(item, 'selected', true);
      _this && _this.choiceElement('node', evt)
    }
  })
  graph.on('edge:click', (evt) => {
    const { item } = evt;
    if (_this) {
      graph.getNodes().forEach((node) => {
        graph.clearItemStates(node, 'selected');
      })
      graph.getEdges().forEach((edge) => {
        let ids = edge.getID();
        if (ids !== item.getID()) {
          graph.clearItemStates(edge, 'selected');
        }
      })
      graph.setItemState(item, 'selected', true);
      _this.choiceElement('edge', evt)
    }
  })
  const clearSelectedState = (graph) => {
    if (!graph) return;
    _this.selectedSchemaItem = null;
    if (_this.showLeftBar === true) {
      _this.showAddModel();
    }
    graph.getNodes().forEach((node) => {
      graph.clearItemStates(node);
    });
    graph.getEdges().forEach((edge) => {
      graph.clearItemStates(edge);
    });
  }
  graph.on('canvas:click', (evt) => {
    if (_this) {
      clearSelectedState(graph);
    }
  });
  return graph;
}