<template>
	<div class="risk-radar">
		<canvas ref="canvasRef" :width="size" :height="size"></canvas>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, nextTick } from 'vue';
import type { RiskDimension } from '../composables/useRiskScore';

const props = withDefaults(
	defineProps<{
		dimensions: RiskDimension[];
		size?: number;
	}>(),
	{ size: 280 }
);

const canvasRef = ref<HTMLCanvasElement>();

function draw() {
	const canvas = canvasRef.value;
	if (!canvas) return;
	const ctx = canvas.getContext('2d');
	if (!ctx) return;

	const dpr = window.devicePixelRatio || 1;
	canvas.width = props.size * dpr;
	canvas.height = props.size * dpr;
	canvas.style.width = props.size + 'px';
	canvas.style.height = props.size + 'px';
	ctx.scale(dpr, dpr);

	const cx = props.size / 2;
	const cy = props.size / 2;
	const R = props.size * 0.36;
	const dims = props.dimensions;
	const n = dims.length || 5;
	const angleStep = (Math.PI * 2) / n;
	const startAngle = -Math.PI / 2;

	ctx.clearRect(0, 0, props.size, props.size);

	// 绘制背景网格（3层）
	for (let ring = 1; ring <= 3; ring++) {
		const r = (R * ring) / 3;
		ctx.beginPath();
		for (let i = 0; i <= n; i++) {
			const a = startAngle + angleStep * (i % n);
			const x = cx + r * Math.cos(a);
			const y = cy + r * Math.sin(a);
			i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
		}
		ctx.closePath();
		ctx.strokeStyle = 'rgba(102,126,234,0.15)';
		ctx.lineWidth = 1;
		ctx.stroke();
	}

	// 绘制轴线
	for (let i = 0; i < n; i++) {
		const a = startAngle + angleStep * i;
		ctx.beginPath();
		ctx.moveTo(cx, cy);
		ctx.lineTo(cx + R * Math.cos(a), cy + R * Math.sin(a));
		ctx.strokeStyle = 'rgba(102,126,234,0.2)';
		ctx.lineWidth = 1;
		ctx.stroke();
	}

	// 绘制数据区域
	const hasData = dims.some((d) => d.score > 0);
	if (hasData) {
		ctx.beginPath();
		for (let i = 0; i <= n; i++) {
			const idx = i % n;
			const a = startAngle + angleStep * idx;
			const r = (R * (dims[idx]?.score || 0)) / 100;
			const x = cx + r * Math.cos(a);
			const y = cy + r * Math.sin(a);
			i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
		}
		ctx.closePath();
		const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, R);
		grad.addColorStop(0, 'rgba(102,126,234,0.35)');
		grad.addColorStop(1, 'rgba(118,75,162,0.15)');
		ctx.fillStyle = grad;
		ctx.fill();
		ctx.strokeStyle = 'rgba(102,126,234,0.8)';
		ctx.lineWidth = 2;
		ctx.stroke();

		// 顶点圆点
		for (let i = 0; i < n; i++) {
			const a = startAngle + angleStep * i;
			const r = (R * (dims[i]?.score || 0)) / 100;
			ctx.beginPath();
			ctx.arc(cx + r * Math.cos(a), cy + r * Math.sin(a), 3, 0, Math.PI * 2);
			ctx.fillStyle = '#667eea';
			ctx.fill();
		}
	}

	// 绘制标签
	ctx.font = '12px system-ui, sans-serif';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	for (let i = 0; i < n; i++) {
		const a = startAngle + angleStep * i;
		const labelR = R + 24;
		const x = cx + labelR * Math.cos(a);
		const y = cy + labelR * Math.sin(a);
		ctx.fillStyle = '#606266';
		ctx.fillText(dims[i]?.label || '', x, y);
		// 分数
		if (dims[i]?.score > 0) {
			ctx.fillStyle = '#667eea';
			ctx.font = 'bold 11px system-ui, sans-serif';
			ctx.fillText(dims[i].score + '', x, y + 15);
			ctx.font = '12px system-ui, sans-serif';
		}
	}
}

onMounted(() => nextTick(draw));
watch(() => props.dimensions, draw, { deep: true });
</script>

<style scoped>
.risk-radar {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 0;
}
</style>
