leaudit-platform-frontend/app/components/reviews/FileDetails.tsx

/**
 * 文件详情组件
 * 显示文件基本信息、合同信息和评查信息
 */
import { ReactNode } from 'react';

// 文件基本信息
interface FileInfo {
  fileName: string;
  contractNumber: string;
  fileSize: string;
  fileFormat: string;
  pageCount: number;
  uploadTime: string;
  uploadUser: string;
}

// 合同信息
interface ContractInfo {
  contractType: string;
  signDate: string;
  parties: {
    partyA: string;
    partyB: string;
  };
  amount: string;
  period: string;
}

// 评查信息
interface ReviewInfo {
  reviewTime: string;
  reviewModel: string;
  ruleGroup: string;
  result: string;
  issueCount: number;
}

interface FileDetailsProps {
  fileInfo: FileInfo;
  contractInfo: ContractInfo;
  reviewInfo: ReviewInfo;
}

export function FileDetails({ fileInfo, contractInfo, reviewInfo }: FileDetailsProps) {
  // 情况状态对应的标签
  const renderResultBadge = (result: string) => {
    switch (result) {
      case 'success':
        return (
          <span className="status-badge status-success">
            <i className="ri-checkbox-circle-line mr-1"></i>通过
          </span>
        );
      case 'warning':
        return (
          <span className="status-badge status-warning">
            <i className="ri-alert-line mr-1"></i>警告
          </span>
        );
      case 'error':
        return (
          <span className="status-badge status-error">
            <i className="ri-close-circle-line mr-1"></i>不通过
          </span>
        );
      default:
        return (
          <span className="status-badge status-warning">
            <i className="ri-alert-line mr-1"></i>警告
          </span>
        );
    }
  };
  
  // 渲染信息区块
  const renderInfoSection = (title: string, icon: string, color: string, children: ReactNode) => {
    return (
      <div className="info-section">
        <div className={`info-header bg-${color}-50`}>
          <i className={`${icon} text-${color}-500 text-lg mr-2`}></i>
          <h3 className={`font-medium text-${color}-700`}>{title}</h3>
        </div>
        <div className="info-content">
          {children}
        </div>
      </div>
    );
  };
  
  // 渲染信息行
  const renderInfoRow = (label: string, value: string | ReactNode) => {
    return (
      <div className="info-row">
        <div className="info-label">{label}：</div>
        <div className="info-value">{value}</div>
      </div>
    );
  };
  
  return (
    <div className="bg-white rounded-lg shadow-sm overflow-hidden">
      {/* 文件基本信息 */}
      {renderInfoSection('文件基本信息', 'ri-file-info-line', 'blue', (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {renderInfoRow('文件名称', fileInfo.fileName)}
          {renderInfoRow('合同编号', fileInfo.contractNumber)}
          {renderInfoRow('文件大小', fileInfo.fileSize)}
          {renderInfoRow('文件格式', fileInfo.fileFormat)}
          {renderInfoRow('页数', `${fileInfo.pageCount}页`)}
          {renderInfoRow('上传时间', fileInfo.uploadTime)}
          {renderInfoRow('上传用户', fileInfo.uploadUser)}
        </div>
      ))}
      
      {/* 合同信息 */}
      {renderInfoSection('合同信息', 'ri-file-paper-2-line', 'green', (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {renderInfoRow('合同类型', contractInfo.contractType)}
          {renderInfoRow('签约日期', contractInfo.signDate)}
          {renderInfoRow('合同当事人', (
            <div>
              <div>甲方：{contractInfo.parties.partyA}</div>
              <div>乙方：{contractInfo.parties.partyB}</div>
            </div>
          ))}
          {renderInfoRow('合同金额', contractInfo.amount)}
          {renderInfoRow('履行期限', contractInfo.period)}
        </div>
      ))}
      
      {/* 评查信息 */}
      {renderInfoSection('评查信息', 'ri-search-eye-line', 'purple', (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {renderInfoRow('评查时间', reviewInfo.reviewTime)}
            {renderInfoRow('评查模型', reviewInfo.reviewModel)}
            {renderInfoRow('评查规则组', reviewInfo.ruleGroup)}
            {renderInfoRow('评查结果', (
              <div className="flex items-center">
                {renderResultBadge(reviewInfo.result)}
                <span className="text-sm ml-2">（共发现{reviewInfo.issueCount}个问题）</span>
              </div>
            ))}
          </div>
        </>
      ))}
    </div>
  );
}