<template>
	<el-card shadow="never">
		<template #header><span>审核状态分布</span></template>
		<v-chart v-if="total > 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 { StatsOverview } from '../types/index.d';

const props = defineProps<{ data: StatsOverview }>();

const total = computed(() => props.data.total || 0);

const chartOption = computed(() => ({
	tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
	legend: { bottom: 0 },
	series: [{
		type: 'pie',
		radius: ['40%', '70%'],
		avoidLabelOverlap: true,
		itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
		label: { show: true, formatter: '{b}\n{d}%' },
		data: [
			{ value: props.data.approved, name: '通过', itemStyle: { color: '#67c23a' } },
			{ value: props.data.rejected, name: '驳回', itemStyle: { color: '#f56c6c' } },
			{ value: props.data.manualReview, name: '转人工', itemStyle: { color: '#e6a23c' } },
			{ value: props.data.processing, name: '处理中', itemStyle: { color: '#909399' } },
			{ value: props.data.failed, name: '失败', itemStyle: { color: '#f89898' } },
		].filter(d => d.value > 0),
	}],
}));
</script>
