dros/src/pages/exam/ContentAreaMedium.tsx

import {
  Row,
  Col,
  Card,
  Select,
  InputNumber,
  Button,
  Switch,
  Tooltip,
  Divider,
} from 'antd';
import {
  DeleteOutlined,
  CopyOutlined,
  SaveOutlined,
  CameraOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import { patientSizes } from '@/states/patientSize';
import { WorkstationTypeLabels } from '@/states/workstation';
import { FormattedMessage } from 'react-intl';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '@/states/store';
import {
  setAprConfig,
  setIsAECEnabled,
} from '@/states/exam/aprSlice';
import ParaSettingCoordinator from '@/domain/exam/paraSettingCoordinator';

const ContentAreaMedium = () => {
  const dispatch = useDispatch();
  const aprConfig = useSelector((state: RootState) => state.apr.aprConfig);
  const currentExposureMode = useSelector(
    (state: RootState) => state.apr.currentExposureMode
  );
  const isAECEnabled = useSelector(
    (state: RootState) => state.apr.isAECEnabled
  );

  const handleExposureModeChange = (value: string) => {
    ParaSettingCoordinator.setExposureMode(value);
  };

  const handleAECChange = (checked: boolean) => {
    dispatch(setIsAECEnabled(checked));
  };

  return (
    <Row gutter={16}>
      <Col span={16}>
        <Card title="体位区">
          <Row gutter={16}>
            <Col span={24} style={{ height: 50 }}>
              <Card title="体位列表">体位列表</Card>
            </Col>
            <Col span={24}>
              <Card title="体位详情">体位详情</Card>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span={8}>
        <Card>
          <Row gutter={16} align="middle">
            <Col span={9}>
              <Select
                placeholder="选择体型"
                style={{ width: '100%', marginBottom: 8 }}
              >
                {Object.entries(patientSizes).map(
                  ([key, value]: [string, string]) => (
                    <Select.Option key={key} value={key}>
                      {value}
                    </Select.Option>
                  )
                )}
              </Select>
            </Col>
            <Col span={15}>
              <Select
                placeholder="选择工作位"
                style={{ width: '100%', marginBottom: 8 }}
              >
                {Object.entries(WorkstationTypeLabels).map(
                  ([key, value]: [string, string]) => (
                    <Select.Option key={key} value={value}>
                      <FormattedMessage
                        id={`workstation.${key.toLowerCase()}`}
                      />
                    </Select.Option>
                  )
                )}
              </Select>
            </Col>
          </Row>
          <div>
            <Tooltip
              title={
                currentExposureMode === 'mAs'
                  ? '当前为 mAs 模式，mA 和 ms 不可调整'
                  : ''
              }
            >
              <InputNumber
                disabled={currentExposureMode === 'mAs'}
                placeholder={currentExposureMode === 'mAs' ? '--' : 'mA'}
                style={{ width: '100%', marginBottom: 8 }}
                value={
                  currentExposureMode === 'mAs'
                    ? null
                    : (aprConfig.mA ?? undefined)
                }
                onChange={(value) =>
                  dispatch(setAprConfig({ ...aprConfig, mA: value ?? 0 }))
                }
              />
            </Tooltip>
            <Tooltip
              title={
                currentExposureMode === 'mAs'
                  ? '当前为 mAs 模式，mA 和 ms 不可调整'
                  : ''
              }
            >
              <InputNumber
                disabled={currentExposureMode === 'mAs'}
                placeholder={currentExposureMode === 'mAs' ? '--' : 'ms'}
                style={{ width: '100%', marginBottom: 8 }}
                value={
                  currentExposureMode === 'mAs'
                    ? null
                    : (aprConfig.ms ?? undefined)
                }
                onChange={(value) =>
                  dispatch(setAprConfig({ ...aprConfig, ms: value ?? 0 }))
                }
              />
            </Tooltip>
            <Tooltip
              title={
                currentExposureMode === 'time'
                  ? '当前为 time 模式，mAs 不可调整'
                  : ''
              }
            >
              <InputNumber
                disabled={currentExposureMode === 'time'}
                placeholder={currentExposureMode === 'time' ? '--' : 'mAs'}
                style={{ width: '100%', marginBottom: 8 }}
                value={
                  currentExposureMode === 'time'
                    ? null
                    : (aprConfig.mAs ?? undefined)
                }
                onChange={(value) =>
                  dispatch(setAprConfig({ ...aprConfig, mAs: value ?? 0 }))
                }
              />
            </Tooltip>
            <InputNumber
              placeholder="KV"
              style={{ width: '100%', marginBottom: 8 }}
            />
            <InputNumber
              placeholder="density"
              style={{ width: '100%', marginBottom: 8 }}
            />
          </div>
          <Row gutter={16} align="middle">
            <Col span={12}>
              <Select
                placeholder="选择曝光模式"
                style={{ width: '100%' }}
                value={currentExposureMode}
                onChange={handleExposureModeChange}
              >
                <Select.Option value="mAs">mAs</Select.Option>
                <Select.Option value="time">time</Select.Option>
              </Select>
            </Col>
            <Col span={9}>
              <Switch
                checkedChildren="开启AEC"
                unCheckedChildren="关闭AEC"
                checked={isAECEnabled}
                onChange={handleAECChange}
              />
            </Col>
            <Col span={3}>
              <Button
                type="primary"
                style={{ width: '100%' }}
                icon={<DeleteOutlined />}
                title="重置参数"
              />
            </Col>
          </Row>
          <Divider />
          <Row gutter={16} align="middle">
            <Col span={4}>
              <Tooltip title="删除选择的体位">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<DeleteOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="复制选择的体位">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<CopyOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="保存参数">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<SaveOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="打开/关闭摄像头">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<CameraOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="拒绝">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<CloseOutlined />}
                />
              </Tooltip>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
  );
};

export default ContentAreaMedium;