dros/src/components/HumanBody.tsx

import React, { useState } from 'react';

// 直接 import 本地图片（推荐写法）
import Abdomen from '../assets/imgs/VirtualHuman/Abdomen.png';
import Abdomen_dow from '../assets/imgs/VirtualHuman/Abdomen_dow.png';

import LowerLimb_Left from '../assets/imgs/VirtualHuman/LowerLimb_Left.png';
import LowerLimb_Left_dow from '../assets/imgs/VirtualHuman/LowerLimb_Left_dow.png';

import LowerLimb_Right from '../assets/imgs/VirtualHuman/LowerLimb_Right.png';
import LowerLimb_Right_dow from '../assets/imgs/VirtualHuman/LowerLimb_Right_dow.png';

import Skull from '../assets/imgs/VirtualHuman/Skull.png';
import Skull_dow from '../assets/imgs/VirtualHuman/Skull_dow.png';

import Spine from '../assets/imgs/VirtualHuman/Spine.png';
import Spine_dow from '../assets/imgs/VirtualHuman/Spine_dow.png';

import Thorax from '../assets/imgs/VirtualHuman/Thorax.png';
import Thorax_dow from '../assets/imgs/VirtualHuman/Thorax_dow.png';

import UpperLimb_Left from '../assets/imgs/VirtualHuman/UpperLimb_Left.png';
import UpperLimb_Left_dow from '../assets/imgs/VirtualHuman/UpperLimb_Left_dow.png';

import UpperLimb_Right from '../assets/imgs/VirtualHuman/UpperLimb_Right.png';
import UpperLimb_Right_dow from '../assets/imgs/VirtualHuman/UpperLimb_Right_dow.png';
import { AppDispatch, RootState } from '@/states/store';
import { useDispatch, useSelector } from 'react-redux';
import { fetchViewsOrProtocols } from '@/states/patient/viewSelection';
import { setCurrentBodyPart } from '@/states/bodyPartSlice';

// import VirtualHuman from "../assets/imgs/VirtualHuman/VirtualHuman.png";
// import VirtualHuman_dow from "../assets/imgs/VirtualHuman/VirtualHuman_dow.png";

// 建立一个映射表，方便统一管理
// const bodyParts = {
//   Abdomen: { normal: Abdomen, active: Abdomen_dow },
//   LowerLimb_Left: { normal: LowerLimb_Left, active: LowerLimb_Left_dow },
//   LowerLimb_Right: { normal: LowerLimb_Right, active: LowerLimb_Right_dow },
//   Skull: { normal: Skull, active: Skull_dow },
//   Spine: { normal: Spine, active: Spine_dow },
//   Thorax: { normal: Thorax, active: Thorax_dow },
//   UpperLimb_Left: { normal: UpperLimb_Left, active: UpperLimb_Left_dow },
//   UpperLimb_Right: { normal: UpperLimb_Right, active: UpperLimb_Right_dow },
//   //VirtualHuman: { normal: VirtualHuman, active: VirtualHuman_dow },
// };
const bodyParts = {
  Skull: {
    normal: Skull,
    active: Skull_dow,
    style: {
      top: '0px',
      left: '110px',
      width: '72px',
      height: '93px',
      zIndex: 2,
    },
    serverName: 'Human_SKULL', //服务端认识的名字
  },
  Thorax: {
    normal: Thorax,
    active: Thorax_dow,
    style: {
      top: '93px',
      left: '88px',
      width: '118px',
      height: '148px',
      zIndex: 1,
    },
    serverName: 'Human_THORAX', //服务端认识的名字
  },
  Abdomen: {
    normal: Abdomen,
    active: Abdomen_dow,
    style: {
      top: '241px',
      left: '81px',
      width: '132px',
      height: '116px',
      zIndex: 1,
    },
    serverName: 'Human_ABDOMEN', //服务端认识的名字
  },
  Spine: {
    normal: Spine,
    active: Spine_dow,
    style: {
      top: '93px',
      left: '128px',
      width: '38px',
      height: '264px',
      zIndex: 1,
    },
    serverName: 'Human_SPINE', //服务端认识的名字
  },
  UpperLimb_Left: {
    normal: UpperLimb_Left,
    active: UpperLimb_Left_dow,
    style: {
      top: '113px',
      left: '0px',
      width: '88px',
      height: '280px',
      zIndex: 1,
    },
    serverName: 'Human_UPPER LIMB', //服务端认识的名字
  },
  UpperLimb_Right: {
    normal: UpperLimb_Right,
    active: UpperLimb_Right_dow,
    style: {
      top: '113px',
      left: '206px',
      width: '88px',
      height: '280px',
      zIndex: 1,
    },
    serverName: 'Human_UPPER LIMB', //服务端认识的名字
  },
  LowerLimb_Left: {
    normal: LowerLimb_Left,
    active: LowerLimb_Left_dow,
    style: {
      top: '357px',
      left: '79px',
      width: '68px',
      height: '337px',
      zIndex: 1,
    },
    serverName: 'Human_LOWER LIMB', //服务端认识的名字
  },
  LowerLimb_Right: {
    normal: LowerLimb_Right,
    active: LowerLimb_Right_dow,
    style: {
      top: '355px',
      left: '148px',
      width: '68px',
      height: '337px',
      zIndex: 1,
    },
    serverName: 'Human_LOWER LIMB', //服务端认识的名字
  },
};

export default function HumanBody() {
  const [activePart, setActivePart] = useState(null);
  const dispatch = useDispatch<AppDispatch>();
  const currentPatientType = useSelector(
    (state: RootState) => state.patientType.current
  );
  const bodyPartsState = useSelector(
    (state: RootState) => state.bodyPart.byPatientType
  );
  //选择的是体位还是协议
  const selected = useSelector((state: RootState) => state.selection.selected);

  const handleClick = (part) => {
    setActivePart(part);
    // 映射表。界面上身体部位与服务定义的身体部位有个映射
    // message.info(`你点击了：${part}`);
    const selectedBodyPartId = bodyParts[part].serverName;
    const selectedBodyPart =
      bodyPartsState.find((item) => item.body_part_id == selectedBodyPartId) ||
      null;
    dispatch(setCurrentBodyPart(selectedBodyPart));
    // message.info(`得到对应的身体部位的ID：${selectedBodyPartId}`);
    dispatch(
      fetchViewsOrProtocols({
        selection: selected,
        patientType: currentPatientType?.patient_type_id ?? null,
        bodyPart: selectedBodyPartId ?? null,
      })
    );
  };

  return (
    // <div className="relative w-[300px] h-[600px] mx-auto">
    //   {Object.entries(bodyParts).map(([part, images]) => {
    //     const isActive = activePart === part;
    //     return (
    //       <img
    //         key={part}
    //         src={isActive ? images.active : images.normal}
    //         alt={part}
    //         onClick={() => handleClick(part)}
    //         className="absolute top-0 left-0 w-full h-full cursor-pointer"
    //       />
    //     );
    //   })}
    // </div>
    <div
      className="relative border border-red-500"
      style={{ width: '294px', height: '694px' }}
    >
      {/* <img
                src={VirtualHuman}
                alt="VirtualHuman"
                style={{ position: "absolute", top: 0, left: 0, width: "294px", height: "694px", zIndex: 0 }}
            /> */}
      {Object.entries(bodyParts).map(([part, { normal, active, style }]) => {
        const isActive = activePart === part;
        return (
          <img
            key={part}
            src={isActive ? active : normal}
            alt={part}
            onClick={() => handleClick(part)}
            style={{
              position: 'absolute',
              cursor: 'pointer',
              ...style,
              zIndex: isActive
                ? style.zIndex
                  ? style.zIndex + 1
                  : 1
                : style.zIndex,
            }}
          />
        );
      })}
    </div>
  );
}