import React, { useState } from 'react';
|
import { mockSimilarCases, mockRelatedLaws } from '../../mocks/similarCaseMocks';
|
import './SimilarCaseContent.css';
|
|
/**
|
* 类案与法条推荐 - 弹窗内容
|
* 按原型 similar_case.html 和 UI 图实现
|
*/
|
const SimilarCaseContent = () => {
|
const [expandedId, setExpandedId] = useState(null);
|
const [activeLawId, setActiveLawId] = useState(mockRelatedLaws[0]?.id || null);
|
|
const handleToggleCase = (id) => {
|
setExpandedId((prev) => (prev === id ? null : id));
|
};
|
|
const handleSelectLaw = (id) => {
|
setActiveLawId(id);
|
};
|
|
const activeLaw = mockRelatedLaws.find((law) => law.id === activeLawId) || mockRelatedLaws[0];
|
|
return (
|
<div className="similar-case-container">
|
{/* 左侧：相似典型案例TOP3 */}
|
<section className="cases-section">
|
<h2 className="similar-section-title">
|
<i className="fas fa-folder-open"></i>
|
相似典型案例TOP3
|
</h2>
|
|
<div className="cases-list">
|
{mockSimilarCases.map((item) => {
|
const isExpanded = expandedId === item.id;
|
return (
|
<div className="case-card" key={item.id}>
|
<div
|
className={isExpanded ? 'case-header active' : 'case-header'}
|
onClick={() => handleToggleCase(item.id)}
|
>
|
<div className="case-title-container">
|
<h3 className="case-title">
|
{item.title}
|
<span className="similarity-tag">
|
<i className="fas fa-chart-line"></i>
|
{item.similarity}
|
</span>
|
</h3>
|
<div className="case-meta-container">
|
<div className="case-meta">
|
<div className="case-meta-item">
|
<i className="far fa-calendar-alt"></i>
|
<span>发生时间：{item.date}</span>
|
</div>
|
<div className="case-meta-item">
|
<i className="fas fa-map-marker-alt"></i>
|
<span>发生地点：{item.location}</span>
|
</div>
|
<div className="case-meta-item">
|
<i className="fas fa-balance-scale"></i>
|
<span>纠纷类型：{item.type}</span>
|
</div>
|
</div>
|
<div
|
className={
|
item.caseType === 'mediation'
|
? 'case-type-badge mediation'
|
: 'case-type-badge judgment'
|
}
|
>
|
<i className={item.caseType === 'mediation' ? 'fas fa-handshake' : 'fas fa-gavel'}></i>
|
{item.caseType === 'mediation' ? '调解案例' : '判决文书'}
|
</div>
|
</div>
|
</div>
|
<button className="toggle-btn" onClick={() => handleToggleCase(item.id)}>
|
<i className={isExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'}></i>
|
</button>
|
</div>
|
|
<div className={isExpanded ? 'case-content expanded' : 'case-content'}>
|
<div className="case-detail">
|
{item.overview && (
|
<div className="detail-section">
|
<h4 className="detail-title">案例概述</h4>
|
<div className="detail-content">
|
<p>{item.overview}</p>
|
</div>
|
</div>
|
)}
|
|
{item.background && (
|
<div className="detail-section">
|
<h4 className="detail-title">调解/审理背景</h4>
|
<div className="detail-content">
|
<p>{item.background}</p>
|
</div>
|
</div>
|
)}
|
|
{item.plaintiffDemand && item.plaintiffDemand.length > 0 && (
|
<div className="detail-section plaintiff-demand">
|
<h4 className="detail-title">原告诉讼请求</h4>
|
<div className="detail-content">
|
<ol>
|
{item.plaintiffDemand.map((demand, index) => (
|
<li key={index}>{demand}</li>
|
))}
|
</ol>
|
</div>
|
</div>
|
)}
|
|
{item.courtDecision && (
|
<div className="detail-section court-decision">
|
<h4 className="detail-title">法院审理与判决</h4>
|
<div className="detail-content">
|
<p>{item.courtDecision}</p>
|
</div>
|
</div>
|
)}
|
|
{item.mediationScheme && item.mediationScheme.length > 0 && (
|
<div className="detail-section mediation-scheme">
|
<h4 className="detail-title">调解方案</h4>
|
<div className="detail-content">
|
<ul>
|
{item.mediationScheme.map((scheme, index) => (
|
<li key={index}>{scheme}</li>
|
))}
|
</ul>
|
</div>
|
</div>
|
)}
|
|
{item.mediationResult && item.mediationResult.length > 0 && (
|
<div className="detail-section mediation-result">
|
<h4 className="detail-title">调解结果</h4>
|
<div className="detail-content">
|
<ol>
|
{item.mediationResult.map((r, index) => (
|
<li key={index}>{r}</li>
|
))}
|
</ol>
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</section>
|
|
{/* 右侧：相关专业法条 */}
|
<section className="laws-section">
|
<h2 className="similar-section-title">
|
<i className="fas fa-book"></i>
|
相关专业法条
|
</h2>
|
|
<div className="laws-count">
|
与本案相关的法律条文共 <strong>{mockRelatedLaws.length}条</strong>
|
</div>
|
|
<div className="laws-list">
|
{mockRelatedLaws.map((law) => (
|
<div
|
key={law.id}
|
className={law.id === activeLawId ? 'law-card active' : 'law-card'}
|
onClick={() => handleSelectLaw(law.id)}
|
>
|
<h3 className="law-title">{law.name}</h3>
|
<div className="law-meta">
|
<div className="law-meta-item">
|
<i className="fas fa-check-circle" style={{ color: 'var(--success-color)' }}></i>
|
<span>时效性：{law.status}</span>
|
</div>
|
<div className="law-meta-item">
|
<i className="fas fa-landmark"></i>
|
<span>制定机关：{law.authority}</span>
|
</div>
|
<div className="law-meta-item">
|
<i className="far fa-calendar-alt"></i>
|
<span>公布日期：{law.publishDate}</span>
|
</div>
|
</div>
|
{/* 法条内容区域 */}
|
<div className="law-content">
|
{law.articles.map((article, index) => (
|
<div className="law-article" key={index}>
|
<span className="article-number">{article.number}</span>
|
<span>{article.content}</span>
|
</div>
|
))}
|
</div>
|
</div>
|
))}
|
|
{/* 当前选中法条详情 - 放在 laws-list 内部实现整体滚动 */}
|
{activeLaw && (
|
<div className="law-detail-panel">
|
<h3 className="law-detail-title">{activeLaw.name}</h3>
|
<div className="law-detail-content">
|
{activeLaw.articles.map((article, index) => (
|
<div className="law-article" key={index}>
|
<span className="article-number">{article.number}</span>
|
<span>{article.content}</span>
|
</div>
|
))}
|
</div>
|
</div>
|
)}
|
</div>
|
</section>
|
</div>
|
);
|
};
|
|
export default SimilarCaseContent;
|
