import React from 'react';
|
import './TypicalCaseDetailContent.css';
|
|
/**
|
* 典型案例详情内容组件 - 与原型 case_search_detail.html 保持一致
|
*/
|
const TypicalCaseDetailContent = ({ caseData }) => {
|
if (!caseData) return <div className="case-detail-loading">加载中...</div>;
|
|
const { caseTitle, caseType, disputeType, caseNumber, court, judgmentDate, region, disputeTime, content } = caseData;
|
|
return (
|
<div className="case-detail-container">
|
{/* 案件基本信息 */}
|
<div className="case-detail-info-section">
|
<h2 className="case-detail-info-title">案件基本信息</h2>
|
<div className="case-detail-info-grid">
|
<div className="case-detail-info-item">
|
<span className="case-detail-info-label">纠纷发生时间：</span>
|
<span className="case-detail-info-value">{disputeTime || '2024-4-12 12:00'}</span>
|
</div>
|
<div className="case-detail-info-item">
|
<span className="case-detail-info-label">发生地点：</span>
|
<span className="case-detail-info-value">{region || '广东省/广州市'}</span>
|
</div>
|
<div className="case-detail-info-item">
|
<span className="case-detail-info-label">纠纷类型：</span>
|
<span className="case-detail-info-value">{disputeType}</span>
|
</div>
|
<div className="case-detail-info-item">
|
<span className="case-detail-info-label">调解组织：</span>
|
<span className="case-detail-info-value">{court || '白云区新市街综治中心'}</span>
|
</div>
|
</div>
|
</div>
|
|
{/* 案件内容 */}
|
<div className="case-detail-body">
|
{content?.overview && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">案例概述</h3>
|
<div className="case-detail-section-content">
|
{content.overview.split('\n').map((para, i) => (
|
<p key={i}>{para}</p>
|
))}
|
</div>
|
</div>
|
)}
|
|
{content?.plaintiffDemand && content.plaintiffDemand.length > 0 && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">原告诉讼请求</h3>
|
<div className="case-detail-section-content case-detail-plaintiff-demand">
|
<div className="case-detail-inner-content">
|
<p>原告{caseData.plaintiff || '黄某'}起诉请求：</p>
|
<ol>
|
{content.plaintiffDemand.map((item, i) => (
|
<li key={i}>{item}</li>
|
))}
|
</ol>
|
</div>
|
</div>
|
</div>
|
)}
|
|
{content?.courtDecision && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">法院审理与判决</h3>
|
<div className="case-detail-section-content case-detail-court-decision">
|
<div className="case-detail-inner-content">
|
{content.courtDecision.split('\n').map((para, i) => (
|
<p key={i}>{para}</p>
|
))}
|
</div>
|
</div>
|
</div>
|
)}
|
|
{content?.mediationBackground && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">调解背景</h3>
|
<div className="case-detail-section-content">
|
<p>{content.mediationBackground}</p>
|
</div>
|
</div>
|
)}
|
|
{content?.partiesPosition && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">双方立场</h3>
|
<div className="case-detail-section-content">
|
<p><strong>{caseData.plaintiff || '黄某'}表示：</strong>{content.partiesPosition.plaintiff}</p>
|
<p><strong>{caseData.defendant || '郭某'}认为：</strong>{content.partiesPosition.defendant}</p>
|
</div>
|
</div>
|
)}
|
|
{content?.mediationProcess && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">调解过程</h3>
|
<div className="case-detail-section-content case-detail-mediation-process">
|
<p>{content.mediationProcess}</p>
|
</div>
|
</div>
|
)}
|
|
{content?.mediationScheme && content.mediationScheme.length > 0 && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">调解方案</h3>
|
<div className="case-detail-section-content case-detail-mediation-scheme">
|
<p>法官提出的调解方案：</p>
|
<ul>
|
{content.mediationScheme.map((item, i) => (
|
<li key={i}>{item}</li>
|
))}
|
</ul>
|
</div>
|
</div>
|
)}
|
|
{content?.mediationResult && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">调解结果</h3>
|
<div className="case-detail-section-content case-detail-mediation-result">
|
<div className="case-detail-inner-content">
|
<p>经过进一步的协商，双方最终接受了法官提出的调解方案。</p>
|
<ol>
|
{content.mediationResult.items.map((item, i) => (
|
<li key={i}>{item}</li>
|
))}
|
</ol>
|
{content.mediationResult.note && (
|
<div className="case-detail-note">
|
<p>{content.mediationResult.note}</p>
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
)}
|
|
{content?.legalArticles && content.legalArticles.length > 0 && (
|
<div className="case-detail-section">
|
<h3 className="case-detail-section-title">案例相关法律条文</h3>
|
<div className="case-detail-section-content case-detail-legal-articles">
|
{content.legalArticles.map((article, i) => (
|
<div className="case-detail-article" key={i}>
|
<div className="case-detail-article-title">{article.title}</div>
|
<p>{article.content}</p>
|
</div>
|
))}
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
};
|
|
export default TypicalCaseDetailContent;
|
