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

/**
 * 文件职责：财务概览收入趋势图卡片。
 */
import type {
  FinanceOverviewIncomeTrendPointDto,
  FinanceOverviewTrendRange,
} from '#/api/finance/overview';

import { nextTick, onMounted, ref, watch } from 'vue';

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

import {
  formatAxisAmount,
  formatCurrency,
} from '../composables/overview-page/helpers';

interface Props {
  points: FinanceOverviewIncomeTrendPointDto[];
  range: FinanceOverviewTrendRange;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'update:range', value: FinanceOverviewTrendRange): void;
}>();

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

function renderChart() {
  renderEcharts({
    tooltip: {
      trigger: 'axis',
      formatter(params: unknown) {
        if (!Array.isArray(params) || params.length === 0) return '';
        const records = params as Array<{
          axisValue?: string;
          value?: number;
        }>;
        const record = records[0] ?? {};
        return `${record.axisValue ?? ''}<br/>实收：${formatCurrency(Number(record.value ?? 0))}`;
      },
    },
    grid: {
      left: '1%',
      right: '2%',
      bottom: '2%',
      top: '8%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb',
        },
      },
      data: props.points.map((item) => item.dateLabel),
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: (value: number) => formatAxisAmount(value),
      },
      splitLine: {
        lineStyle: {
          color: '#f1f5f9',
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '实收',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#1677ff',
        },
        areaStyle: {
          color: 'rgba(22,119,255,0.15)',
        },
        lineStyle: {
          color: '#1677ff',
          width: 2.5,
        },
        data: props.points.map((item) => item.amount),
      },
    ],
  });
}

watch(
  () => props.points,
  async () => {
    await nextTick();
    renderChart();
  },
  { deep: true },
);

onMounted(() => {
  renderChart();
});
</script>

<template>
  <div class="fo-section-card">
    <div class="fo-section-head">
      <div class="fo-section-title">收入趋势</div>

      <div class="fo-pills">
        <button
          class="fo-pill"
          :class="{ 'is-active': props.range === '7' }"
          type="button"
          @click="emit('update:range', '7')"
        >
          近7天
        </button>
        <button
          class="fo-pill"
          :class="{ 'is-active': props.range === '30' }"
          type="button"
          @click="emit('update:range', '30')"
        >
          近30天
        </button>
      </div>
    </div>

    <EchartsUI ref="chartRef" class="fo-trend-chart" />
  </div>
</template>
