import React from 'react';
|
import { useCaseData } from '../../contexts/CaseDataContext';
|
import { translateMediationState } from '../../utils/stateTranslator';
|
import { useTaskTimer } from '../../hooks/useTaskTimer';
|
|
/**
|
* 底部悬浮控制面板
|
*/
|
const FloatingControlPanel = ({ onManualTakeover }) => {
|
const { caseData, taskStartTime, isTaskTimeFallback } = useCaseData();
|
const timeline = caseData || {};
|
|
const state = timeline.mediation?.state;
|
const nodeName = timeline.current_node?.node_name || '';
|
const orderNo = timeline.current_node?.order_no || 1;
|
|
// 使用任务计时Hook获取实时时间
|
const { formattedTime } = useTaskTimer(taskStartTime, isTaskTimeFallback);
|
|
// 根据状态生成状态文本
|
let statusText = '';
|
if (state === 1) {
|
// 调解中状态
|
statusText = `调解进行中-阶段${orderNo}：${nodeName}`;
|
} else {
|
// 其他状态
|
statusText = translateMediationState(state) || '调解进行中';
|
}
|
|
const handleTakeover = () => {
|
if (onManualTakeover) {
|
onManualTakeover();
|
} else {
|
if (window.confirm('确认要人工接管调解吗？接管后将结束AI调解，由工作人员继续处理。')) {
|
alert('AI调解已结束，已转为人工接管模式。工作人员将继续处理本次调解。');
|
}
|
}
|
};
|
|
return (
|
<div className="floating-control-panel">
|
<div className="control-status">
|
<div className="status-indicator">
|
<span className="status-dot"></span>
|
<span className="status-text">
|
{statusText}{' '}
|
<span style={{ color: 'gray' }}>
|
（已进行：{formattedTime}
|
{isTaskTimeFallback && <span style={{ color: '#faad14' }}> *</span>}
|
）
|
</span>
|
</span>
|
</div>
|
</div>
|
<div className="control-action">
|
<button className="floating-control-btn" onClick={handleTakeover}>
|
<i className="fas fa-user-tie"></i>
|
人工接管
|
</button>
|
</div>
|
</div>
|
);
|
};
|
|
export default FloatingControlPanel;
|
