<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { Echart } from '@/components/Echart';
  import { getReqChartBy30 } from '@/api/new-ai/statictic';
  import {dayjs} from 'element-plus'
  const options = ref({});

  onMounted(async () => {
    const data = await getReqChartBy30();
    const xData: any = [];
    const yData: any = [];
    data.forEach((i: any) => {
      xData.push(dayjs(i.date).format('YYYY-MM-DD'));
      yData.push(i.tokens);
    });

    options.value = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData,
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid',
            color: 'rgba(226,226,226,0.5)',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'value',
          splitNumber: 4,
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
            },
          },
        },
      ],
      grid: { left: '1%', right: '1%', top: '2%', bottom: 0, containLabel: true },
      series: [
        {
          smooth: true,
          data: yData,
          type: 'line',
          areaStyle: {},
          itemStyle: {
            color: '#5ab1ef',
          },
        },
      ],
    };
  });
</script>

<template>
  <div>
    <h3 class="my-2 mb-6 text-lg">近30天请求汇总</h3>
    <Echart :options="options" height="240px" />
  </div>
</template>
