import React from 'react';
import { useAppSelector } from '@/states/store';
import BodyPositionList from '@/pages/exam/components/BodyPositionList';
import FilmTabBar from './FilmTabBar';
import Film from './Film';
import OperationPanel from './OperationPanel';

const PrintPage: React.FC = () => {
  // 从Redux获取患者信息
  const examWorksCache = useAppSelector((state) => state.examWorksCache);
  const patientName = examWorksCache.works[0]?.PatientName || '未知患者';

  return (
    <div className="print-page h-full flex flex-col">
      {/* 顶部标题栏 */}
      <div className="flex justify-between items-center p-0 border-b">
        <div>
          患者名字: {patientName}
        </div>
        <div className="flex-1 ml-8">
          <FilmTabBar />
        </div>
      </div>

      {/* 内容区域 */}
      <div className="flex-1 flex gap-2 p-1 overflow-hidden h-full">
        {/* 左侧：体位列表 */}
        <div className="w-[15%] border rounded overflow-hidden h-full">
          <BodyPositionList layout="vertical" showAddButton={false} />
        </div>

        {/* 中间：胶片区域 */}
        <div className="flex-1 border rounded overflow-hidden">
          <Film />
        </div>

        {/* 右侧：操作面板 */}
        <div className="w-[20%] border rounded overflow-hidden">
          <OperationPanel />
        </div>
      </div>
    </div>
  );
};

export default PrintPage;