/**
 * data 图数据
 * id 图id
 * height 图高
 * fitViewPadding 图边距
 * visible 是否显示 tooptip 缩放等
 */
const commonFuns = (params) => {
  const {
    data, id, fitViewPadding, height, visible
  } = params
  var container = document.getElementById(`${id}`)
  if (!container) return
  container.innerHTML = ''
  G6.registerEdge(
    'circle-running',
    {
      afterDraw(cfg, group) {
        const shape = group.get('children')[0]
        const startPoint = shape.getPoint(0)
        const circle = group.addShape('circle', {
          attrs: {
            x: startPoint.x,
            y: startPoint.y,
            fill: '#1890ff',
            r: 3,
          },
          name: 'circle-shape',
        })
        circle.animate(
          (ratio) => {
            const tmpPoint = shape.getPoint(ratio)
            return {
              x: tmpPoint.x,
              y: tmpPoint.y,
            }
          },
          {
            repeat: true,
            duration: 3000,
            easing: 'easeQuadIn',
          }
        )
      },
    },
    'line'
  )

  const width = container.scrollWidth
  const contHeight = container.scrollHeight
  const graph = new G6.Graph({
    container: container,
    width: width,
    fitView: true,
    fitViewPadding: fitViewPadding,
    fitCenter: true,
    height: height || contHeight,
    minZoom: 0.02,
    nodeStateStyles: {
      // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
      hover: {
        cursor: 'pointer'
      },
      // 鼠标点击节点，即 click 状态为 true 时的样式
      click: {
        cursor: 'pointer'
      },
    },
    layout: {
      type: 'dagre',
      rankdir: 'LR',
      align: 'UL',
      controlPoints: true,
      nodesepFunc: () => 1,
      ranksepFunc: () => 1,
    },
    defaultNode: {
      size: 30,
      type: 'image',
      labelCfg: {
        position: 'bottom',
        offset: 12,
        style: {
          fontSize: 10,
          textAlign: 'center',
          textBaseline: 'middle',
        },
      },
    },
    defaultEdge: {
      type: visible ? 'circle-running' : 'line',
      size: 1,
      color: '#377EE1',
      style: {
        endArrow: {
          path: 'M 0,0 L 8,4 L 8,-4 Z',
          fill: '#377EE1',
        },
        radius: 20,
      },
    },
    modes: {
      default: [
        visible == true ? 'drag-canvas' : '',
        visible == true ? 'zoom-canvas' : '',
        {
          type: visible == true ? 'tooltip' : '',
          formatText(model) {
            const cfg = model.label
            const text = cfg
            return text
          },
        },
      ],
    },
  })

  // 鼠标进入节点
  graph.on('node:mouseenter', (e) => {
    graph.setItemState(e.item, 'hover', true) // 设置当前节点的 hover 状态为 true
  })

  // 鼠标离开节点
  graph.on('node:mouseleave', (e) => {
    graph.setItemState(e.item, 'hover', false) // 设置当前节点的 hover 状态为 false
  })

  // 点击节点
  graph.on('node:click', (e) => {
    graph.find('node', (node) => {
      const group = node.get('group')
      const children = group.cfg.children
      children.map((child) => {
        child.attr('opacity', 1)
      })
    })
    const target = e.target
    const type = target.get('type')
    if (type === 'image') {
      target.attr('opacity', 0.5)
    }
    // 先将所有当前是 click 状态的节点置为非 click 状态
    const clickNodes = graph.findAllByState('node', 'click')
    clickNodes.forEach((cn) => {
      graph.setItemState(cn, 'click', false)
    })
    const nodeItem = e.item // 获取被点击的节点元素对象
    graph.setItemState(nodeItem, 'click', true) // 设置当前节点的 click 状态为 true
    const currentElement = nodeItem.getModel()
  })
  graph.on('canvas:click', (e) => {
    const nodeItem = e.item // 获取被点击的节点元素对象
    graph.find('node', (node) => {
      const group = node.get('group')
      const children = group.cfg.children
      children.map((child) => {
        child.attr('opacity', 1)
      })
    })
  })
  graph.data(data)
  graph.render()
  graph.zoomTo(1.5, {
    x: 0,
    y: 0,
  })
}