<template>
  <div class="integration__cont__map__cont" id="map"></div>
</template>

<script>
//默认节点
const defaultImg = 'image://' + require('@/assets/topplogy/ic_pulll_default.png');

//默认节点-错误
const defaultImgError = 'image://' + require('@/assets/topplogy/ic_pull_error.png');

//默认节点-选中
const defaultImgCheck = 'image://' + require('@/assets/topplogy/ic_pulll_check.png');

//kafka节点
const kafkaImg = 'image://' + require('@/assets/topplogy/ic_Kafka_default.png');

//kafka节点-错误
const kafkaImgError = 'image://' + require('@/assets/topplogy/ic_Kafka_error.png');

//kafka节点-选中
const kafkaImgCheck = 'image://' + require('@/assets/topplogy/ic_Kafka_check.png');

// 节点数据
export default {
  name: '',
  data () {
    return {
      myChart: null,
      desc: 300, // 防抖时间
      nodeDataList: [
        {
          name: "星盟SBH",
          linkTargetName: 'Kafka原始报文',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 240],
          draggable: false,
          fixed: true,
          symbol: defaultImg,
          symbolSize: 56
        },
        //节点B,C,D ....n
        {
          name: "Kafka原始报文",
          linkTargetName: 'BSMBPM报文解析',
          linkValue: ' ',
          coordConfig: {
            level: '1',
          },
          symbol: kafkaImgCheck,
          symbolSize: 56,
          draggable: false,
          value: [20, 240]
        }, {
          name: "BSMBPM报文解析",
          linkTargetName: 'Kafka报文解析结果',
          linkValue: ' ',
          coordConfig: {
            level: '2',
          },
          symbol: defaultImgError,
          symbolSize: 56,
          draggable: false,
          value: [30, 240]
        }, {
          name: "BSMBPM报文解析 ",
          linkTargetName: 'Mysql数据库行李表',
          linkValue: ' ',
          coordConfig: {
            level: '2',
          },
          symbol: defaultImgError,
          symbolSize: 56,
          draggable: false,
          value: [30, 240]
        }, {
          name: "BSMBPM报文解析  ",
          linkTargetName: 'Mysql数据库行李跟踪表',
          linkValue: ' ',
          coordConfig: {
            level: '2',
          },
          symbol: defaultImgError,
          symbolSize: 56,
          draggable: false,
          value: [30, 240]
        }, {
          name: "Kafka报文解析结果",
          linkTargetName: 'Kafka报文解析结果',
          linkValue: ' ',
          coordConfig: {
            level: '3',
          },
          symbol: kafkaImg,
          symbolSize: 56,
          draggable: false,
          value: [40, 240]
        }, {
          name: "Mysql数据库行李表",
          linkTargetName: 'Mysql数据库行李表',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 56,
          symbol: kafkaImg,
          draggable: false,
          value: [40, 170],
        },
        {
          name: "Mysql数据库行李跟踪表",
          linkTargetName: 'Mysql数据库行李跟踪表',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 56,
          symbol: kafkaImg,
          draggable: false,
          value: [40, 90],
        },
      ],
      options: {
        itemStyle: {
          normal: {
            color: "#67C23A",
          },
          shadowBlur: 0
        },
        textStyle: {
          color: '#444',
          fontSize: 16,
          fontWeight: 600,
        },
        grid: {
          top: 20,
          bottom: 10,
          left: 0,
          right: 0
        },
        legend: [{
          formatter: function (name) {
            return this.$echarts.format.truncateText(name, 200, '12px', '…');
          },
          tooltip: {
            show: true
          },
          selectedMode: 'false',
          bottom: 20,
        }],
        animationDuration: 500,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [{
          type: 'graph',
          coordinateSystem: 'cartesian2d',
          //圆形上面的文字	
          label: {
            normal: {
              position: "bottom",
              show: true,
              textStyle: {
                fontSize: 12
              },
            }
          },
          itemStyle: {
            normal: {
              color: "#409eff",
            },
            shadowBlur: 0
          },
          lineStyle: {
            normal: {
              width: 0,
              shadowColor: 'none',
              color: '#ff0000'
            }
          },
          data: [],
          links: []
        }]
      }
    }
  },
  watch: {
    // 监听数据变化 重绘图形
    options: {
      handler (obj) {
        // 生成柱状图
        this.myChart.setOption(obj)
      },
      deep: true
    }
  },
  mounted () {
    const datas = []
    this.nodeDataList.map(item => {
      datas.push({
        source: item.name,
        value: item.linkValue,
        target: item.linkTargetName
      })
    })
    this.options.series[0].data = this.nodeDataList
    this.options.series[0].links = datas
    this.options.series = this.options.series.concat(this.getCoordDataList())
    this.myChart = this.$echarts.init(document.getElementById('map'))
    this.myChart.setOption(this.options)
    // 事件
    this.myChart.on('click', params => {
      console.log(params)
    })
    // 监听页面缩放 防止dom重复渲染
    window.addEventListener('resize', _.debounce(this.handle, this.desc))
  },
  beforeDestroy () {
    // 销毁实例和移除监听
    if (this.myChart) {
      this.myChart.dispose()
      window.removeEventListener('resize', this.handle)
      this.myChart = null
    }
  },
  methods: {
    handle () {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    getCoordDataList () {
      let coorDataDict = {}
      let defaultConfig = {
        type: 'lines', //块1,2...n到节点A,B...N
        coordinateSystem: 'cartesian2d',
        // animationDelay: 10000,
        z: 1,
        effect: {
          show: true,
          smooth: true,
          trailLength: 0,
          symbol: "arrow",
          color: '#92A7D5',
          symbolSize: 10,
          period: 3,
          delay: 1500,
          loop: true,
        },
        lineStyle: {
          normal: {
            curveness: 0,
            color: '#92A7D5',
            width: 1,
          }
        },
        data: []
      }
      this.nodeDataList.map(item => {
        if (item.coordConfig !== undefined) {
          if (!(item.coordConfig.level in coorDataDict)) {
            let coorConfig = JSON.parse(JSON.stringify(defaultConfig))
            if (item.coordConfig.lineStyle !== undefined) {
              coorConfig.lineStyle = item.coordConfig.lineStyle
            }
            if (item.coordConfig.effect !== undefined) {
              coorConfig.effect = item.coordConfig.effect
            }
            coorDataDict[item.coordConfig.level] = coorConfig
          }

          let coordData = [
            item.value,
            this.nodeDataList.filter(i => i.name == item.linkTargetName)[0].value || this.nodeDataList.filter(i => i.name == item.linkTargetName)[1].value
          ]
          coorDataDict[item.coordConfig.level].data.push({
            coords: coordData
          })
          if (item.coordConfig.bilateral) {
            coorDataDict[item.coordConfig.level].data.push({
              coords: coordData.reverse()
            })
          }
        }

      })
      return Object.values(coorDataDict)
    }
  }
}
</script>

<style lang="scss" scoped>
.integration__cont__map__cont {
  height: calc(100vh - 330px);
}
</style>