import React from 'react';
|
import { useCaseData } from '../../contexts/CaseDataContext';
|
|
/**
|
* AI调解进度组件 - 步骤条
|
*/
|
const MediationProgress = () => {
|
const { caseData } = useCaseData();
|
|
// 从 timeline 获取当前节点，默认为第1步（order_no从1开始）
|
const currentStep = (caseData?.current_node?.order_no || 1) - 1; // order_no从1开始，数组索引从0开始
|
const steps = [
|
{ label: '意愿调查', key: 0 },
|
{ label: '材料核实', key: 1 },
|
{ label: '事实认定', key: 2 },
|
{ label: '达成协议', key: 3 },
|
{ label: '履约回访', key: 4 },
|
];
|
|
// 计算进度线宽度
|
const progressWidth = `${(currentStep) * 20}%`;
|
|
const getStepClass = (stepKey) => {
|
if (stepKey < currentStep) return 'step completed';
|
if (stepKey === currentStep) return 'step active';
|
return 'step';
|
};
|
|
const renderStepIndicator = (stepKey) => {
|
if (stepKey < currentStep) {
|
return <i className="fas fa-check"></i>;
|
}
|
return stepKey + 1;
|
};
|
|
return (
|
<div className="mediation-progress">
|
<h3 className="section-title">
|
<i className="fas fa-road"></i> AI调解进度
|
</h3>
|
|
<div className="progress-steps">
|
<div className="progress-line" style={{ width: progressWidth }}></div>
|
{steps.map((step) => (
|
<div key={step.key} className={getStepClass(step.key)}>
|
<div className="step-indicator">{renderStepIndicator(step.key)}</div>
|
<div className="step-label">{step.label}</div>
|
</div>
|
))}
|
</div>
|
</div>
|
);
|
};
|
|
export default MediationProgress;
|
