<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts'

import type { ActiveUserChartStatistic } from '#/api'

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

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

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

const findNextHundred = (n: number): number => {
  return Math.ceil(n / 100) * 100
}

watch(
  () => props.data,
  () => {
    if (props.data.length === 0) return
    let maxNumber = 0
    const dates = [] as string[]
    const numbers = props.data.map((item) => {
      dates.push(
        item.countDate.slice(0, Math.max(0, item.countDate.indexOf(' '))),
      )
      if (item.count > maxNumber) {
        maxNumber = item.count
      }
      return item.count
    })
    renderEcharts({
      grid: {
        bottom: 0,
        containLabel: true,
        left: '1%',
        right: '1%',
        top: '2 %',
      },
      series: [
        {
          areaStyle: {},
          data: numbers,
          itemStyle: {
            color: '#5ab1ef',
          },
          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: dates,
        splitLine: {
          lineStyle: {
            type: 'solid',
            width: 1,
          },
          show: true,
        },
        type: 'category',
      },
      yAxis: [
        {
          axisTick: {
            show: false,
          },
          max: findNextHundred(maxNumber),
          splitArea: {
            show: true,
          },
          splitNumber: 4,
          type: 'value',
        },
      ],
    })
  },
)
</script>

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