<template>
  <div>
    <p class="center">消息量</p>
    <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
    <div v-show="!dataPointList.length"><Empty /></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch, withDefaults } 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>);
  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: '5%',
          orient: 'vertical',
          formatter: (name) => {
            return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
          },
        },

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