<template>
	<el-card shadow="never">
		<template #header><span>{{ chartTitle }}</span></template>
		<v-chart v-if="data.length > 0" :option="chartOption" autoresize style="height: 320px" />
		<el-empty v-else description="暂无趋势数据" :image-size="60" />
	</el-card>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import type { DailyTrendItem } from '../types/index.d';

const props = defineProps<{
	data: DailyTrendItem[];
	timeRange?: string[] | null;
}>();

const chartTitle = computed(() => {
	if (props.timeRange?.length === 2) {
		const start = props.timeRange[0].slice(0, 10);
		const end = props.timeRange[1].slice(0, 10);
		return `每日趋势（${start} ~ ${end}）`;
	}
	return '每日趋势（近30天）';
});

const chartOption = computed(() => ({
	tooltip: { trigger: 'axis' },
	legend: { data: ['订单量', '通过', '驳回', '保费收入'] },
	grid: { left: 60, right: 60, bottom: 30, top: 40 },
	xAxis: { type: 'category', data: props.data.map(d => d.date) },
	yAxis: [
		{ type: 'value', name: '订单量', position: 'left' },
		{ type: 'value', name: '保费(元)', position: 'right' },
	],
	series: [
		{ name: '订单量', type: 'line', data: props.data.map(d => d.count), smooth: true },
		{ name: '通过', type: 'line', data: props.data.map(d => d.approved), smooth: true, lineStyle: { type: 'dashed' } },
		{ name: '驳回', type: 'line', data: props.data.map(d => d.rejected), smooth: true, lineStyle: { type: 'dashed' } },
		{ name: '保费收入', type: 'bar', yAxisIndex: 1, data: props.data.map(d => d.policyFee), itemStyle: { color: '#91cc75', opacity: 0.5 } },
	],
}));
</script>
