<template>
  <div>
    <div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, watch, onMounted, onBeforeUnmount, ref } from 'vue';
import { Graph } from '@antv/g6';

const props = defineProps({
  /**
   * 图表主题
   *
   * 'dark' | 'light'
   */
  theme: {
    type: String,
    default: 'light', // 'dark' | 'light'
  },
  /**宽度，默认100% */
  width: {
    type: String,
    default: '100%',
  },
  /**高度 */
  height: {
    type: String,
    default: '500px',
  },
});

const chartGraphG6Dom = ref<HTMLElement | undefined>(undefined);

const data = {
  nodes: [
    // 0 基站
    {
      id: '0',
      x: 50,
      y: 150,
      size: 48,
      type: 'circle',
      label: '基站',
      labelCfg: {
        position: 'bottom',
        offset: 10,
        style: {
          fill: '#333',
          stroke: '#fff',
          lineWidth: 10,
        },
      },
      style: {
        fill: '#9EC9FF',
        stroke: '#5B8FF9',
        lineWidth: 2,
      },
      icon: {
        show: true,
        // 可更换为其他图片地址
        img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
        width: 24,
        height: 24,
      },
    },
    // 1 DM
    {
      id: '1',
      x: 450,
      y: 450,
      label: 'DM',
      labelCfg: {
        position: 'center',
      },
      style: {
        fill: '#00b050',
        stroke: '#00b050',
        lineWidth: 1,
      },
    },
    // 2 O&M
    {
      id: '2',
      x: 50,
      y: 450,
      label: 'O&M',
    },
    // 100 EMS
    {
      id: '100',
      label: 'EMS',
      comboId: 'combo-ems',
      x: 300,
      y: 450,
    },
    // 190 UPF
    {
      id: '190',
      comboId: 'combo-upf',
      x: 300,
      y: 350,
      label: 'UPF',
      labelCfg: {
        position: 'center',
      },
      style: {
        fill: '#d580ff',
        stroke: '#d580ff',
        lineWidth: 1,
      },
    },
    // EP-IMS
    {
      id: '110',
      comboId: 'combo-ims',
      x: 600,
      y: 350,
      label: 'IMS',
      labelCfg: {
        position: 'center',
      },
      style: {
        fill: '#ed7d31',
        stroke: '#ed7d31',
        lineWidth: 1,
      },
    },
    // 5GC控制面
    {
      id: '170',
      label: 'NSSF',
      comboId: 'combo-5gc',
      x: 300,
      y: 50,
    },
    {
      id: '130',
      label: 'AUSF',
      comboId: 'combo-5gc',
      x: 450,
      y: 50,
    },
    {
      id: '140',
      label: 'UDM',
      comboId: 'combo-5gc',
      x: 600,
      y: 50,
    },
    {
      id: '120',
      label: 'AMF',
      comboId: 'combo-5gc',
      x: 300,
      y: 150,
    },
    {
      id: '180',
      label: 'NRF',
      comboId: 'combo-5gc',
      x: 450,
      y: 150,
    },
    {
      id: '150',
      label: 'SMF',
      comboId: 'combo-5gc',
      x: 300,
      y: 250,
    },
    {
      id: '160',
      label: 'PCF',
      comboId: 'combo-5gc',
      x: 700,
      y: 250,
    },
  ],
  edges: [
    {
      id: '0-5gc',
      source: '0',
      target: 'combo-5gc',
    },
    {
      id: '0-upf',
      source: '0',
      target: 'combo-upf',
    },
    {
      id: 'upf-1',
      source: 'combo-upf',
      target: '1',
    },

    {
      id: 'ems-2',
      source: 'combo-ems',
      target: '2',
    },
    {
      id: '170-120',
      source: '170',
      target: '120',
    },
    {
      id: '130-120',
      source: '130',
      target: '120',
    },
    {
      id: '140-120',
      source: '140',
      target: '120',
    },
    {
      id: '140-180',
      source: '140',
      target: '180',
    },
    {
      id: '120-180',
      source: '120',
      target: '180',
    },
    {
      id: '130-180',
      source: '130',
      target: '180',
    },
    {
      id: '140-150',
      source: '140',
      target: '150',
    },
    {
      id: '140-110',
      source: '140',
      target: '110',
    },
    {
      id: '120-150',
      source: '120',
      target: '150',
      data: {},
    },
    {
      id: '150-180',
      source: '150',
      target: '180',
      data: {},
    },
    {
      id: '150-160',
      source: '150',
      target: '160',
    },
    {
      id: '160-120',
      source: '160',
      target: '120',
    },
    {
      id: '160-180',
      source: '160',
      target: '180',
    },
    {
      id: '160-110',
      source: '160',
      target: '110',
    },

    {
      id: '150-190',
      source: '150',
      target: '190',
    },

    {
      id: 'upf-ims',
      source: 'combo-upf',
      target: 'combo-ims',
    },
    {
      id: 'ems-5gc',
      source: 'combo-ems',
      target: 'combo-5gc',
    },
    {
      id: 'ems-upf',
      source: 'combo-ems',
      target: 'combo-upf',
    },
    {
      id: 'ems-ims',
      source: 'combo-ems',
      target: 'combo-ims',
    },
  ],
  combos: [
    {
      id: 'combo-5gc',
      data: {
        text: '5GC控制面',
      },
    },
    {
      id: 'combo-upf',
      data: {
        keyShape: {
          opacity: 0.8,
          padding: [20, 20, 20, 20],
          radius: 4,
          lineWidth: 1,
          stroke: '#d580ff',
        },
      },
    },
    {
      id: 'combo-ims',
      data: {},
    },
    {
      id: 'combo-ems',
      data: {},
    },
  ],
};

let graph: any = null;

/**初始化渲染图表 */
function initChart() {
  if (!chartGraphG6Dom.value) return;
  console.log(chartGraphG6Dom.value.clientWidth);
  console.log(chartGraphG6Dom.value.clientHeight);
  graph = new Graph({
    container: chartGraphG6Dom.value,
    height: chartGraphG6Dom.value.clientHeight,
    width: chartGraphG6Dom.value.clientWidth,
    fitCenter: true,
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
    },
    // 全局节点 矩形
    defaultNode: {
      type: 'rect',
      size: [80, 40],
      style: {
        fill: '#fff',
        lineWidth: 1,
        radius: 8,
      },
      labelCfg: {},
    },
    // 全局边 三次贝塞尔曲线
    defaultEdge: {
      type: 'polyline',
      style: {
        offset: 20, // 拐弯处距离节点最小距离
        radius: 4, // 拐弯处的圆角弧度，若不设置则为直角
        lineWidth: 1,
        stroke: '#87e8de',
      },
    },
    // 全局框节点 矩形
    defaultCombo: {
      type: 'rect', // Combo 类型
      size: [40, 40],
      // ... 其他配置
      style: {
        lineWidth: 1,
      },
    },
  });

  graph.data(data); // 加载数据
  graph.render(); // 渲染
}

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});

onBeforeUnmount(() => {});
</script>

<style lang="less" scoped></style>
