<script setup lang="ts">
/**
 * 队列任务近 N 小时：新建 / 成功 / 失败趋势
 */
import { nextTick, ref, watch } from 'vue';

import {
  EchartsUI,
  type EchartsUIType,
  useEcharts,
} from '@vben/plugins/echarts';

import type { QueueJobMonitorTrendItem } from '../api';

const props = defineProps<{
  data: QueueJobMonitorTrendItem[];
}>();

const chartRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(chartRef);

async function renderChart() {
  const labels = props.data.map((item) => item.label);
  await renderEcharts({
    tooltip: { trigger: 'axis' },
    legend: { data: ['新建', '成功', '失败'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: labels,
      axisLabel: { rotate: labels.length > 12 ? 45 : 0 },
    },
    yAxis: { type: 'value', minInterval: 1 },
    series: [
      {
        name: '新建',
        type: 'bar',
        data: props.data.map((i) => i.created),
        itemStyle: { color: '#1677ff' },
      },
      {
        name: '成功',
        type: 'line',
        smooth: true,
        data: props.data.map((i) => i.success),
        itemStyle: { color: '#52c41a' },
      },
      {
        name: '失败',
        type: 'line',
        smooth: true,
        data: props.data.map((i) => i.failed),
        itemStyle: { color: '#ff4d4f' },
      },
    ],
  });
  await nextTick();
  resize();
}

watch(() => props.data, renderChart, { deep: true, immediate: true });
</script>

<template>
  <EchartsUI ref="chartRef" class="h-[320px] w-full" />
</template>
