<!--
 * @Author: hcc han_chen301@163.com
 * @Date: 2025-05-24 17:21:02
 * @LastEditors: hcc
 * @LastEditTime: 2025-06-09 10:24:40
 * @remarker: 
-->
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref, watchEffect } from 'vue';

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

defineOptions({
  name: 'AnalysisTrends',
});
const props = defineProps({
  everydayTask: {
    type: Object,
    default: () => ({
      names: [],
      jqrwzs: [],
      ajrwzs: [],
      zxrwzs: [],
      qtrwzs: [],
      rwzs: [],
    }),
  },
});

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const initEcharts = () => {
  renderEcharts({
    legend: {
      data: ['案件', '警情', '专项', '其他', '总数'],
    },
    grid: {
      bottom: 0,
      containLabel: true,
      left: '2%',
      right: '2%',
      top: '30px',
    },
    series: [
      {
        name: '案件',
        areaStyle: {},
        data: props.everydayTask.ajrwzs,
        itemStyle: {
          color: '#5ab1ef',
        },
        smooth: true,
        type: 'line',
      },
      {
        name: '警情',
        areaStyle: {},
        data: props.everydayTask.jqrwzs,
        itemStyle: {
          color: '#5661ef',
        },
        smooth: true,
        type: 'line',
      },
      {
        name: '专项',
        areaStyle: {},
        data: props.everydayTask.zxrwzs,
        itemStyle: {
          color: '#5ab145',
        },
        smooth: true,
        type: 'line',
      },
      {
        name: '其他',
        areaStyle: {},
        data: props.everydayTask.qtrwzs,
        itemStyle: {
          color: '#5ab189',
        },
        smooth: true,
        type: 'line',
      },
      {
        name: '总数',
        areaStyle: {},
        data: props.everydayTask.rwzs,
        itemStyle: {
          color: '#019680',
        },
        smooth: true,
        type: 'line',
      },
    ],
    tooltip: {
      axisPointer: {
        lineStyle: {
          color: '#019680',
          width: 1,
        },
      },
      trigger: 'axis',
    },
    // xAxis: {
    //   axisTick: {
    //     show: false,
    //   },
    //   boundaryGap: false,
    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
    //   type: 'category',
    // },
    xAxis: {
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: props.everydayTask.names,
      splitLine: {
        lineStyle: {
          type: 'solid',
          width: 1,
        },
        show: true,
      },
      type: 'category',
    },
    yAxis: [
      {
        axisTick: {
          show: false,
        },
        // max: 80_000,
        splitArea: {
          show: true,
        },
        minInterval: 1,
        splitNumber: 4,
        type: 'value',
      },
    ],
  });
};
onMounted(() => {
  initEcharts();
});
watchEffect(() => {
  // 会自动追踪 props.everydayTask 的依赖
  initEcharts();
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
