<script setup lang="ts">
import { Ref, defineProps, watchEffect } from "vue";
import type { EChartsOption } from "echarts";
import { bigNumberTransform } from "@/utils/utils";
import { useECharts } from "@/hooks/web/useECharts";
import useEchartsAutoTooltip from "@/components/chart/logic/useEchartsAutoTooltip";
import { useLineXAxisAuto } from "@/components/chart/logic/useLineXAxisAuto";
import {
  mergeOptions,
  removeExtraCssText,
  getCommonTheme,
} from "@/components/chart/options/index";
import { getThemeColor } from "@/components/chart/options/theme";
import lineCircle2 from "@/assets/image/line-2.png";
import lineCircle1 from "@/assets/image/line-1.png";
import lineCircle3 from "@/assets/image/line-3.png";

import { isObject, isTowArray } from "@/utils/is";
import img1 from "../../../assets/image/monitor.png";

const themeColor = getThemeColor();
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>
);
const yaTheme = localStorage.getItem("YA_THEME");
/**
 * @author changjun
 * @description 折线图组件
 * @prop { String } title 标题
 * @prop { Array } chartData 图表数据
 * @prop { Boolean } smooth 开启平滑模式
 * @prop { Boolean } manual 手动设置 结合otherOptions
 * @prop { Object } otherOptions 手动设置一些其它的设置 结合manual
 * @prop { Function } legendFormatter 图例自定义显示函数
 * @date 2022/08/29
 */
interface LineChartProps {
  title?: string;
  xAxisData: any[];
  theme?: string;
  autotip?: boolean;
  autoAxis?: boolean;
  colors?: string[];
  /**
   * 图表数据
   */
  chartData: any[];
  /**
   * 是否开启平滑模式
   */
  smooth?: boolean;
  tooltipFormatter?:
    | string
    | ((params: any, ticket: any, callback: any) => string);
  /**
   * 格式化图例显示函数 用于需要显示图例名称之外内容的时候
   */
  legendFormatter?: string | ((name: string) => string);
  /**
   * 是否需要手动设置一些其它的设置，需要结合otherOptions才能起作用
   */
  manual?: boolean;
  /**
   * 手动设置一些其它的设置，需要结合manual才能起作用
   */
  otherOptions?: EChartsOption;
  areaGradientColor?: any[];
  autoXAxis?: boolean;
  autoStartValue?: number;
  autoEndValue?: number;
  xInterval?: number; // 设置X轴间隔
  xFontSize?: number;
  xAxisAxisLineShow?: boolean;
  xAxisSplitLineShow?: boolean;
  yAxisAxisLineShow?: boolean;
  yAxisSplitLineShow?: boolean;
  showSymbol?: boolean;
  gridTop?: number | string; // 布局距离顶部
  gridBottom?: number | string; // 布局距离底部
  gridLeft?: number | string; // 布局距离左侧
  gridRight?: number | string; // 布局距离右侧
  titleLeft?: number | string; // Y轴title距离左侧距离
  tooltipValueFormatter?: any;
  legendRight?: number | string; // 图例距离右边的位置
  isShowSide?: boolean;
  containLabel?: boolean;
  splitLineColor?: number | string; // 图例距离右边的位置
  tooltipBg?: number | string;
  tooltipColor?: number | string;
  lendData?: any[];
  titleTop?: number | string;
  legendTop?: number | string;
}

let {
  xAxisData = [],
  title = "",
  chartData = [],
  legendFormatter = (name) => name,
  smooth = true,
  manual = false,
  otherOptions = {},
  tooltipFormatter = "",
  areaGradientColor = getThemeColor().lineGradient,
  theme = "light",
  colors = [],
  autoXAxis = false,
  autoStartValue = 0,
  autoEndValue = 6,
  xInterval = 0,
  xFontSize = 12,
  autotip = false,
  autoAxis = false,
  xAxisAxisLineShow = true,
  xAxisSplitLineShow = false,
  yAxisAxisLineShow = true,
  yAxisSplitLineShow = true,
  showSymbol = true,
  gridTop = 55,
  gridBottom = 0,
  gridLeft = 0,
  gridRight = 5,
  titleLeft = 0,
  legendRight = 0,
  isShowSide = false,
  tooltipValueFormatter = (val) => bigNumberTransform(val),
  containLabel = true,
  splitLineColor = "rgba(255,255,255,0.15)",
  tooltipBg = "",
  tooltipColor = "",
  lendData = [],
  titleTop = 16,
  legendTop = 16,
} = defineProps<LineChartProps>();
if (isShowSide) {
  gridBottom = 24;
}

const commonChartTheme = computed(() => {
  return getCommonTheme(unref(theme));
}) as any;

let categories = [
  {
    name: "A",
  },
];
let links = [
  {
    source: "0",
    target: "1",
  },
  {
    source: "1",
    target: "2",
  },
  {
    source: "2",
    target: "3",
  },
  {
    source: "3",
    target: "4",
  },
  {
    source: "4",
    target: "5",
  },
  {
    source: "5",
    target: "6",
  },
  {
    source: "6",
    target: "7",
  },
  {
    source: "7",
    target: "8",
  },
  {
    source: "8",
    target: "9",
  },
  {
    source: "9",
    target: "0",
  },
  {
    source: "1",
    target: "4",
  },
];
let nodes = [
  {
    id: 0,
    name: "192.168.1.1",
    symbolSize: 20,
    symbol: `image://${lineCircle1}`,
    value: 28,
  },
  {
    id: 1,
    name: "192.168.1.2",
    symbolSize: 20,
    symbol: `image://${lineCircle2}`,
    value: 10,
  },
  {
    // category: 0,
    id: 2,
    name: "192.168.1.3",
    symbolSize: 20,
    symbol: `image://${lineCircle3}`,
    value: 10,
  },
  {
    id: 3,
    name: "192.168.1.4",
    symbolSize: 20,
    symbol: `image://${lineCircle2}`,
    value: 10,
  },
  {
    id: "4",
    name: "192.168.1.5",
    symbolSize: 20,
    value: 4,
  },
  {
    id: "5",
    name: "192.168.1.6",
    symbolSize: 20,
    value: 4,
  },
  {
    id: "6",
    name: "192.168.1.7",
    symbolSize: 20,
    value: 4,
  },
  {
    id: "7",
    name: "192.168.1.8",
    symbolSize: 20,
    value: 4,
  },
  {
    id: "8",
    name: "192.168.1.9",
    symbolSize: 20,
    value: 4,
  },
  {
    id: "9",
    name: "192.168.1.10",
    symbolSize: 20,
    value: 4,
  },
];

let options: EChartsOption = {
  title: {
    show: true,
    text: unref(title),
    top: unref(titleTop),
    left: unref(titleLeft),
    textStyle: {
      fontSize: 12,
      color: "#BAC8CD",
      fontWeight: 400,
    },
  },

  tooltip: {
    // trigger: "axis",
    show: true,
    confine: true,
    trigger: "item",
    extraCssText: "box-shadow: none",
    backgroundColor: "transparent",
    borderWidth: 0,
    position: (point, params, dom, rect, size) => {
      return [point[0] - 100, point[1] - size.contentSize[1] + 15];
    },
    formatter: function (params) {
      // console.log(params)
      if (params.dataType === "edge") {
        const aaa =
          "data:image/png;base64,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";
        var str = `<div style = "background:url(${aaa}) no-repeat;background-size: 100% 100%;height:159px;min-width:220px;color:#FFFFFF;position:relative;padding:0;margin:0">
            <div style='padding:0 40px;position:relative;top:50px;'>
              <div style='display:flex;justify-content: space-between;align-items: center;'>
                <div>事件类型：</div>
                <div>12</div>
              </div>
              <div style='display:flex;justify-content: space-between;align-items: center;'>
                <div>源IP：</div>
                <div>22</div>
              </div>
              <div style='display:flex;justify-content: space-between;align-items: center;'>
                <div>目的IP：</div>
                <div>33</div>
              </div>
            </div>
          </div>`;
        return str;
      }
    },
    // valueFormatter: unref(tooltipValueFormatter),
  },
  // grid: {
  //   top: unref(gridTop),
  //   left: unref(gridLeft),
  //   right: unref(gridRight),
  //   bottom: unref(gridBottom),
  //   containLabel: unref(containLabel),
  //   // backgroundColor: "rgba(0,172,236,0.08)",
  //   show: true,
  //   borderWidth: 0,
  // },

  legend: [
    {
      show: false,
      data: categories.map(function (a) {
        console.log(a);
        return a.name;
      }),
    },
  ],
  // animationDurationUpdate: 1500,
  // animationEasingUpdate: 'quinticInOut',
  series: [
    {
      name: "Les Miserables",
      type: "graph",
      layout: "circular",
      circular: {
        rotateLabel: true,
      },
      data: nodes,
      links: links,
      categories: categories,
      roam: false,
      focusNodeAdjacency: true,
      label: {
        show: true,
        color: "#fff",
        fontSize: 14,
      },
      edgeSymbol: ["", "arrow"], //边两边的类型
      lineStyle: {
        normal: {
          color: "#FC5954",
          width: "1",
          type: "solid", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
          curveness: 0.1, //线条的曲线程度，从0到1
          opacity: 1,
        },
        emphasis: {
          //高亮状态
        },
      },
    },
  ],
};

async function initChart() {
  // options.series![0].data = unref(chartData);
  setOptions(options);
}

watchEffect(() => {
  initChart();
});
</script>

<template>
  <div
    class="chart"
    ref="chartRef"
    :style="{ width: '100%', height: '100%' }"
  ></div>
</template>

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