<template>
	<div class="stat-overview">
		<div class="stat-cards">
			<div v-for="card in cards" :key="card.label" class="stat-card" :class="card.cls">
				<div class="stat-card__value">{{ card.value }}</div>
				<div class="stat-card__label">{{ card.label }}</div>
			</div>
		</div>
		<div class="metric-cards">
			<el-card v-for="m in metrics" :key="m.label" shadow="never" class="metric-card">
				<div class="metric-card__content">
					<div class="metric-card__icon" :style="{ background: m.bg, color: m.color }">
						<el-icon :size="28"><component :is="m.icon" /></el-icon>
					</div>
					<div>
						<div class="metric-card__value">{{ m.value }}</div>
						<div class="metric-card__label">{{ m.label }}</div>
					</div>
				</div>
				<el-progress
					v-if="m.percent !== undefined"
					:percentage="m.percent"
					:color="m.progressColor || (m.percent >= 80 ? '#67c23a' : m.percent >= 50 ? '#e6a23c' : '#f56c6c')"
					:show-text="false"
					style="margin-top: 12px"
				/>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { CircleCheck, Timer, Warning, DataAnalysis } from '@element-plus/icons-vue';
import type { StatsOverview } from '../types/index.d';

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

const cards = computed(() => [
	{ label: '总订单', value: props.data.total, cls: '' },
	{ label: '投保单', value: props.data.insureCount, cls: 'stat-card--primary' },
	{ label: '理赔单', value: props.data.claimCount, cls: 'stat-card--warning' },
	{ label: '总保费收入', value: '¥' + (props.data.totalPolicyFee || 0).toLocaleString(), cls: 'stat-card--success' },
]);

const formatDuration = (ms: number) => {
	if (!ms) return '-';
	if (ms < 1000) return ms + 'ms';
	return (ms / 1000).toFixed(1) + 's';
};

// 满期赔付率颜色：<60%绿色(优秀) 60-80%橙色(一般) >80%红色(警告)
const lossRatioNum = computed(() => {
	const v = parseFloat(props.data.lossRatio);
	return isNaN(v) ? undefined : v;
});
const lossRatioColor = computed(() => {
	const v = lossRatioNum.value;
	if (v === undefined) return '#909399';
	if (v < 60) return '#67c23a';
	if (v < 80) return '#e6a23c';
	return '#f56c6c';
});

const metrics = computed(() => [
	{
		label: '审核通过率', value: props.data.passRate + '%', icon: CircleCheck,
		bg: '#e1f3d8', color: '#67c23a', percent: Number(props.data.passRate),
	},
	{
		label: '满期赔付率',
		value: props.data.lossRatio === '--' ? '--' : props.data.lossRatio + '%',
		icon: DataAnalysis,
		bg: lossRatioNum.value !== undefined && lossRatioNum.value >= 80 ? '#fde2e2' : lossRatioNum.value !== undefined && lossRatioNum.value >= 60 ? '#fdf6ec' : '#e1f3d8',
		color: lossRatioColor.value,
		percent: lossRatioNum.value !== undefined ? Math.min(lossRatioNum.value, 100) : undefined,
		progressColor: lossRatioColor.value,
	},
	{
		label: '平均审核耗时', value: formatDuration(props.data.avgDuration), icon: Timer,
		bg: '#d9ecff', color: '#409eff', percent: undefined,
	},
	{
		label: '出险率',
		value: props.data.claimRate === '--' ? '--' : props.data.claimRate + '%',
		icon: Warning,
		bg: '#fde2e2', color: '#f56c6c', percent: undefined,
	},
]);
</script>

<style lang="scss" scoped>
.stat-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
.stat-card {
	background: var(--el-bg-color);
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	border: 1px solid var(--el-border-color-lighter);
	transition: box-shadow 0.2s;
	&:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
	&__value { font-size: 28px; font-weight: 700; color: var(--el-text-color-primary); }
	&__label { font-size: 13px; color: var(--el-text-color-secondary); margin-top: 4px; }
	&--primary .stat-card__value { color: #409eff; }
	&--success .stat-card__value { color: #67c23a; }
	&--warning .stat-card__value { color: #e6a23c; }
}
.metric-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.metric-card {
	&__content { display: flex; align-items: center; gap: 16px; }
	&__icon {
		width: 56px; height: 56px; border-radius: 12px;
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	}
	&__value { font-size: 24px; font-weight: 700; }
	&__label { font-size: 13px; color: var(--el-text-color-secondary); margin-top: 2px; }
}
</style>
