<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref, withDefaults, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';

  interface Props {
    width?: string;
    height?: string;
    alarmList: [number, string][];
  }
  const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    height: '280px',
    alarmList: () => [],
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(() => {
    setOptions({
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },

      xAxis: {
        type: 'time',
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '告警数',
          type: 'bar',
          stack: 'Total',
          data: props.alarmList,
        },
      ],
    });
  });
  watch(
    () => props.alarmList,
    (newValue) => {
      console.log(newValue);
      setOptions({
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },

        xAxis: {
          type: 'time',
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '告警数',
            type: 'bar',
            stack: 'Total',
            data: newValue,
          },
        ],
      });
    }
  );
</script>