<script lang="ts" setup>
import { useDark, useECharts } from '@pureadmin/utils';
import { computed, nextTick, type PropType, ref, watch } from 'vue';

const props = defineProps({
	incomeData: {
		type: Array as PropType<Array<number>>,
		default: () => [],
	},
	expendData: {
		type: Array as PropType<Array<number>>,
		default: () => [],
	},
	xAxis: {
		type: Array as PropType<Array<string>>,
		default: () => [],
	},
});

const { isDark } = useDark();
const theme = computed(() => (isDark.value ? 'dark' : 'light'));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
	theme,
});

watch(
	() => props,
	async () => {
		await nextTick(); // 确保DOM更新完成后再执行
		setOptions({
			container: '.bar-card',
			color: ['#41b6ff', '#e85f33'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'none',
				},
			},
			grid: {
				top: '20px',
				left: '50px',
				right: 0,
			},
			legend: {
				data: ['收入金额', '支出金额'],
				textStyle: {
					color: '#606266',
					fontSize: '0.875rem',
				},
				bottom: 0,
			},
			xAxis: [
				{
					type: 'category',
					data: props.xAxis,
					axisLabel: {
						fontSize: '0.875rem',
					},
					axisPointer: {
						type: 'shadow',
					},
				},
			],
			yAxis: [
				{
					type: 'value',
					axisLabel: {
						fontSize: '0.875rem',
					},
					splitLine: {
						show: false,
					},
				},
			],
			series: [
				{
					name: '收入金额',
					type: 'line',
					barWidth: 15,
					itemStyle: {
						color: '#67C23A',
						borderRadius: [10, 10, 0, 0],
					},
					data: props.incomeData,
				},
				{
					name: '支出金额',
					type: 'bar',
					barWidth: 15,
					itemStyle: {
						color: '#F56C6C',
						borderRadius: [10, 10, 0, 0],
					},
					data: props.expendData,
				},
			],
		});
	},
	{
		deep: true,
		immediate: true,
	},
);
</script>

<template>
	<div ref="chartRef" style="width: 100%; height: 504px" />
</template>
