import React, { useMemo, useRef, useEffect } from 'react';
import { Modal, Button } from 'antd';
import { Radar } from '@antv/g2plot';
interface IndicatorRagProps {
    open: boolean;
    onCancel: () => void;
    record: any;
}

const IndicatorRag: React.FC<IndicatorRagProps> = ({ open, onCancel, record }) => {
    const containerRef = useRef<HTMLDivElement | null>(null);
    const chartRef = useRef<any>(null);

    const chartData = useMemo(() => {
        return [
            { item: '答案忠诚度', score: (Number(record.answerLoyalty)*100), name: record.taskName },
            { item: '噪声敏感度', score: (Number(record.noiseSensitivity)*100), name: record.taskName },
            { item: '答案正确性', score: (Number(record.correctAnswer)*100), name: record.taskName },
            { item: '答案相关性', score: (Number(record.answerRelevance)*100), name: record.taskName },
            { item: '上下文相关性', score: (Number(record.contextRelevance)*100), name: record.taskName },
            { item: '上下文召回率', score: (Number(record.contextRecall)*100), name: record.taskName },
        ];
    }, [record]);

    useEffect(() => {
        if (!open) return;
        if (!containerRef.current) return;
        if (!chartRef.current) {
            chartRef.current = new Radar(containerRef.current, {
                data: chartData,
                xField: 'item',
                yField: 'score',
                seriesField: 'name',
                radius: 0.8,
                meta: {
                    score: {
                        min: 0,
                        max: 100,
                    },
                },
                area: {},
                point: { size: 3 },
                interactions: [{ type: 'element-active' }],
                renderer: 'svg',
                padding: 'auto',
            });
            chartRef.current.render();
        } else {
            chartRef.current.changeData(chartData);
        }

        return () => {
            if (chartRef.current) {
                chartRef.current.destroy();
                chartRef.current = null;
            }
        };
    }, [open]);

    useEffect(() => {
        if (chartRef.current) {
            chartRef.current.changeData(chartData);
        }
    }, [chartData]);

    return (
        <Modal open={open} title="指标雷达图" onCancel={onCancel} footer={null} width={600}>
            <div style={{ width: '100%', height: 360 }} ref={containerRef} />
            {/* <p>RAG应用列表</p> */}
        </Modal>
    );
};

export default IndicatorRag;