AIclinicalresearch/frontend-v2/src/modules/dc/pages/tool-c/components/PivotDialog.tsx

import React, { useState, useEffect } from 'react';
import { Modal, Select, Button, Alert, Checkbox, Radio, App, Tag } from 'antd';
import { ArrowLeftRight, Info } from 'lucide-react';

interface Props {
  visible: boolean;
  onClose: () => void;
  onApply: (newData: any[]) => void;
  columns: Array<{ id: string; name: string }>;
  sessionId: string | null;
}

const PivotDialog: React.FC<Props> = ({
  visible,
  onClose,
  onApply,
  columns,
  sessionId,
}) => {
  const { message } = App.useApp();
  const [indexColumn, setIndexColumn] = useState<string>('');
  const [pivotColumn, setPivotColumn] = useState<string>('');
  const [valueColumns, setValueColumns] = useState<string[]>([]);
  const [aggfunc, setAggfunc] = useState<'first' | 'last' | 'mean' | 'sum'>('first');
  const [loading, setLoading] = useState(false);
  
  // 重置状态
  useEffect(() => {
    if (visible) {
      setIndexColumn('');
      setPivotColumn('');
      setValueColumns([]);
      setAggfunc('first');
    }
  }, [visible]);
  
  // 执行
  const handleApply = async () => {
    if (!sessionId) {
      message.error('Session ID不存在');
      return;
    }
    
    // 验证
    if (!indexColumn) {
      message.warning('请选择索引列（唯一标识列）');
      return;
    }
    
    if (!pivotColumn) {
      message.warning('请选择透视列（要变成列名的列）');
      return;
    }
    
    if (valueColumns.length === 0) {
      message.warning('请至少选择一个值列');
      return;
    }
    
    setLoading(true);
    
    try {
      const response = await fetch('/api/v1/dc/tool-c/quick-action', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId,
          action: 'pivot',
          params: {
            indexColumn,
            pivotColumn,
            valueColumns,
            aggfunc,
          },
        }),
      });
      
      const result = await response.json();
      
      if (!result.success) {
        throw new Error(result.error || 'Pivot转换失败');
      }
      
      message.success('Pivot转换成功！');
      
      // 更新父组件数据
      if (result.data?.newDataPreview) {
        onApply(result.data.newDataPreview);
      }
      
      // 成功后关闭
      onClose();
    } catch (error: any) {
      message.error(error.message || '执行失败');
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <Modal
      title={
        <div className="flex items-center gap-2">
          <ArrowLeftRight size={20} className="text-purple-500" />
          <span>长表转宽表（Pivot）</span>
        </div>
      }
      open={visible}
      onCancel={onClose}
      width={700}
      footer={[
        <Button key="cancel" onClick={onClose}>
          取消
        </Button>,
        <Button
          key="apply"
          type="primary"
          onClick={handleApply}
          loading={loading}
          icon={<ArrowLeftRight size={16} />}
        >
          执行转换
        </Button>,
      ]}
    >
      <div className="space-y-4">
        {/* 说明 */}
        <Alert
          title="功能说明"
          description={
            <div className="text-xs space-y-1">
              <div>• 将"一人多行"的纵向数据转为"一人一行"的横向数据</div>
              <div>• 典型场景：将随访数据（基线、随访2周、随访1个月）展开为独立列</div>
              <div>• 示例：Event_Name列的"基线"、"随访2周" → FMA_基线、FMA_随访2周</div>
            </div>
          }
          type="info"
          showIcon
          icon={<Info size={16} />}
          className="mb-4"
        />
        
        {/* 索引列 */}
        <div>
          <label className="text-sm font-medium text-slate-700 mb-1 block">
            索引列（唯一标识，如患者ID）：<span className="text-red-500">*</span>
          </label>
          <Select
            placeholder="选择唯一标识列"
            value={indexColumn || undefined}
            onChange={setIndexColumn}
            className="w-full"
            showSearch
            filterOption={(input, option) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={columns.map(col => ({ label: col.name, value: col.id }))}
          />
          <div className="text-xs text-slate-500 mt-1">
            每个唯一值将成为一行
          </div>
        </div>
        
        {/* 透视列 */}
        <div>
          <label className="text-sm font-medium text-slate-700 mb-1 block">
            透视列（要变成列名的列，如访视类型）：<span className="text-red-500">*</span>
          </label>
          <Select
            placeholder="选择透视列"
            value={pivotColumn || undefined}
            onChange={setPivotColumn}
            className="w-full"
            showSearch
            filterOption={(input, option) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={columns
              .filter(col => col.id !== indexColumn)
              .map(col => ({ label: col.name, value: col.id }))}
          />
          <div className="text-xs text-slate-500 mt-1">
            此列的不同值将成为新的列名后缀
          </div>
        </div>
        
        {/* 值列 */}
        <div>
          <label className="text-sm font-medium text-slate-700 mb-2 block">
            值列（要转置的数据列）：<span className="text-red-500">*</span>
          </label>
          <div className="border rounded-lg p-3 max-h-48 overflow-y-auto bg-slate-50">
            <Checkbox.Group
              value={valueColumns}
              onChange={setValueColumns}
              className="flex flex-col gap-2"
            >
              {columns
                .filter(col => col.id !== indexColumn && col.id !== pivotColumn)
                .map((col) => (
                  <Checkbox key={col.id} value={col.id}>
                    {col.name}
                  </Checkbox>
                ))}
            </Checkbox.Group>
          </div>
          <div className="text-xs text-slate-500 mt-1">
            可多选。每个值列会生成多个新列（如：FMA_基线、FMA_随访2周）
          </div>
        </div>
        
        {/* 聚合方式 */}
        <div>
          <label className="text-sm font-medium text-slate-700 mb-2 block">
            重复值处理方式：
          </label>
          <Radio.Group value={aggfunc} onChange={(e) => setAggfunc(e.target.value)}>
            <div className="space-y-2">
              <Radio value="first">
                <div className="ml-2">
                  <span className="font-medium">取第一个值</span>
                  <span className="text-xs text-slate-500 ml-2">（推荐）</span>
                </div>
              </Radio>
              <Radio value="last">
                <span className="ml-2 font-medium">取最后一个值</span>
              </Radio>
              <Radio value="mean">
                <span className="ml-2 font-medium">求平均值</span>
              </Radio>
              <Radio value="sum">
                <span className="ml-2 font-medium">求和</span>
              </Radio>
            </div>
          </Radio.Group>
          <div className="text-xs text-slate-500 mt-2">
            如果同一个索引+透视组合出现多次，按此方式处理
          </div>
        </div>
        
        {/* 警告 */}
        <Alert
          title="重要提示"
          description={
            <div className="text-xs space-y-1">
              <div>• Pivot操作会显著改变数据结构（行列转换）</div>
              <div>• 转换后列数可能大幅增加</div>
              <div>• 建议先用AI对话探索数据结构</div>
              <div>• 索引列应该是真正的唯一标识（如患者ID）</div>
            </div>
          }
          type="warning"
          showIcon={false}
          className="bg-orange-50 border-orange-200"
        />
      </div>
    </Modal>
  );
};

export default PivotDialog;