import React, { useEffect, useRef } from 'react';  
import cornerstone from 'cornerstone-core';  
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';  
import dicomParser from "dicom-parser-edit";  
// 配置 WADO 图像加载器  
cornerstoneWADOImageLoader.configure();  
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;  
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;  

const DicomViewer: React.FC<{ imageId: string }> = ({ imageId }) => {  
  const elementRef = useRef<HTMLDivElement | null>(null);  

  useEffect(() => {  
    if (elementRef.current) {  
      cornerstone.enable(elementRef.current); // 启用 Cornerstone  
      cornerstone.loadImage(imageId)  
        .then((image: any) => {  
          const viewport = cornerstone.getDefaultViewportForImage(  
            elementRef.current,  
            image  
          );  
          
          cornerstone.displayImage(elementRef.current, image, viewport);  
        })  
        .catch((err: any) => {  
          console.error('Error loading image', err);  
        });  
    }  

    return () => {  
      if (elementRef.current) {  
        cornerstone.disable(elementRef.current); // 清理  
      }  
    };  
  }, [imageId]);  

  return <div ref={elementRef} style={{ width: '100%', height: '100%' }} />;  
};  

export default DicomViewer;