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

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

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

//拉取节点
const pullImg = 'image://' + require('@/assets/integr/pull_blue.png');

//拉取节点-错误
const pullImgError = 'image://' + require('@/assets/integr/pull_red.png');

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

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

//推送节点
const pushImg = 'image://' + require('@/assets/integr/push_blue.png');

//推送节点-错误
const pushImgError = 'image://' + require('@/assets/integr/push_red.png');

//存储节点
const saveImg = 'image://' + require('@/assets/integr/save_blue.png');

//存储节点-错误
const saveImgError = 'image://' + require('@/assets/integr/save_red.png');

//存储节点
const mysqlImg = 'image://' + require('@/assets/integr/mysql_blue.png');

//存储节点-错误
const mysqlImgError = 'image://' + require('@/assets/integr/mysql_red.png');

// 节点数据
export default {
  name: '',
  data () {
    return {
      myChart: null,
      desc: 300, // 防抖时间
      nodeDataList: [
        {
          name: "首都机场BHS",
          linkTargetName: '首都机场边缘节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 250],
          draggable: false,
          fixed: true,
          symbol: defaultImg,
          symbolSize: 30
        }, {
          name: "星盟SBH",
          linkTargetName: '国航主动拉取节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 220],
          draggable: false,
          fixed: true,
          symbol: defaultImg,
          symbolSize: 30
        }, {
          name: "局方公共平台",
          linkTargetName: '国航主动拉取节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 190],
          draggable: false,
          symbol: defaultImgError,
          symbolSize: 30
        },
        {
          name: "离港高频",
          linkTargetName: '国航主动拉取节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 160],
          draggable: false,
          symbol: defaultImg,
          symbolSize: 30
        },
        {
          name: "WT",
          linkTargetName: '国航主动拉取节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 130],
          draggable: false,
          symbol: defaultImg,
          symbolSize: 30
        },
        {
          name: "特殊及异常行李",
          linkTargetName: '国航主动拉取节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 100],
          draggable: false,
          symbol: defaultImg,
          symbolSize: 30
        },
        {
          name: "SCS",
          linkTargetName: '国航被动接收节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 70],
          draggable: false,
          symbol: defaultImg,
          symbolSize: 30
        },
        {
          name: "ERP",
          linkTargetName: '国航被动接收节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 40],
          draggable: false,
          symbol: defaultImg,
          symbolSize: 30
        },
        {
          name: "服务质量",
          linkTargetName: '国航被动接收节点',
          linkValue: ' ',
          coordConfig: {
            level: '0',
          },
          value: [10, 10],
          draggable: false,
          symbol: defaultImg,
          symbolSize: 30
        },
        //节点B,C,D ....n
        {
          name: "首都机场边缘节点",
          linkTargetName: '国航主动拉取节点',
          linkValue: ' ',
          coordConfig: {
            level: '1',
          },
          symbol: pullImg,
          symbolSize: 60,
          draggable: false,
          value: [40, 245]
        }, {
          name: "国航主动拉取节点",
          linkTargetName: 'Kafka',
          linkValue: ' ',
          coordConfig: {
            level: '2',
          },
          symbol: pullImg,
          symbolSize: 60,
          draggable: false,
          value: [80, 180]
        }, {
          name: "国航被动接收节点",
          linkTargetName: 'Kafka',
          linkValue: ' ',
          coordConfig: {
            level: '2',
          },
          symbol: pullImg,
          symbolSize: 60,
          draggable: false,
          value: [80, 100]
        }, {
          name: "Kafka",
          linkTargetName: 'BSM',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 60,
          symbol: kafkaImg,
          draggable: false,
          value: [120, 140],
        },
        {
          name: "Kafka ",
          linkTargetName: 'BPM',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 60,
          symbol: kafkaImg,
          draggable: false,
          label: {
            show: false
          },
          value: [120, 140],
        },
        {
          name: "Kafka  ",
          linkTargetName: '航班',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 60,
          symbol: kafkaImg,
          draggable: false,
          label: {
            show: false
          },
          value: [120, 140],
        },
        {
          name: "Kafka   ",
          linkTargetName: '行李投诉',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 60,
          symbol: kafkaImg,
          draggable: false,
          label: {
            show: false
          },
          value: [120, 140],
        },
        {
          name: "Kafka    ",
          linkTargetName: '旅客',
          linkValue: ' ',
          coordConfig: { level: '3' },
          symbolSize: 60,
          symbol: kafkaImg,
          draggable: false,
          label: {
            show: false
          },
          value: [120, 140],
        },
        {
          name: "BSM",
          linkTargetName: '解析服务',
          linkValue: ' ',
          coordConfig: { level: '4' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [160, 180]
        },
        {
          name: "BPM",
          linkTargetName: '推送节点',
          linkValue: ' ',
          coordConfig: { level: '4' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [160, 150]
        },
        {
          name: "航班",
          linkTargetName: '解析服务',
          linkValue: ' ',
          coordConfig: { level: '4' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [160, 120]
        },
        {
          name: "行李投诉",
          linkTargetName: '解析服务',
          linkValue: ' ',
          coordConfig: { level: '4' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [160, 90]
        },
        {
          name: "旅客",
          linkTargetName: '解析服务',
          linkValue: ' ',
          coordConfig: { level: '4' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [160, 60]
        },
        {
          name: "推送节点",
          linkTargetName: '首都机场BHS ',
          linkValue: ' ',
          coordConfig: { level: '5' },
          symbolSize: 60,
          symbol: pushImg,
          draggable: false,
          value: [200, 160]
        },
        {
          name: "推送节点 ",
          linkTargetName: '星盟SBH ',
          linkValue: ' ',
          coordConfig: { level: '5' },
          symbolSize: 60,
          symbol: pushImg,
          draggable: false,
          label: {
            show: false
          },
          value: [200, 160]
        },
        {
          name: "推送节点  ",
          linkTargetName: '局方公共平台 ',
          linkValue: ' ',
          coordConfig: { level: '5' },
          symbolSize: 60,
          symbol: pushImg,
          draggable: false,
          label: {
            show: false
          },
          value: [200, 160]
        },
        {
          name: "推送节点   ",
          linkTargetName: '行李推送事件',
          linkValue: ' ',
          coordConfig: { level: '5' },
          symbolSize: 60,
          symbol: pushImg,
          draggable: false,
          label: {
            show: false
          },
          value: [200, 160]
        },
        {
          name: "推送节点    ",
          linkTargetName: 'ES',
          linkValue: ' ',
          coordConfig: { level: '5' },
          symbolSize: 60,
          symbol: pushImg,
          draggable: false,
          label: {
            show: false
          },
          value: [200, 160]
        },
        {
          name: "解析服务",
          linkTargetName: ' Kafka',
          linkValue: ' ',
          coordConfig: { level: '5' },
          symbolSize: 60,
          symbol: pushImg,
          draggable: false,
          value: [200, 100]
        },
        {
          name: "首都机场BHS ",
          linkTargetName: '首都机场BHS ',
          linkValue: ' ',
          coordConfig: { level: '6' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [240, 220]
        },
        {
          name: "星盟SBH ",
          linkTargetName: '星盟SBH ',
          linkValue: ' ',
          coordConfig: { level: '6' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [240, 190]
        },
        {
          name: "局方公共平台 ",
          linkTargetName: '局方公共平台 ',
          linkValue: ' ',
          coordConfig: { level: '6' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [240, 160]
        },
        {
          name: "行李推送事件",
          linkTargetName: '行李推送事件',
          linkValue: ' ',
          coordConfig: { level: '6' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [240, 130]
        },
        {
          name: "ES",
          linkTargetName: 'ES',
          linkValue: ' ',
          coordConfig: { level: '6' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [240, 100]
        },
        {
          name: " Kafka",
          linkTargetName: '存储服务',
          linkValue: ' ',
          coordConfig: { level: '6' },
          symbolSize: 30,
          symbol: defaultImg,
          draggable: false,
          value: [240, 70]
        },
        {
          name: "存储服务",
          linkTargetName: 'Mysql',
          linkValue: ' ',
          coordConfig: { level: '7' },
          symbolSize: 60,
          symbol: saveImg,
          draggable: false,
          value: [280, 160]
        },
        {
          name: "Mysql",
          linkTargetName: 'Mysql',
          linkValue: ' ',
          coordConfig: { level: '8' },
          symbolSize: 60,
          symbol: mysqlImg,
          draggable: false,
          value: [340, 160]
        },
      ],
      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 => {

    })
    // 监听页面缩放 防止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>