/*
 * Create:      柿子
 * CreateDate:  2023/11/02
 * Describe：   床位图 - 新版床位图
 * */
import React, { Component } from 'react';
import { Menu, Dropdown, Icon, Input, Tree, Select, Button, Radio, Card, Empty } from 'antd';
import { Util } from 'tools';
import store from 'store';
import BedItem from './component/BedItem';
import ScrollList from './component/ScrollList'; // 效果类似antd中的tabs
import Memorandum from './component/Memorandum'; // 备忘录
import NurseFunctions from './NurseFunctions'; // 操作功能

const { TreeNode } = Tree;

class BedBitmapContainer extends Component {
  constructor(props) {
    super(props);
    const userData = React.$getSessionData();
    let operationalData = React.$getLocalStorageData('BedBitmapContainer');
    this.state = {
      userData,
      currentLocMenu: {
        locID: userData?.locID || '',
        locDesc: userData?.locDesc || '',
      },
      careLevelList: [],
      leftNum: 200,
      leftMinLimit: 100,
      leftMaxLimit: 200,
      rightNum: 200,
      rightMinLimit: 100,
      rightMaxLimit: 200,
      waitRoom: [], // 等候区
      waitExpandedKeys: [],
      waitSelectedKeys: [],
      waitRightMenuRecord: {},
      waitRightMenuVisible: false,
      bedFilterCode: '', // 床位图
      bedFilterData: [],
      floorID: undefined, // 楼层
      floorData: [],
      bedModeID: '1', // 床位展示模式
      bedModeData: [{
        key: '1',
        title: '详情',
      }, {
        key: '2',
        title: '二维码',
      }, {
        key: '3',
        title: '简要',
      }],
      startMouseY: null,
      topCardHeight: store.getState().tableHeight.y - 15 + 'px',
      bottomCardHeight: 200,
      wardInfoData: [], // 病区信息
      wardInfoExpandedKeys: [],
      wardInfoSelectKeys: [],
      wardInfoRightMenuRecord: {},
      wardInfoRightMenuVisible: {},
      memoDataFlag: 'N', // 备忘录数据标志 - 备忘录列表是否有数据
      defaultNumBeds: 6, // 每行默认的床位个数
      bedList: [], // 床位数据
      copyBedList: [], // 床位数据复制
      bedRecordData: {}, // 床位图选中数据
      bedRightClickRecordData: {}, // 床位图右键菜单数据
      admID: '', // 就诊ID
      filterInfo: '', // 就诊信息过滤
      ...operationalData
    };
    this.isResizing = false;
    this.resizePosition = null;
    this.BBCContainer = React.createRef(); // 创建 Ref
    this.BBCTopCardRef = React.createRef();
    this.BBCBottomCardRef = React.createRef();
    this.BBCRightBodyRef = React.createRef();
  };

  componentDidMount() {
    this.handleInitData();
    this.handleCalculativeWidth();
    document.addEventListener('mousemove', this.handleVResizeOver);
    document.addEventListener('mouseup', this.handleStopResize);
    document.addEventListener('click', () => this.handleOverallClick('listener'));
  };

  componentWillUnmount() {
    document.removeEventListener('mousemove', this.handleVResizeOver);
    document.removeEventListener('mouseup', this.handleStopResize);
    document.removeEventListener('click', () => this.handleOverallClick('listener'));
    this.setState = (state, callback) => { return; }
  };

  // 初始化数据
  handleInitData = async () => {
    try {
      let res = await React.$asyncPost(this, '04012001');
      this.setState({
        floorData: res?.result?.floorArr || [],
        careLevelList: res?.result?.initIconArr || [],
        bedFilterData: res?.result?.iconConditionArr || []
      }, () => {
        this.handleQuery();
      });
    } catch (error) {
      console.log(error);
      this.handleQuery();
    }
  };

  // 获取内容区域数据
  handleQuery = async () => {
    try {
      let res = await React.$asyncPost(this, '04012002');
      // 床位图数据
      let iconArr = []; // 获取所有图标
      let bedList = (res?.result?.bedChartInfo || []).map(item => {
        const patObj = item?.patObj || {};
        iconArr.push(...(patObj?.icon || []));
        return {
          ...item,
          ...patObj,
          patInfo: (patObj?.bedNo || '') + '^' + (patObj?.medicalNo || '') + '^' + (patObj?.patName || '') + '^' + (patObj?.patNo || '') + '^' + (patObj?.patMobile || '') + '^' + (patObj?.patIDCardNo || '')
        }
      });
      this.getDedFilterCount(iconArr);
      this.setState({ waitRoom: res?.result?.handldAreaData || [], bedList, copyBedList: bedList }, () => {
        this.getWaitRoomLimit();
      });
    } catch (error) {
      console.log(error);
    }
  };

  // 根据床位信息获取对应的状态值
  getDedFilterCount = (iconArr) => {
    let { bedFilterData } = this.state;
    if (iconArr && Array.isArray(iconArr) && iconArr.length > 0) {
      bedFilterData = bedFilterData.map(item => {
        let count = iconArr.filter(iconItem => item?.code === iconItem?.code).length;
        return { ...item, count }
      });
      this.setState({ bedFilterData });
    }
  };

  // 根据界面大小计算床位图及等候区宽度
  handleCalculativeWidth = () => {
    const { operationInnerWidth } = this.state;
    let innerWidth = window.innerWidth;
    if (operationInnerWidth === innerWidth) return; // 相同尺寸下不执行默认操作
    let defaultNumBeds = Math.ceil(parseInt((innerWidth - 246 - 58) / 256));
    let defaultBedsWidth = 246 * defaultNumBeds + 10 * (defaultNumBeds - 1) + 54;
    let otherWidth = (innerWidth - defaultBedsWidth) / 2;
    this.setState({ leftNum: otherWidth, rightNum: otherWidth, defaultNumBeds });
  };

  // 只要鼠标松开或者离开区域，那么就停止resize
  handleStopResize = (e) => {
    e.preventDefault();
    React.$stopPropagation(e);
    if (this.isResizing) {
      delete (this.resizePosition);
      this.isResizing = false;
      this.setState({});
    }
  };

  // 拖动垂直调整块
  handleVResizeOver = (e) => {
    if (!this.isResizing) return;
    const { leftMinLimit, leftMaxLimit, rightMinLimit, rightMaxLimit, startMouseY } = this.state;
    // 使用 offsetX 调整新值
    let newValue;
    if (this.resizePosition === 'left') {
      newValue = Math.max(leftMinLimit, Math.min(leftMaxLimit, e.clientX - this.BBCContainer.current.offsetLeft - this.offsetXLeft));
      this.setState({ leftNum: newValue }, () => {
        this.handleRecordOperationalData();
      });
    } else if (this.resizePosition === 'right') {
      newValue = Math.max(rightMinLimit, Math.min(rightMaxLimit, this.BBCContainer.current.offsetWidth - e.clientX + this.BBCContainer.current.offsetLeft));
      this.setState({ rightNum: newValue }, () => {
        this.handleRecordOperationalData();
      });
    } else if (this.resizePosition === 'top') {
      let deltaY = e.clientY - startMouseY;
      const minHeightVal = 42;
      const maxHeightVal = this.BBCRightBodyRef?.current?.offsetHeight - 48;
      const topCardHeight =
        `${Math.max(minHeightVal,
          Math.min(maxHeightVal,
            parseInt(this.BBCTopCardRef.current?.style?.height) + deltaY))}px`;
      // 应用新 height 到 DOM 元素.
      this.BBCTopCardRef.current.style.height = topCardHeight;
      const bottomCardHeight =
        `${this.BBCRightBodyRef.current.offsetHeight - parseInt(this.BBCTopCardRef.current.style.height) - 6}`;
      this.BBCBottomCardRef.current.style.height = bottomCardHeight + 'px';
      this.setState({
        startMouseY: e.clientY,
        topCardHeight,
        bottomCardHeight
      }, () => {
        this.handleRecordOperationalData();
      });
    }
  };

  // 记录操作数据
  handleRecordOperationalData = () => {
    const { leftNum, rightNum, topCardHeight, bottomCardHeight, defaultNumBeds } = this.state;
    React.$setLocalStorageData('BedBitmapContainer', {
      operationInnerWidth: window.innerWidth, // 操作标志
      defaultNumBeds, // 默认一行的床位数
      leftNum,
      rightNum,
      topCardHeight,
      bottomCardHeight
    });
  };

  // 上下拖拽
  handleHResizeDown = (e, direction) => {
    e.preventDefault();
    if (!this.isResizing) {
      this.isResizing = true;
      this.resizePosition = direction;
      // 使用 offsetHeight 来获取元素当前完整高度
      this.setState({
        startMouseY: e.clientY,
      })
    }
  };

  // 开始拖动垂直调整块
  handleVResizeDown = (e, direction) => {
    e.preventDefault();
    React.$stopPropagation(e);
    if (!this.isResizing) {
      this.isResizing = true;
      this.resizePosition = direction;
      // 计算鼠标指针和被点击元素左边界之间的距离（偏移量）
      const rect = e.target.getBoundingClientRect();
      if (this.resizePosition === 'left') {
        this.offsetXLeft = e.clientX - rect.left;
      } else if (this.resizePosition === 'right') {
        this.offsetXRight = rect.right - e.clientX;
      }
    }
  };

  // 监听界面点击事件清除右键菜单相关数据
  handleOverallClick = (type) => {
    const { waitRightMenuVisible, wardInfoRightMenuVisible, bedRightClickRecordData } = this.state;
    let newState = {};
    if (type === 'waitRightMenuVisible' && wardInfoRightMenuVisible) {
      newState.wardInfoRightMenuVisible = false;
      newState.wardInfoRightMenuRecord = {};
    }
    if (type === 'wardInfoRightMenuVisible' && waitRightMenuVisible) {
      newState.waitRightMenuVisible = false;
      newState.waitRightMenuRecord = {};
    }
    if (type === 'bedRight' || type === 'listener') { // listener为全局监听
      if (wardInfoRightMenuVisible) {
        newState.wardInfoRightMenuVisible = false;
        newState.wardInfoRightMenuRecord = {};
      }
      if (waitRightMenuVisible) {
        newState.waitRightMenuVisible = false;
        newState.waitRightMenuRecord = {};
      }
    }
    if (type !== 'bedRight') {
      // 清除右键菜单选中操作
      if (bedRightClickRecordData?.id) {
        newState.bedRightClickRecordData = {};
      }
    }
    this.setState(newState);
  };

  // 科室切换
  handleLocMenuChange = (item) => {
    this.setState({ currentLocMenu: item });
  };

  // 查询
  handleFilterBedData = () => {
    const { copyBedList, filterInfo, floorID, bedFilterCode } = this.state;
    console.log('bedFilterCode'.bedFilterCode)
    const bedList = copyBedList && copyBedList.filter( // 根据患者信息过滤床位
      item => item?.patInfo?.indexOf(filterInfo) > -1
    ).filter( // 过滤楼层
      item => String(item?.floorID || '').indexOf((floorID || '')) > -1
    ).filter( // 根据选择状态过滤床位包含的图标【新医嘱多少个、新入院多少个...】
      item => {
        let iconArr = item?.icon || [];
        console.log('iconArr', iconArr)
        return iconArr.some(icon => {
          return String(icon?.code || '').indexOf((bedFilterCode || '')) > -1;
        });
      });
    this.setState({ bedList });
  };

  // 获取等候区最小高度
  getWaitRoomLimit = () => {
    let { waitRoom } = this.state;
    for (let i = 0; i < waitRoom.length; i++) {
      waitRoom[i].key = String(1 + i);
      waitRoom[i].title = waitRoom[i]?.title || waitRoom[i]?.descripts || '';
      let children = waitRoom[i]?.patientData || [], rightBtnList = waitRoom[i]?.rightBtnList || [];
      for (let j = 0; j < children.length; j++) {
        children[j].key = String(1 + i) + '-' + String(1 + j);
        children[j].title = children[j]?.patInfo || '';
        children[j].rightBtnList = rightBtnList; // 右键菜单数据
      }
      waitRoom[i].count = children && Array.isArray(children) ? children.length : 0;
      waitRoom[i].children = children;
    }
    let waitTitleCount = waitRoom && waitRoom.reduce((max, item) => {
      return item?.descripts?.length > max ? item.descripts.length : max;
    }, 0);
    this.setState({ waitExpandedKeys: ['1'], leftMinLimit: 108 + (waitTitleCount - 4) * 15 });
  };

  // 获取tree渲染数据
  renderTreeNodes = (data, selectable = false, className, expandFn) => {
    const { waitRightMenuRecord } = this.state;
    return data.map((item, index) => {
      if (item && 'children' in item && Array.isArray(item.children)) {
        return (
          <TreeNode
            key={item?.key || (index + 1)}
            title={(
              <div className="bbc-tree-child-nodes-title" onClick={() => this[expandFn](item.key, 'node')}>
                <strong>{(item?.title || item.descripts || '') + (item && 'count' in item ? '(' + item.count + ')' : '')}</strong>
              </div>
            )}
            selectable={false}
            dataRef={item}
          >
            {this.renderTreeNodes(item.children, true, className)}
          </TreeNode>
        );
      }
      return <TreeNode
        key={item?.key || (index + 1)}
        title={(item?.title || item.descripts || '')}
        dataRef={item}
        selectable={selectable}
        className={[waitRightMenuRecord?.key === item.key ? 'bbc-right-menu-select' : '', item && 'count' in item ? '' : (className || 'bbc-tree-child-nodes')].join(' ')}
      />;
    });
  };

  // 等候区树展开关闭事件
  handleWaitExpand = (keys, type) => {
    let currentKey = [];
    if (type === 'node') {
      let { waitExpandedKeys } = this.state;
      if (waitExpandedKeys.indexOf(keys) < 0) {
        currentKey.push(keys);
      }
    } else {
      currentKey.push(keys[keys.length - 1]);
    }
    this.setState({
      waitExpandedKeys: currentKey,
    });
  };

  // 等候区树选择
  handleWaitSelect = (selectedKeys, info) => {
    let waitSelectData = info?.node?.props?.dataRef || {}; // 等候区选中数据
    if (waitSelectData?.clickType !== 'N') {
      this.state.bedRecordData = { ...waitSelectData };
    };
    this.state.bedRightClickRecordData = {};
    this.getPatDetailData(waitSelectData);
    this.setState({ waitSelectedKeys: selectedKeys });
  };

  // 患者病历右键
  handleTreeRightClick = ({ event, node }, rowDataDataIndex, visibleDataIndex) => {
    let record = node.props && node.props.dataRef ? node.props.dataRef : {};
    if (!(record && 'count' in record)) {
      this.handleContextMenu(record, event, rowDataDataIndex, visibleDataIndex);
    }
  };

  // 右键菜单事件
  handleContextMenu = (record, event, rowDataDataIndex, visibleDataIndex) => {
    if (this.root) {
      event.preventDefault();
    }
    this.state[rowDataDataIndex] = record;
    this.state[visibleDataIndex] = true;
    this.setState({}, () => {
      this.handleOverallClick(visibleDataIndex); // 关闭等候区右键弹窗
    });
    const clickX = event.clientX;
    const clickY = event.clientY;
    // 获取自定义菜单的宽度/高度
    const rootW = this.root.offsetWidth;
    const rootH = this.root.offsetHeight;
    this.root.style.left = window.innerWidth - clickX > rootW ? `${clickX}px` : `${clickX - rootW}px`;
    this.root.style.top = window.innerHeight - clickY > rootH ? `${clickY + 12}px` : `${clickY - rootH}px`;
  };

  handleInputChange = (e, dataIndex, isQuery) => {
    this.state[dataIndex] = e;
    this.setState({}, () => {
      isQuery === 'Y' && this.handleFilterBedData();
    })
  };

  // 获取病区信息
  getWardInfo = () => {
    try {
      const wardInfoData = [{
        title: '皮试',
        count: 4,
        key: '1',
        children: [{
          key: '1-1',
          patName: '刘备',
          sexDesc: '男',
          age: '45岁',
          title: '刘备/男/45岁',
        }, {
          key: '1-2',
          patName: '曹孟德',
          sexDesc: '男',
          age: '67岁',
          title: '曹孟德/男/67岁曹孟德/男/67岁'
        }, {
          key: '1-3',
          patName: '貂蝉',
          sexDesc: '女',
          age: '18岁',
          title: '貂蝉/女/18岁'
        }, {
          key: '1-4',
          patName: '小乔',
          sexDesc: '女',
          age: '25岁',
          title: '小乔/女/25岁'
        }]
      }, {
        title: '测血糖',
        count: 1,
        key: '2',
        children: [{
          key: '2-1',
          patName: '张飞',
          sexDesc: '男',
          age: '36岁',
          title: '张飞/男/36岁'
        }]
      }, {
        key: '3',
        title: '测血压',
        count: 3,
        children: [{
          key: '3-1',
          patName: '周瑜',
          sexDesc: '男',
          age: '25岁',
          title: '周瑜/男/25岁'
        }]
      }, {
        key: '4',
        title: '卧位',
        count: 1,
        children: [{
          key: '4-1',
          patName: '典韦',
          sexDesc: '男',
          age: '65岁',
          title: '典韦/男/65岁'
        }]
      }, {
        key: '5',
        title: '测视力',
        count: 0,
        children: []
      }];
      let wardInfoTitleCount = wardInfoData && wardInfoData.reduce((max, item) => {
        return item?.title?.length > max ? item.title.length : max;
      }, 0);
      this.setState({ wardInfoData, wardInfoExpandedKeys: ['1'], rightMinLimit: 108 + (wardInfoTitleCount - 4) * 15 });
    } catch (error) {
      console.log(error);
    }
  };

  // 病区信息树展开关闭事件
  handleWardInfoExpand = (keys, type) => {
    let currentKey = [];
    if (type === 'node') {
      currentKey = this.state.wardInfoExpandedKeys;
      if (currentKey.indexOf(keys) < 0) {
        currentKey.push(keys);
      } else {
        currentKey = currentKey.filter(item => item !== keys);
      }
    } else {
      currentKey = keys;
    }
    this.setState({
      wardInfoExpandedKeys: currentKey,
    });
  };

  // 病区信息树选择
  handleWardInfoSelect = (selectedKeys, info) => {
    this.setState({ wardInfoSelectKeys: selectedKeys });
  };

  // 添加备忘录
  handleAddMemo = () => {
    this.memoRef && this.memoRef.modifyVisible(true);
  };

  // 获取床位图数据
  getBedList = () => {
    let bedItem = {
      roomDescripts: '一病室',
      bedCode: '601',
      patName: '窦后田',
      patNo: '0000740775',
      admDateTime: '2023-11-12 09:51:43',
      admDiag: '1.葡萄膜炎[色素膜炎](双眼);2.白内障(双眼);3.葡萄膜炎[色素膜炎](双眼);4.葡萄膜炎[色素膜炎](双眼);5.葡萄膜炎[色素膜炎](双眼);',
      admReasonDesc: '六安市-(城乡居民基本医疗保险)',
      patMedicalNo: '03000808',
      admNurDesc: '爱新觉罗杀马特家族 · 张婉',
      admDocDesc: '欧阳无敌',
      patSexDesc: '男',
      patAge: '40岁',
      admInDays: '0',
      admAge: '40岁',
      admLocDesc: '综合眼病一科',
      headerIcon: [{
        key: 1,
        iconDesc: '新入院患者',
        color: '#43B951',
        borderColor: '#fff',
        range: '',
        title: '入',
        displayMethod: '',
        showFlag: 'N'
      }, {
        key: 2,
        iconDesc: '今日手术',
        color: '#FD3333',
        range: '',
        title: '术',
        displayMethod: '',
        showFlag: 'N'
      }, {
        key: 3,
        iconDesc: '今日出院',
        color: '#F1D268',
        borderColor: '#fff',
        range: '',
        title: '出',
        displayMethod: '',
        showFlag: 'N'
      }]
    }
  };

  // 获取备忘录数据
  getMemoDataFlag = (memoDataFlag) => {
    this.setState({ memoDataFlag });
  };

  // 床位图单击事件
  handleBedItemClick = (e, record) => {
    React.$stopPropagation(e);
    const { bedRecordData } = this.state;
    if (bedRecordData?.id === record?.id) {
      this.setState({ bedRecordData: {}, bedRightClickRecordData: {}, admID: '', wardInfoData: [] });
    } else if (!Util.isEmpty(record?.admID || '')) {
      this.setState({ bedRecordData: record, bedRightClickRecordData: {}, waitSelectedKeys: [] }, () => {
        this.getPatDetailData(record);
      });
    }
  };

  // 床位图右键菜单
  handleBedItemRightClick = (e, record) => {
    React.$stopPropagation(e);
    if (!Util.isEmpty(record?.admID || '')) {
      this.setState({ bedRightClickRecordData: record, bedRecordData: record, waitSelectedKeys: [] }, () => {
        this.getPatDetailData(record);
        this.handleOverallClick('bedRight'); // 关闭等候区右键弹窗
      });
    }
  };

  // 根据选择的患者查询对应的信息【获取右侧病区信息|备忘录等信息】
  getPatDetailData = (record) => {
    this.setState({ admID: record?.admID || '' }, () => {
      this.getWardInfo();
    })
  };

  // 护士站操作方法【分床、包床、占床、查看病历...】
  handleMethodSet = (code, bedInfo, rowData) => {
    this.nurseFunctionRef && this.nurseFunctionRef.handleMethodSet(code, bedInfo, rowData);
  };

  // 选择床位状态
  handleBedFilterChange = (record) => {

  };

  render() {
    const { currentLocMenu, careLevelList, loading, leftNum, rightNum, waitRoom, waitExpandedKeys, waitSelectedKeys, waitRightMenuVisible, waitRightMenuRecord, bedFilterData, bedFilterCode, floorData, floorID, bedModeData,
      bedModeID, topCardHeight, bottomCardHeight, wardInfoData, wardInfoExpandedKeys, wardInfoSelectKeys, memoDataFlag, bedList, defaultNumBeds, bedRecordData, bedRightClickRecordData, admID, filterInfo
    } = this.state;
    const locMenuList = (
      <Menu>
        <Menu.Item onClick={() => this.handleLocMenuChange({ locDesc: '一病区' })}>
          <span>
            一病区
          </span>
        </Menu.Item>
        <Menu.Item onClick={() => this.handleLocMenuChange({ locDesc: '二病区' })}>
          <span>
            二病区
          </span>
        </Menu.Item>
        <Menu.Item onClick={() => this.handleLocMenuChange({ locDesc: '屈光眼病专科' })}>
          <span>
            屈光眼病专科
          </span>
        </Menu.Item>
      </Menu>
    );
    const careLevelWidth = 85 * (careLevelList?.length || 0); // 护理级别宽度
    const vCursor = this.isResizing ? 'e-resize' : 'default';
    const hCursor = this.isResizing ? 'n-resize' : 'default';

    return (
      <div className="nurse-station-common bed-bitmap-container">
        <div className="bbc-header flex-between-center">
          <div style={{ width: leftNum - 18 + 'px' }}>
            <Dropdown overlay={locMenuList}>
              <strong style={{ cursor: 'pointer' }}>
                {currentLocMenu?.locDesc} <Icon type="down" />
              </strong>
            </Dropdown>
          </div>
          <div
            style={{ width: `calc(85% - ${(careLevelWidth + leftNum + 'px')})`, paddingLeft: '4px' }}
            className="bbc-header-body flex-align-items"
          >
            <div className="bbc-header-body-title">
              <span>
                今日入院：
                <strong className="common-number">10</strong>
                人
              </span>
              <span>
                今日出院：
                <strong className="common-number">10</strong>
                人
              </span>
              <span>
                今日结账：
                <strong className="common-number">10</strong>
                人
              </span>
              <span>
                今日手术：
                <strong className="common-number">10</strong>
                人
              </span>
            </div>
          </div>
          <Input
            prefix={<i style={{ color: '#ccc', fontSize: '14px', marginTop: '2px' }} className="iconfont icon-search"></i>}
            loading={loading}
            placeholder="床号/住院号/姓名/病人ID"
            style={{ width: '15%', marginRight: '12px' }}
            value={filterInfo}
            onChange={Util.commonInputChange.bind(this, 'filterInfo')}
            onPressEnter={this.handleFilterBedData}
          />
          <div style={{ width: careLevelWidth + 'px' }} className="bbc-care-level flex-align-items">
            {careLevelList && careLevelList.map((item, index) => {
              return (
                <span key={index} className="bbc-care-level-item flex-align-items">
                  <i className="bbc-record-color-notes" style={{ background: item?.color || '' }}></i>
                  {item?.title || item?.descripts || ''}
                </span>
              )
            })}
          </div>
        </div>
        <div className="common-query-split-line" style={{ height: '6px' }}></div>
        <div className="bbc-content">
          <div
            className="bbc-content-body"
          >
            <div
              className="flex"
              style={{ width: '100%', height: '100%' }}
              ref={this.BBCContainer} // 使用 Ref
              onMouseUp={this.handleStopResize}
              onMouseLeave={this.handleStopResize}
            >
              <div
                style={{
                  width: leftNum,
                  cursor: this.resizePosition === 'left' || this.resizePosition === 'right' ? vCursor : '',
                  height: '100%',
                  position: 'relative'
                }}
              >
                <div className="bbc-content-body-left bbc-tree scroll-bar-style">
                  <Tree
                    blockNode
                    expandedKeys={waitExpandedKeys}
                    selectedKeys={waitSelectedKeys}
                    onExpand={this.handleWaitExpand}
                    onSelect={this.handleWaitSelect}
                    onRightClick={(e) => this.handleTreeRightClick(e, 'waitRightMenuRecord', 'waitRightMenuVisible')}
                  >
                    {this.renderTreeNodes(waitRoom, false, 'bbc-tree-child-nodes', 'handleWaitExpand')}
                  </Tree>
                </div>
                {/* 遮罩层 */}
                <div style={{ display: this.isResizing && this.resizePosition === 'left' ? 'block' : 'none' }} className="bbc-mask"></div>
              </div>
              <div
                draggable={false}
                className="common-v-resize"
                onMouseDown={(e) => this.handleVResizeDown(e, 'left')}
              >
                <div className={this.isResizing && this.resizePosition === 'left' ? 'common-v-resize-hover' : ''}></div>
              </div>
              <div
                style={{
                  width: `calc(100% - ${leftNum + rightNum + 12 + 'px'})`,
                  cursor: this.resizePosition === 'left' || this.resizePosition === 'right' ? vCursor : '',
                  height: '100%',
                  position: 'relative'
                }}
              >
                <div className="bbc-content-body-center">
                  <div className="bbc-bed-filter">
                    <div className="bbc-bed-filter-item flex-between-center">
                      <div style={{ width: 'calc(100% - 274px)' }}>
                        <ScrollList>
                          {bedFilterData && bedFilterData.map((item, index) => {
                            return (
                              <Button
                                key={index}
                                ghost={bedFilterCode === item.code}
                                type={bedFilterCode === item.code ? 'primary' : 'default'}
                                style={{ height: '30px' }}
                                onClick={() => this.handleInputChange(item?.code || '', 'bedFilterCode', 'Y')}
                              >
                                {(item?.title || item?.descripts || '') + (item && 'count' in item && parseInt(item.count) > 0 ? ('(' + item.count + ')') : '')}
                              </Button>
                            )
                          })}
                        </ScrollList>
                      </div>
                      <div style={{ width: '274px' }} className="flex-align-items">
                        <Select
                          allowClear
                          showSearch
                          style={{ width: '76px', marginRight: '4px' }}
                          value={floorID}
                          placeholder="楼层"
                          optionFilterProp="search"
                          onChange={(e) => this.handleInputChange(e, 'floorID', 'Y')}
                        >
                          {React.$SelectOptions(floorData)}
                        </Select>
                        <Radio.Group
                          buttonStyle="solid"
                          value={bedModeID}
                          onChange={(e) => this.handleInputChange(e.target.value, 'bedModeID')}
                        >
                          {bedModeData && bedModeData.map((item, index) => {
                            return (
                              <Radio.Button key={item.key} value={item.key}>{item?.title || '-'}</Radio.Button>
                            )
                          })}
                        </Radio.Group>
                      </div>
                    </div>
                  </div>
                  <div style={{ height: `calc(100% - 49px)` }} className="bbc-bed-list">
                    <div className={['bbc-bed-list-body', 'scroll-bar-style'].join(' ')}>
                      <div className="flex-wrap">
                        {bedList && bedList.map((item, index) => {
                          return (
                            <div className={['bbc-bed-list-item', ('bbc-beds-row-' + defaultNumBeds)].join(' ')} key={index}>
                              <BedItem
                                key={index}
                                bedInfo={item}
                                bedModeID={bedModeID}
                                rowData={bedRecordData}
                                rightMenuVisible={!!(bedRightClickRecordData && 'id' in bedRightClickRecordData && bedRightClickRecordData?.id === item?.id)}
                                onClick={(e) => this.handleBedItemClick(e, item, index)}
                                onRightClick={(e) => this.handleBedItemRightClick(e, item, index)}
                                handleBedRightClick={this.handleMethodSet} // 床位图右键操作
                              />
                            </div>
                          )
                        })}
                      </div>
                    </div>
                  </div>
                </div>
                {/* 遮罩层 */}
                <div style={{ display: this.isResizing && (this.resizePosition === 'left' || this.resizePosition === 'right') ? 'block' : 'none' }} className="bbc-mask"></div>
              </div>
              <div
                draggable={false}
                className="common-v-resize"
                onMouseDown={(e) => this.handleVResizeDown(e, 'right')}
              >
                <div className={this.isResizing && this.resizePosition === 'right' ? 'common-v-resize-hover' : ''}></div>
              </div>
              <div
                style={{
                  width: rightNum,
                  cursor: this.resizePosition === 'right' ? vCursor : hCursor,
                  height: '100%',
                  position: 'relative'
                }}
              >
                <div className="bbc-content-body-right" ref={this.BBCRightBodyRef}>
                  <div style={{ height: topCardHeight, position: 'relative' }} ref={this.BBCTopCardRef}>
                    <Card
                      size="small"
                      bordered={false}
                      title={(
                        <div className="flex-align-items">
                          <i style={{ color: '#33cccc', fontSize: '15px', marginTop: '2px' }} className="iconfont icon-ward-info bbc-card-icon"></i>
                          <strong>{rightNum < 100 ? '信息' : '病区信息'}</strong>
                        </div>
                      )}
                      bodyStyle={{ height: '100%', padding: '4px 6px 6px' }}
                    >
                      <div style={{ height: 'calc(100% - 43px)', overflow: 'auto' }} className="bbc-tree scroll-bar-style">
                        {wardInfoData && wardInfoData.length > 0 ? (
                          <Tree
                            blockNode
                            expandedKeys={wardInfoExpandedKeys}
                            selectedKeys={wardInfoSelectKeys}
                            onExpand={this.handleWardInfoExpand}
                            onSelect={this.handleWardInfoSelect}
                            onRightClick={(e) => this.handleTreeRightClick(e, 'wardInfoRightMenuRecord', 'wardInfoRightMenuVisible')}
                          >
                            {/* bbc-ward-info-tree-child-nodes - 不换行 */}
                            {this.renderTreeNodes(wardInfoData, false, 'bbc-tree-child-nodes', 'handleWardInfoExpand')}
                          </Tree>
                        ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                      </div>
                    </Card>

                    {/* 遮罩层 */}
                    <div style={{ display: this.isResizing && this.resizePosition === 'top' ? 'block' : 'none' }} className="bbc-mask"></div>
                  </div>
                  <div
                    draggable={false}
                    className="common-h-resize"
                    onMouseDown={(e) => this.handleHResizeDown(e, 'top')}
                  >
                    <div></div>
                  </div>
                  <div style={{ height: bottomCardHeight + 'px', position: 'relative' }} ref={this.BBCBottomCardRef}>
                    <Card
                      size="small"
                      bordered={false}
                      bodyStyle={{ padding: memoDataFlag === 'Y' ? '6px 6px 6px 12px' : 0 }}
                      title={(
                        <div className="flex-align-items">
                          <i style={{ color: '#fcc446' }} className="iconfont icon-memorandum bbc-card-icon"></i>
                          <strong>{rightNum < 100 ? '' : '备忘录'}</strong>
                        </div>
                      )}
                      extra={(
                        <span className="span" onClick={this.handleAddMemo}>
                          <Icon type="plus" style={{ fontSize: '12px' }} />
                          添加
                        </span>
                      )}
                    >
                      <div style={{ height: bottomCardHeight - 56 + 'px', overflow: 'auto', paddingRight: memoDataFlag === 'Y' ? '6px' : 0 }} className="scroll-bar-style">
                        <Memorandum admID={admID} onRef={ref => this.memoRef = ref} updateMemoDataFlag={this.getMemoDataFlag} />
                      </div>
                    </Card>

                    {/* 遮罩层 */}
                    <div style={{ display: this.isResizing && this.resizePosition === 'top' ? 'block' : 'none' }} className="bbc-mask"></div>
                  </div>
                </div>

                {/* 遮罩层 */}
                <div style={{ display: this.isResizing && this.resizePosition === 'right' ? 'block' : 'none' }} className="bbc-mask"></div>
              </div>
            </div>
          </div>
        </div>

        {/* 等候区右键菜单 */}
        <div ref={(ref) => { this.root = ref }} className="common-right-menu-wrap" style={{ visibility: waitRightMenuVisible ? 'visible' : 'hidden' }}>
          {waitRightMenuRecord && 'rightBtnList' in waitRightMenuRecord && Array.isArray(waitRightMenuRecord.rightBtnList) && waitRightMenuRecord?.rightBtnList.map((item, index) => {
            return (
              <div key={index} className="common-right-menu-option" onClick={(e) => this.handleMethodSet(item?.code, waitRightMenuRecord, e)}>
                {item?.descripts || item?.title || ''}
              </div>
            )
          })}
        </div>

        {/* 护士操作功能 */}
        <NurseFunctions onRef={ref => this.nurseFunctionRef = ref} handleQuery={this.handleQuery} />
      </div>
    );
  }
}

export default BedBitmapContainer;