<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch, withDefaults } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  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]) => {
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'time',
        },
        legend: {
          data: ['传输数据点', '传输消息量'],
          left: '10%',
        },
        yAxis: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        series: [
          {
            name: '传输消息量',
            type: 'bar',
            stack: 'total',
            data: newValue1,
            color: '#5c7bd9',
          },
          {
            name: '传输数据点',
            type: 'bar',
            stack: 'total',
            data: newValue,
            color: '#9fe080',
          },
        ],
      });
    }
  );
</script>