// 设置自定义节点
const useGrapheRegisterNode = (G6) => {
  const { Util } = G6

  G6.registerNode('root-node', {
    jsx: (cfg) => {
      // console.log('root-node', cfg)
      const stroke = cfg.style.stroke || '#409eff'
      const data = cfg.data || {}
      // 内容区域的hover状态
      const contentHover = cfg.contentHover
      // 选中状态
      const selected = cfg.selected
      // 内容区域
      const innerContent = data.name
        ? `
      <image name="contentNode" style={{ img: '${data.image}',marginTop:1, marginLeft:4, width: 60, height: 58,preserveAspectRatio:none  meet, cursor: pointer}} />
      <text name="contentNode" style={{ fontSize: 12, marginLeft: 66, marginTop: -36, cursor: pointer }}>${data.name}</text>
      `
        : `
      <text name="contentNode" style={{ fontSize: 12, marginLeft: 4, marginTop: 22, fill: '#4fa20a', cursor: pointer }}>请编辑剧情模块</text>
      `
      return `
        <group>
          <rect name="contentNode" action="main" draggable="true" style={{width: 180, height: 60,lineWidth:2, stroke: ${contentHover || selected ? stroke : '#e8e8e8'},fill: #fff, radius: 4, cursor: pointer, shadowColor: rgba(0,0,0,0.16), shadowBlur: 8 }} keyshape>
            ${innerContent}
          </rect>
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.5],
        [1, 0.5]
      ]
    }
  })

  G6.registerNode('plot-node', {
    jsx: (cfg) => {
      // console.log('plot-node', cfg)
      const stroke = cfg.style.stroke || '#409eff'
      // 节点上存的属性
      const data = cfg.data || {}
      // 计算顶部描述（选项）的宽度
      const tipsNodeWidth = Util.getTextSize(data.optionName || '点此编辑选项', 12)[0] + 48
      // 描述的hover状态
      const tipsHover = cfg.tipsHover
      // 内容区域的hover状态
      const contentHover = cfg.contentHover
      // 选中状态
      const selected = cfg.selected
      // 选项的文字颜色
      const optionColor = data.optionName ? '#999' : '#4fa20a'
      // 选项区域的内容
      const optionContent = `<text name="tipsNode" action="tips" style={{ fontSize: 12, marginLeft: 6, marginTop:4, fill: ${optionColor}, cursor: pointer }}>${data.optionType}：${data.optionName || '点此编辑选项'}</text>`
      // 主内容区域
      const innerContent = data.name
        ? `
      <image name="contentNode" style={{ img: '${data.image}',marginTop:1, marginLeft:4, width: 60, height: 58,preserveAspectRatio:none  meet, cursor: pointer}} />
      <text name="contentNode" style={{ fontSize: 14, marginLeft: 70, marginTop: -35, cursor: pointer }}>${data.name}</text>
      `
        : `
      <text name="contentNode" style={{ fontSize: 14, marginLeft: 4, marginTop: 23, fill: '#4fa20a', cursor: pointer }}>点击编辑剧情模块</text>
      `
      return `
        <group>
          <rect draggable="true" style={{width: ${tipsNodeWidth}, height: 24, marginTop:-4, fill: ${tipsHover ? '#e5e5e5' : 'transparent'}, radius: 4, cursor: pointer }} keyshape>
            ${optionContent}
          </rect>
          <rect name="contentNode" action="main" draggable="true" style={{width: 180, height: 60,lineWidth:2, stroke: ${contentHover || selected ? stroke : '#e8e8e8'},fill: #fff, radius: 4, cursor: pointer, shadowColor: rgba(0,0,0,0.16), shadowBlur: 8 }} keyshape>
            ${innerContent}
          </rect>
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.6],
        [1, 0.6]
      ]
    }
  })
  G6.registerNode('jump-node', {
    jsx: (cfg) => {
      // console.log('plot-node', cfg)
      const data = cfg.data || {}
      // 计算顶部描述（选项）的宽度
      const tipsNodeWidth = Util.getTextSize(data.optionName || '点此编辑选项', 12)[0] + 48
      // 描述的hover状态
      const tipsHover = cfg.tipsHover
      const fill = data.jumpNodeId ? '#999' : '#409eff'
      const label = data.jumpNodeName ? '跳至：' + data.jumpNodeName : '选择跳转目标'
      const nodeWidth = Util.getTextSize(label, 14)[0] + 24
      const optionColor = data.optionName ? '#999' : '#4fa20a'
      const optionContent = `<text name="tipsNode" action="tips" style={{ fontSize: 12, marginLeft: 6, marginTop:4, fill: ${optionColor}, cursor: pointer }}>${data.optionType}：${data.optionName || '点此编辑选项'}</text>`
      const innerContent = `
      <text name="contentNode" style={{ fontSize: 14, marginLeft: 6, marginTop: 6, fill: '#fff', cursor: pointer }}>${label}</text>
      `
      return `
        <group>
          <rect draggable="true" style={{width: ${tipsNodeWidth}, height: 24, marginTop:-4, fill: ${tipsHover ? '#e5e5e5' : 'transparent'}, radius: 4, cursor: pointer }} keyshape>
            ${optionContent}
          </rect>
          <rect name="contentNode" draggable="true" action="main" style={{width: ${nodeWidth}, height: 28, fill: ${fill}, radius: 4, cursor: pointer }} keyshape>
          ${innerContent}
          </rect>
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.7],
        [1, 0.7]
      ]
    }
  })
}

export default useGrapheRegisterNode
