dros/src/pages/exam/components/BodyPositionDetail.tsx

import React, { useRef } from 'react';
import { useSelector } from 'react-redux';
import { Row, Col, Typography, Image, Flex } from 'antd';
import { getViewIconUrl, getExposedImageUrl } from '@/API/bodyPosition';
import CollimatorIcon from '../../../assets/imgs/Collimator_normal.png';
import SidIcon from '../../../assets/imgs/SID.png';
import { RootState } from '@/states/store';
import { FormattedMessage } from 'react-intl';
const { Title, Text } = Typography;

const BodyPositionDetail: React.FC = () => {
  const bodyPositionDetail = useSelector(
    (state: RootState) => state.bodyPositionDetail
  );
  const wrapRef = useRef<HTMLDivElement>(null);

  // 🆕 根据曝光状态选择图像源
  const imageUrl = bodyPositionDetail.expose_status === 'Exposed'
    ? getExposedImageUrl(bodyPositionDetail.sop_instance_uid)  // 已曝光：缩略图
    : getViewIconUrl(bodyPositionDetail.body_position_image);  // 未曝光：示意图

  return (
    <Flex vertical className="h-full">
      {/* 第一行 : 患者姓名*/}
      <div className="text-center">
        <Title level={4}>{bodyPositionDetail.patient_name}</Title>
      </div>
      {/* 第二行 ：患者id，登记号，study描述*/}
      <Row>
        <Col span={8}>
          <Text>
            <FormattedMessage
              id="exam.bodyPositionDetail.patientId"
              defaultMessage="患者编号"
            />
            : {bodyPositionDetail.patient_id}
          </Text>
        </Col>
        <Col span={8}>
          <Text>
            <FormattedMessage
              id="exam.bodyPositionDetail.accessionNumber"
              defaultMessage="登记号"
            />
            : {bodyPositionDetail.registration_number}
          </Text>
        </Col>
        <Col span={8}>
          <Text>
            <FormattedMessage
              id="exam.bodyPositionDetail.studyDescription"
              defaultMessage="备注"
            />
            : {bodyPositionDetail.study_description}
          </Text>
        </Col>
      </Row>

      {/* 第三行 ：体位示意图或缩略图 🆕 修改此处 */}
      <Flex
        //flex={1}                       // 吃掉剩余宽高
        style={{ minHeight: 0 }} // 保险丝
        className="flex-grow"
        ref={wrapRef}
      >
        <div
          style={{
            // border: '1px solid red',
            // width: '500px',
            // height: '300px',
            width: '100%', // 随父容器宽
            //aspectRatio: '16 / 9',        // 根据图片真实比例改，如 4/3、1/1 等
            backgroundImage: `url(${imageUrl})`, // 🆕 使用动态 imageUrl
            backgroundSize: 'contain', // cover 亦可
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }}
        ></div>
      </Flex>

      {/* 第四行 ：体位描述*/}
      <div className="text-center">
        <Text>
          <FormattedMessage
            id="exam.bodyPositionDetail.viewDescription"
            defaultMessage="视图描述"
          />
          : {bodyPositionDetail.view_description}
        </Text>
      </div>
      {/* 第五行 ：设备信息*/}
      <div className="flex flex-row items-center justify-center">
        <div className="text-center">
          <Image src={CollimatorIcon} alt="Logo" height={'100%'} />
        </div>
        <div className="text-center">
          <Text>
            <FormattedMessage id="Length" defaultMessage="长" />:
            {bodyPositionDetail.collimator_length}
          </Text>
        </div>
        <div className="text-center ml-2">
          <Text>
            <FormattedMessage id="Width" defaultMessage="宽" />:
            {bodyPositionDetail.collimator_width}
          </Text>
        </div>
      </div>
      {/* 第六行 */}

      <Flex justify="center" align="center">
        <Image src={SidIcon} alt="Logo" className="mr-2" height={'100%'} />
        <Text>SID: {bodyPositionDetail.sid}</Text>
      </Flex>
    </Flex>
  );
};

export default BodyPositionDetail;