<template>
  <div class="content" v-loading="loading" ref="myPage">
    <Empty v-if="isEmpty"></Empty>
    <relation-graph
      v-else
      ref="graphRef"
      :options="graphOptions"
      :on-node-click="onNodeClick"
      :on-line-click="onLineClick"
    >
      <template #node="{ node }">
        <div
          class="pd"
          @mouseover="showNodeTips(node, $event)"
          @mouseout="hideNodeTips(node, $event)"
        >{{ node.text }}</div>
      </template>
      <template #graph-plug>
        <div
          v-if="showNodePanel"
          :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }"
          class="c-surround-menu-panel"
          @mouseover="showTip"
          @mouseout="hideTip"
        >
          <div class="c-node-menu-item">名称：{{currentNode.text}}</div>
        </div>
      </template>
    </relation-graph>
  </div>
</template>

<script>
import RelationGraph from 'relation-graph'
import Empty from '@/components/Common/empty'
import { api } from '@/api/dataGovernance'

export default {
  name: 'm-graph-list',
  components: { RelationGraph, Empty },
  props: {
    downloadImageFileName: String,
    toApi: {
      type: Function,
      default: api.getResourceListToGraph
    }
  },
  data () {
    return {
      isEmpty: false,
      showNodePanel: false,
      loading: false,
      graphOptions: {
        layout: {
          label: '树',
          layoutName: 'tree',
          layoutClassName: 'seeks-layout-center',
          defaultJunctionPoint: 'border',
          defaultNodeShape: 0,
          defaultLineShape: 1,
          from: 'left'
        },
        defaultFocusRootNode: false,
        placeOtherGroup: true,
        defaultLineMarker: {
          markerWidth: 12,
          markerHeight: 12,
          refX: 6,
          refY: 6,
          data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
        },
        downloadImageFileName: this.downloadImageFileName,
        moveToCenterWhenRefresh: false,
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        // defaultNodeWidth: 100,
        defaultLineShape: 4,
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(12, 127, 246, 1)'
        // defaultNodeColor: 'rgba(0, 206, 209, 1)'
      },
      nodeMenuPanelPosition: { x: 0, y: 0 },
      currentNode: {},
      lock: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    async init (query = { tag: null, type: 'community' }) {
      this.loading = true
      try {
        const { data } = await this.toApi(query)
        if (!data.nodes || !data.nodes.length) {
          this.isEmpty = true
          this.loading = false
          return
        }
        this.isEmpty = false
        this.$nextTick(() => {
          if (!this.$refs.graphRef || !this.$refs.graphRef.setJsonData) {
            return
          }
          data.nodes.forEach((item) => {
            item.text = item.text ?? item.name
          })
          this.$refs.graphRef.setJsonData(data, async (_graphInstance) => {
            this.loading = false
          })
        })
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    onNodeClick (nodeObject, $event) {
      console.log(nodeObject, $event)
      this.currentNode = nodeObject
      const basePosition = this.$refs.myPage.getBoundingClientRect()
      this.showNodePanel = true
      this.nodeMenuPanelPosition.x = $event.toElement.clientX - basePosition.x + 10
      this.nodeMenuPanelPosition.y = $event.toElement.clientY - basePosition.y + 10
    },
    onLineClick (lineObject, $event) {
      console.log('onLineClick:', lineObject)
    },
    showNodeTips (nodeObject, $event) {
      this.lock = true
      this.currentNode = nodeObject
      const basePosition = this.$refs.myPage.getBoundingClientRect()
      this.showNodePanel = true
      this.nodeMenuPanelPosition.x = $event.clientX - basePosition.x + 10
      this.nodeMenuPanelPosition.y = $event.clientY - basePosition.y + 10
    },
    hideNodeTips () {
      this.lock = false
      setTimeout(() => {
        if (this.lock) {
          return
        }
        this.showNodePanel = false
      })
    },
    showTip () {
      this.lock = true
    },
    hideTip () {
      this.lock = false
      setTimeout(() => {
        if (this.lock) {
          return
        }
        this.showNodePanel = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  widows: 100%;
  height: 100%;
  position: relative;
}
.c-surround-menu-panel {
  -webkit-user-select: none; /* Webkit浏览器，如Chrome、Safari */
  -moz-user-select: none; /* Firefox浏览器 */
  -ms-user-select: none; /* IE浏览器 */
  user-select: none; /* 标准语法 */
  z-index: 999;
  padding:10px;
  background-color: #ffffff;
  border:#eeeeee solid 1px;
  box-shadow: 0px 0px 8px #cccccc;
  position: absolute;
  .c-node-menu-item {
    line-height: 25px;
    padding-left: 10px;
    color: #888888;
    font-size: 12px;
  }
}
.pd {
  padding: 10px 20px;
  box-sizing: border-box;
  min-width: 120px;
}
::v-deep .rel-toolbar {
  background-color: #f39930;
  color: #ffffff;
  .c-current-zoom {
    color: #ffffff;
  }
}
</style>
