<template>
  <relation-graph
    ref="graphRef"
    :options="graphOptions"
  >
  </relation-graph>
</template>

<script>
import RelationGraph from 'relation-graph'
export default {
  name: 'product-line-details',
  components: {
    RelationGraph
  },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: false,
      graphOptions: {
        defaultJunctionPoint: 'border',
        // 这里可以参考"Graph 图谱"中的参数进行设置 https://www.relation-graph.com/#/docs/graph
        debug: false, // 是否开始调试模式，调试模式下会在控制台打印额外的日志信息
        showDebugPanel: false, // 是否显示调试按钮，通过此按钮可以打印配置、数据等
        backgroundImage: '', // 图谱水印url,如：https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png
        downloadImageFileName: '', // 下载图片时，图片的名称
        disableZoom: false, // 是否禁用图谱的缩放功能
        disableDragNode: false, // 是否禁用图谱中节点的拖动
        moveToCenterWhenRefresh: false, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），让图谱根据节点居中（图片会默认将根节点作为中心展示，此选项会根据节点分布寻找中心）
        zoomToFitWhenRefresh: false, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），是否让图谱缩放到适合可见区域大小，此选项不适用于fixed和force布局
        useAnimationWhenRefresh: true, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），使用动画让图居中、缩放
        defaultFocusRootNode: true, // 默认为根节点添加一个被选中的样式
        disableNodeClickEffect: false, // 是否禁用节点默认的点击效果（选中、闪烁）
        disableLineClickEffect: false, // 是否禁用线条默认的点击效果（选中、闪烁）
        allowShowZoomMenu: false, // 是否在右侧菜单栏显示放大缩小的按钮，此设置和disableZoom不冲突
        allowAutoLayoutIfSupport: true, // 是否在工具栏中显示【自动布局】按钮（只有在布局支持且此选项为true时才会显示的按钮）
        allowShowRefreshButton: true, // 是否在工具栏中显示【刷新】按钮
        allowShowDownloadButton: true, // 是否在工具栏中显示【下载图片】按钮
        backgroundImageNoRepeat: false, // 只在右下角显示水印，不重复显示水印
        allowSwitchLineShape: true, // 是否在工具栏中显示切换线条形状的按钮
        allowSwitchJunctionPoint: true, // 是否在工具栏中显示切换连接点位置的按钮
        isMoveByParentNode: false, // 是否在拖动节点后让子节点跟随
        defaultExpandHolderPosition: 'hide', // 默认的节点展开/关闭按钮位置（left/top/right/bottom/hide）
        defaultNodeColor: 'rgba(238, 178, 94, 1)', // 默认的节点背景颜色
        checkedLineColor: '#FD8B37', // 当线条被选中时的颜色
        defaultNodeFontColor: '#ffffff', // 默认的节点文字颜色
        defaultNodeBorderColor: '#90EE90', // 默认的节点边框颜色
        defaultNodeBorderWidth: 0, // 默认的节点边框粗细（像素）
        defaultLineColor: '#cccccc', // 默认的线条颜色
        defaultLineWidth: 1, // 默认的线条粗细（像素）
        defaultLineShape: 1, // 默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
        defaultNodeShape: 0, // 默认的节点形状，0:圆形；1:矩形
        defaultShowLineLabel: true, // 默认是否显示连线文字，v2版本此选项已无效，主要是这个选项没什么用
        hideNodeContentByZoom: false, // 是否根据缩放比例隐藏节点内容
        // disableDragCanvas: false,
        // lineUseTextPath: false,
        defaultLineMarker: { // 默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
          markerWidth: 24,
          markerHeight: 24,
          refX: 6,
          refY: 6,
          data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
        },
        layouts: [
          {
            label: '自动布局',
            layoutName: 'center', // 布局方式（tree树状布局/center中心布局/force自动布局）
            maxLayoutTimes: 20,
            layoutClassName: 'seeks-layout-force',
            useLayoutStyleOptions: false,
            defaultNodeColor: '#FFC5A6',
            defaultNodeFontColor: '#000000',
            defaultNodeBorderColor: '#efefef',
            defaultNodeBorderWidth: 1,
            defaultLineColor: '#FD8B37',
            defaultLineWidth: 1,
            defaultShowLineLabel: true,
            defaultLineMarker: {
              markerWidth: 12,
              markerHeight: 12,
              refX: 6,
              refY: 6,
              data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init(this.itemData)
    })
  },
  methods: {
    async init (data) {
      this.loading = true
      this.$refs.graphRef.setOptions(this.graphOptions, () => {
        if (!this.$refs.graphRef || !this.$refs.graphRef.setJsonData) {
          return
        }
        this.$refs.graphRef.setJsonData(data, (graphInstance) => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
