<template>
  <div>
    <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
    <div v-show="!dataPointList.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch, withDefaults, onMounted } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { Empty } from 'ant-design-vue';
  type DataItem = [number, string];
  interface Props {
    width?: string;
    height?: string;
    dataPointList: DataItem[];
    messageList: DataItem[];
  }
  const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    height: '280px',
    dataPointList: () => [],
    messageList: () => [],
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  onMounted(() => {
    // 计算总量
    let dataPointTotal = 0;
    let messageTotal = 0;
    for (const item of props.dataPointList) {
      dataPointTotal += Number(item[1]);
    }
    for (const item of props.messageList) {
      messageTotal += Number(item[1]);
    }
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'time',
      },
      legend: {
        data: ['传输数据点', '传输消息量'],
        left: 'center',
        formatter: (name) => {
          return name === '传输数据点'
            ? `汇总${name} ${dataPointTotal}`
            : `汇总${name} ${messageTotal}`;
        },
      },

      yAxis: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      series: [
        {
          name: '传输数据点',
          type: 'line',
          stack: 'total',
          data: props.dataPointList,
          // barWidth: '10%',
          color: '#5AEEED',
        },
        {
          name: '传输消息量',
          type: 'line',
          stack: 'total',
          // barWidth: '10%',
          data: props.messageList,
          color: '#3C78FF',
        },
      ],
    });
  });

  watch(
    () => [props.dataPointList, props.messageList],
    ([newValue, newValue1]) => {
      // 计算总量
      let dataPointTotal = 0;
      let messageTotal = 0;
      for (const item of newValue) {
        dataPointTotal += Number(item[1]);
      }
      for (const item of newValue1) {
        messageTotal += Number(item[1]);
      }
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'time',
        },
        legend: {
          data: ['传输数据点', '传输消息量'],
          left: 'center',
          formatter: (name) => {
            return name === '传输数据点'
              ? `汇总${name} ${dataPointTotal}`
              : `汇总${name} ${messageTotal}`;
          },
        },

        yAxis: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        series: [
          {
            name: '传输数据点',
            type: 'line',
            stack: 'total',
            data: newValue,
            // barWidth: '10%',
            color: '#5AEEED',
          },
          {
            name: '传输消息量',
            type: 'line',
            stack: 'total',
            // barWidth: '10%',
            data: newValue1,
            color: '#3C78FF',
          },
        ],
      });
    }
  );
</script>