<script setup lang="ts">
import { ref, unref, defineProps, watchEffect, watch } from 'vue';
import type { EChartsOption } from 'echarts'
import { useECharts } from '@/hooks/web/useECharts';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);

interface CircularDiagramChartProps {
  /**
   * 图表数据
   */
   LIST: any[],
   LINKS: any[]
}
const { 
  LIST = [],
  LINKS = []
} = defineProps<CircularDiagramChartProps>()
const links = ref([])
const nodes = ref([])
let options: EChartsOption = {
  title: {
      text: ''
    },
    tooltip: {
      formatter: function (params) { //提示框自定义
        if (params.dataType == 'edge') return
        let pid = params.data.pid;
        let el;
        if (pid == 0) {
          el = `<span class="tooltip-flex"><span class="tooltip-title">源IP</span><span class="tooltip-content">${params.data.srcIp || '-'}</span></span>`
          // el += `<br><span class="tooltip-flex"><span class="tooltip-title">IP</span><span class="tooltip-content">${params.data.srcIp || '-'}</span></span>`
        // el += `<br><span class="tooltip-flex"><span class="tooltip-title">病毒变种版本</span><span class="tooltip-content">${params.data.virusVarietyVersion}</span></span>`
        el += `<br><span class="tooltip-flex"><span class="tooltip-title">地域</span><span class="tooltip-content">${params.data.srcCity || '-'}</span></span>`
        el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">运营商</span><span class="tooltip-content">-</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">单位</span><span class="tooltip-content">-</span></span>`
        } else {
          el = `<span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">目的IP</span><span class="tooltip-content">${params.data.destIp || '-'}</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">地域</span><span class="tooltip-content">${params.data.destCity || '-'}</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">运营商</span><span class="tooltip-content">-</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">单位</span><span class="tooltip-content">-</span></span>`
        }
        return el
      },
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
      roam: true,
      draggable: true, // 这里必须设置成false，否则拖拽的时候，会有偏移
      type: 'graph', //类型
      layout: 'force', //一定要设置这个，不然节点无法拖动
      nodes: unref(LIST),
      links: unref(LINKS),
      symbolSize: function (value, params) { //改变节点大小
        return 190
      },
      itemStyle: {
        color: "#fff"
      },
      lineStyle: {
        width: 1,
        color: "#000000",
        opacity: 0.2,
      },
      // 设置文本信息
      label: {
        show: true,
        distance: 5,
        fontSize: 10,
        color: "#F18301",
        formatter: function (params, index) {
          let name = params.data.name
          let pid = params.data.pid;
          // 超出省略
          if (pid == 0) {
            name = name.toString();
            var maxlength= 14;
            if (name.length>maxlength) {
                return "{one|"+ name.substring(0, maxlength-1)+'...'+"}";
            } else{
                return "{one|"+name+"}";
            }
          } else {
            name = name.toString();
            var maxlength= 14;
            if (name.length>maxlength) {
                return "{two|"+ name.substring(0, maxlength-1)+'...'+"}";
            } else{
                return "{two|"+name+"}";
            }
          }
        },
        rich: {
          one: {
            padding: [5, 0, 0, 0],
            align: "center",
            color: "#F18301",
            fontSize: "10px",
          },
          two: {
            padding: [15, 0, 0, 0],
            color: "#0095FF",
            fontSize: "10px",
          }
        }
      },
      autoCurveness: 0.01, //多条边的时候，自动计算曲率
      edgeLabel: { //边的设置
        show: false,
      },
      edgeSymbol:['circle', 'arrow'], //边两边的类型
      edgeSymbolSize:0,
      force: {
        repulsion: 100,
        gravity: 0.1,
        edgeLength: 400,
        layoutAnimation:false
      }
    }]
}
const initChart = () => {
  options.series[0].nodes = unref(LIST)
  options.series[0].links = unref(LINKS)
  console.log(options)
  setOptions(options);
}
const init = () => {
  //需要获取到element,所以是onMounted的Hook
  let myChart = EChartsOption.init(document.getElementById("myChart"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: ''
    },
    tooltip: {
      formatter: function (params) { //提示框自定义
        if (params.dataType == 'edge') return
        let pid = params.data.pid;
        let el;
        if (pid == 0) {
          el = `<span class="tooltip-flex"><span class="tooltip-title">源IP</span><span class="tooltip-content">${params.data.srcIp || '-'}</span></span>`
          // el += `<br><span class="tooltip-flex"><span class="tooltip-title">IP</span><span class="tooltip-content">${params.data.srcIp || '-'}</span></span>`
        // el += `<br><span class="tooltip-flex"><span class="tooltip-title">病毒变种版本</span><span class="tooltip-content">${params.data.virusVarietyVersion}</span></span>`
        el += `<br><span class="tooltip-flex"><span class="tooltip-title">地域</span><span class="tooltip-content">${params.data.srcCity || '-'}</span></span>`
        el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">运营商</span><span class="tooltip-content">-</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">单位</span><span class="tooltip-content">-</span></span>`
        } else {
          el = `<span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">目的IP</span><span class="tooltip-content">${params.data.destIp || '-'}</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">地域</span><span class="tooltip-content">${params.data.destCity || '-'}</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">运营商</span><span class="tooltip-content">-</span></span>`
          el += `<br><span class="tooltip-flex tooltip-flex-center"><span class="tooltip-title">单位</span><span class="tooltip-content">-</span></span>`
        }
        return el
      },
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
      roam: true,
      draggable: true, // 这里必须设置成false，否则拖拽的时候，会有偏移
      type: 'graph', //类型
      layout: 'force', //一定要设置这个，不然节点无法拖动
      nodes: nodes.value,
      links: links.value,
      symbolSize: function (value, params) { //改变节点大小
        return 190
      },
      itemStyle: {
        color: "#fff"
      },
      lineStyle: {
        normal: {
            width: 1,
            color: "#000000",
            opacity: 0.2,
        }
      },
      // 设置文本信息
      label: {
        show: true,
        distance: 5,
        fontSize: 14,
        color: "#F18301",
        formatter: function (params, index) {
          let name = params.data.name
          let pid = params.data.pid;
          // 超出省略
          if (pid == 0) {
            name = name.toString();
            var maxlength= 8;
            if (name.length>maxlength) {
                return "{one|"+ name.substring(0, maxlength-1)+'...'+"}";
            } else{
                return "{one|"+name+"}";
            }
          } else {
            name = name.toString();
            var maxlength= 8;
            if (name.length>maxlength) {
                return "{two|"+ name.substring(0, maxlength-1)+'...'+"}";
            } else{
                return "{two|"+name+"}";
            }
          }
        },
        rich: {
          one: {
            padding: [5, 0, 0, 0],
            align: "center",
            color: "#F18301",
            fontSize: "14px",
          },
          two: {
            padding: [15, 0, 0, 0],
            color: "#0095FF",
            fontSize: "12px",
          }
        }
      },
      autoCurveness: 0.01, //多条边的时候，自动计算曲率
      edgeLabel: { //边的设置
        show: false,
      },
      edgeSymbol:['circle', 'arrow'], //边两边的类型
      edgeSymbolSize:0,
      force: {
        repulsion: 100,
        gravity: 0.1,
        edgeLength: 400,
        layoutAnimation:false
      }
    }]
  });
  window.onresize = function () {//自适应大小
    myChart.resize();
  };
}
onMounted(() => {
  initChart()
})
watchEffect(() => {
  initChart()
})
</script>
<template>
  {{  }}
  <div id="myChart" class="chart" ref="chartRef"  :style="{ width: '100%', height: '100%' }"></div>
</template>
<style scoped lang="scss">
#myChart {
  height: 100%;
}
::v-deep .tooltip-flex {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  width: 290px;
  margin-bottom: 10px;
  .tooltip-title {
    width: 80px;
    color: rgba(0,0,0,0.65);
    display: inline-block;
  }
  .tooltip-content {
    display: inline-block;
    text-align: right;
    color: rgba(0,0,0,0.4);
    width: 210px;
    word-break: break-all;
  }
}
::v-deep .tooltip-flex:last-child{
  margin-bottom: 0;
}
::v-deep .tooltip-flex-center {
  width: 220px;
  .tooltip-title {
    width: 80px;
  }
  .tooltip-content {
    width: 140px;
  }
}
</style>