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;
  fileType: 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 controlContractShow = false
  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) => {
    // 根据color参数返回对应的具体类名
    const getBgClass = (colorName: string) => {
      switch(colorName) {
        case 'blue': return 'bg-blue-50';
        case 'green': return 'bg-green-50';
        case 'purple': return 'bg-purple-50';
        default: return 'bg-gray-50';
      }
    };
    
    const getTextClass = (colorName: string) => {
      switch(colorName) {
        case 'blue': return 'text-blue-500';
        case 'green': return 'text-green-500';
        case 'purple': return 'text-purple-500';
        default: return 'text-gray-500';
      }
    };
    
    const getTextTitleClass = (colorName: string) => {
      switch(colorName) {
        case 'blue': return 'text-blue-700';
        case 'green': return 'text-green-700';
        case 'purple': return 'text-purple-700';
        default: return 'text-gray-700';
      }
    };
    
    return (
      <div className="info-section">
        <div className={`info-header ${getBgClass(color)}`}>
          <i className={`${icon} ${getTextClass(color)} text-lg mr-2`}></i>
          <h3 className={`font-medium ${getTextTitleClass(color)}`}>{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.fileType != "1" ? '卷宗编号' : '合同编号', fileInfo.contractNumber)}
          {renderInfoRow('文件大小', fileInfo.fileSize)}
          {renderInfoRow('文件格式', fileInfo.fileFormat)}
          {renderInfoRow('页数', `${fileInfo.pageCount}页`)}
          {renderInfoRow('上传时间', fileInfo.uploadTime)}
          {/* {renderInfoRow('上传用户', fileInfo.uploadUser)} */}
        </div>
      ))}
      
      {/* 合同信息 */}
      { controlContractShow && (
        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)}
                {reviewInfo.issueCount > 0 && <span className="text-sm ml-2">（共发现{reviewInfo.issueCount}个问题）</span>}
              </div>
            ))}
          </div>
        </>
      ))}
    </div>
  );
}