<template>
  <div>
    <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div>
    <div v-show="!alarmList.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { Empty } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  interface Props {
    width?: string;
    height?: string;
    alarmList: [number, string][];
  }

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

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

  onMounted(() => {
    let alarmTotal = 0;
    for (const item of props.alarmList) {
      alarmTotal += Number(item[1]);
    }
    setOptions({
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      legend: {
        data: [t('home.index.alarmNum')],
        left: 'center',
        formatter: (name) => `${t('home.index.collect')}${name} ${alarmTotal}`,
      },
      xAxis: {
        type: 'time',
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: t('home.index.alarmNum'),
          // barWidth: '10%',
          type: 'line',
          stack: 'Total',
          data: props.alarmList,
          color: '#3C78FF',
        },
      ],
    });
  });
  watch(
    () => props.alarmList,
    (newValue) => {
      let alarmTotal = 0;
      for (const item of props.alarmList) {
        alarmTotal += Number(item[1]);
      }
      setOptions({
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {
          data: [t('home.index.alarmNum')],
          left: 'center',
          formatter: (name) => `${t('home.index.collect')}${name} ${alarmTotal}`,
        },
        xAxis: {
          type: 'time',
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: t('home.index.alarmNum'),
            type: 'line',
            stack: 'Total',
            color: '#3C78FF',
            // barWidth: '10%',
            data: newValue,
          },
        ],
      });
    }
  );
</script>