/*
 * Create:      柿子
 * CreateDate:  2022/07/14
 * Describe：   视光管理系统 - 验光配镜分诊台
 * */
import React, { Component } from 'react';
import { Card, Row, Col, Button, Switch, Icon, Popconfirm, message, Tooltip } from 'antd';
import { $http } from 'containers/config/https';
import { Util, speech } from 'tools';
import { callNumberSocket } from 'tools/callNumber.js';
import store from 'store';
import moment from 'moment';
import RangeDatePicker from 'components/rangePicker/index';
import AddOptometrySheet from './component/AddOptometrySheet';
import OptometryRoomQueue from './component/OptometryRoomQueue';
import GetPatientInformation from './component/GetPatientInformation';
import PublicTablePagination from 'pages/common/PubilcTablePagination';
import ReplaceTheOptometryRoom from './component/ReplaceTheOptometryRoom';
import 'pages/hospital/style/index.less'
import './style/index.less';

class TriageFrontDesk extends Component {
  constructor(props) {
    super(props);
    let userData = React.$getSessionData();
    let detailListFlag = React.$getLocalStorageData('TriageFrontDesk_detailListFlag', false);
    this.state = {
      userData,
      locBtnData: [],
      locBtnActive: userData?.locID || '',
      selectData: {},
      startDate: moment().format('YYYY-MM-DD'),
      endDate: moment().format('YYYY-MM-DD'),
      allowSendOffRoomFlag: '', // 是否允许分配离线诊室
      cardSelectData: [], // 卡类型下拉数据
      statusBtnData: [],
      statusBtnActive: '',
      column: [],
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 50,
      totalWidth: 3150,
      loading: false,
      rowID: '',
      rowData: {},
      onlineChecked: false,
      optometryRoomData: [],
      roomRowData: {}, // 验光室选中行数据
      btnStatus: {}, // 按钮状态权限控制
      detailListFlag: detailListFlag || 'Y'
    };
    this.staticColumns = [{
      key: 1,
      title: '状态',
      dataIndex: 'queStatusDesc',
      align: 'center',
      width: 100
    }, {
      key: 'new1',
      title: '队列号',
      dataIndex: 'seqNo',
      align: 'center',
      width: 100
    }, {
      key: 2,
      title: '检查单号',
      dataIndex: 'appNo',
      align: 'center',
      width: 250
    }, {
      key: 3,
      title: '申请项目',
      dataIndex: 'appItemDesc',
      align: 'center',
      width: 250
    }, {
      key: 4,
      title: '收费状态',
      dataIndex: 'billStatus',
      align: 'center',
      width: 100,
      render(text) {
        let config = {
          '已收费': <span>{text}</span>,
          '未收费': <span style={{ color: 'red' }}>{text}</span>,
        }
        return config[text];
      }
    }, {
      key: 5,
      title: '病人ID',
      dataIndex: 'patNo',
      align: 'center',
      width: 150
    }, {
      key: 6,
      title: '姓名',
      dataIndex: 'patName',
      align: 'center',
      width: 100
    }, {
      key: 7,
      title: '性别',
      dataIndex: 'patSexDesc',
      align: 'center',
      width: 100
    }, {
      key: 8,
      title: '年龄',
      dataIndex: 'patAge',
      align: 'center',
      width: 100
    }, {
      key: 9,
      title: '门诊诊断',
      dataIndex: 'admDiag',
      align: 'center',
      width: 100
    }, {
      key: 10,
      title: '开单日期',
      dataIndex: 'reqDate',
      align: 'center',
      width: 150
    }, {
      key: 11,
      title: '开单科室',
      dataIndex: 'ordLocDesc',
      align: 'center',
      width: 100
    }, {
      key: 12,
      title: '开单医生',
      dataIndex: 'ordDoctor',
      align: 'center',
      width: 100
    }, {
      key: 13,
      title: '验光类型',
      dataIndex: 'optometryTypeDesc',
      align: 'center',
      width: 100
    }, {
      key: 14,
      title: 'OD',
      dataIndex: 'OD',
      align: 'center',
      width: 100
    }, {
      key: 15,
      title: 'OS',
      dataIndex: 'OS',
      align: 'center',
      width: 100
    }, {
      key: 16,
      title: 'OD小孔',
      dataIndex: 'ODOstiole',
      align: 'center',
      width: 100
    }, {
      key: 17,
      title: 'OS小孔',
      dataIndex: 'OSOstiole',
      align: 'center',
      width: 100
    }, {
      key: 18,
      title: 'OD戴镜',
      dataIndex: 'ODWearGlasses',
      align: 'center',
      width: 100
    }, {
      key: 19,
      title: 'OS戴镜',
      dataIndex: 'OSWearGlasses',
      align: 'center',
      width: 100
    }, {
      key: 20,
      title: 'OD眼压',
      dataIndex: 'ODIOP',
      align: 'center',
      width: 100
    }, {
      key: 21,
      title: 'OS眼压',
      dataIndex: 'OSIOP',
      align: 'center',
      width: 100
    }, {
      key: 22,
      title: '类型',
      dataIndex: 'orderType',
      align: 'center',
      width: 100
    }, {
      key: 23,
      title: '检查室',
      dataIndex: 'examinationRoom',
      align: 'center',
      width: 100
    }, {
      key: 24,
      title: '手术人群',
      dataIndex: 'OperPop',
      align: 'center',
      width: 100
    }, {
      key: 25,
      title: '手术动机',
      dataIndex: 'Motivation',
      align: 'center',
      width: 100
    }, {
      key: 26,
      title: '检查未约原因(主观)',
      dataIndex: 'SubjectiveReson',
      align: 'center',
      width: 150
    }, {
      key: 27,
      title: '检查未约原因(客观)',
      dataIndex: 'ObjectiveReson',
      align: 'center',
      width: 150
    }, {
      key: 28,
      title: '验光室',
      dataIndex: 'areaRoomDesc',
      align: 'center',
      width: 150
    }];
    this.timer = null;
    this.autoCallTimer = null;
  }

  componentDidMount() {
    this.getDefaultData();
    this.getColumnsData();
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    if (this.autoCallTimer) {
      clearInterval(this.autoCallTimer);
      this.autoCallTimer = null;
    }
    this.setState = (state, callback) => {
      return;
    };
  }

  // 获取卡类型下拉框数据
  getDefaultData = () => {
    try {
      let { startDate, endDate, locBtnActive } = this.state;
      let data = {
        params: [{}]
      }
      $http.post('urlS', this, {
        code: '17010001',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            let defaultValue = '';
            let cardSelectData = res.result?.cardType || [];
            for (var i = 0; i < cardSelectData.length; i++) {
              if (cardSelectData[i].defaultFlag === 'Y') {
                defaultValue = cardSelectData[i].id;
              }
            }
            const areaCallProp = res.result?.areaCallProp || {}; // 自动呼叫
            areaCallProp?.callFlag === 'Y' && callNumberSocket.init(areaCallProp?.serverIP || '', areaCallProp?.serverPort || ''); // 初始化
            const refreshTime = res.result && 'refreshTime' in res.result && res.result.refreshTime && !isNaN(parseInt(res.result.refreshTime)) ? parseInt(res.result.refreshTime) * 1000 : 0; // 单位为秒
            const callFreqTimes = areaCallProp?.callFlag === 'Y' ? (areaCallProp?.callFreqTimes || 10) * 1000 : 0; // 定时呼叫 - 默认20分钟
            this.setState({
              areaCallProp,
              cardSelectData,
              cardType: defaultValue,
              startDate: res.result?.defaultValue?.defaultStartDate || startDate,
              endDate: res.result?.defaultValue?.defaultEndDate || endDate,
              locBtnActive: res.result?.defaultValue?.defalutAreaLocID || locBtnActive,
              allowSendOffRoomFlag: res.result?.defaultValue?.allowSendOffRoomFlag || '', // 是否允许分配离线诊室
              statusBtnActive: res.result?.defaultValue?.defalutStatusCode || '',
              locBtnData: res.result?.areaLoc || [],
              statusBtnData: res.result?.triageStatus || [],
              optometryRoomData: res.result?.areaRoom || [],
              btnStatus: res.result?.btnStatus || {},
            }, () => {
              this.getTableData('N');
              // 创建定时器
              clearInterval(this.timer);
              this.nextAutoCallTime = Date.now() + callFreqTimes;
              this.nextObtainDataTime = Date.now() + refreshTime;
              let minTime = callFreqTimes > refreshTime ? refreshTime : callFreqTimes;
              let maxTime = minTime === refreshTime ? callFreqTimes : refreshTime;
              let minInterval = Math.min(minTime, maxTime);
              console.log('minInterval', minInterval)
              this.timer = setInterval(() => {
                let currentTime = Date.now();
                if (areaCallProp?.callFlag === 'Y' && currentTime >= this.nextAutoCallTime) {
                  this.handleAutoCall();
                  this.nextAutoCallTime += callFreqTimes;
                }
                if (currentTime >= this.nextObtainDataTime) {
                  this.obtainDataAccordingToDepartment('N', 'N');
                  this.nextObtainDataTime += refreshTime;
                }
              }, minInterval)
            })
          } else {
            this.getTableData('N');
          }
        }
      })
    } catch (error) {
      console.log(error);
    }
  }

  // 根据科室获取视光各状态信息
  obtainDataAccordingToDepartment = (isUpdateStatusCode, isResetOperation, isTips) => {
    let { locBtnActive, startDate, endDate, statusBtnActive, rowID } = this.state;
    let patID = this.patientRef && this.patientRef.getPatientID();
    let data = {
      params: [{
        locID: locBtnActive,
        startDate,
        endDate
      }]
    }
    $http.post('urlS', this, {
      code: '17010003',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let nStatusBtnActive = (patID || isUpdateStatusCode === 'Y') ? (res.result?.defaultValue?.defalutStatusCode || statusBtnActive) : statusBtnActive;
          if (!rowID) { // 如果选中了患者就不更新诊室数据
            this.state.optometryRoomData = res.result?.areaRoom || [];
          }
          this.setState({
            statusBtnActive: nStatusBtnActive,
            btnStatus: res.result?.btnStatus || {},
            statusBtnData: res.result?.triageStatus || [],
          }, () => {
            this.getTableData(isTips || 'N', isResetOperation);
          })
        }
      }
    })
  }

  // 根据队列ID获取视光各状态信息
  getDataAccordingToQueueID = () => {
    let { rowID } = this.state;
    let data = {
      params: [{
        queID: rowID
      }]
    }
    $http.post('urlS', this, {
      code: '17010004',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            btnStatus: res.result?.btnStatus || {},
            optometryRoomData: res.result?.areaRoom || [],
            roomRowData: {}
          })
        }
      }
    })
  }

  // 开始日期
  handleStartChange = e => {
    this.setState({
      startDate: e
    }, () => {
      this.handleQuery();
    })
  }

  // 结束日期
  handleEndChange = e => {
    this.setState({
      endDate: e
    }, () => {
      this.handleQuery();
    })
  }

  // 新增
  handleAdd = () => {
    this.addSheet && this.addSheet.modifyVisible(true);
  }

  // 获取表头数据
  getColumnsData = () => {
    let data = {
      params: [{
        compontName: 'TriageFrontDesk',
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: '01040073',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let column = res.result && 'C' in res.result && Array.isArray(res.result.C) ? res.result.C : [];
          if (column && column.length > 0) {
            column = column.map(item => {
              return {
                ...item,
                render: (text, record) => {
                  if (item.dataIndex === 'billStatus') {
                    let config = {
                      '已收费': <span>{text}</span>,
                      '未收费': <span style={{ color: 'red' }}>{text}</span>,
                    }
                    return config[text];
                  } else {
                    return (
                      <Tooltip title={text}>
                        <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                      </Tooltip>
                    )
                  }
                },
              }
            })
            this.setState({
              column,
              totalWidth: res.totalWidth
            })
          }
        }
      }
    })
  }

  // 查询
  handleQuery = (isUpdate) => {
    this.setState({ page: 1 }, () => {
      this.obtainDataAccordingToDepartment(isUpdate, '', isUpdate);
    })
  }

  // 提供修改page和pageSize的回调函数
  compilePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.obtainDataAccordingToDepartment();
    })
  }

  // 获取列表数据
  getTableData = (isTips, isResetOperation) => {
    let { page, pageSize, startDate, endDate, locBtnActive, statusBtnActive } = this.state;
    let patID = this.patientRef && this.patientRef.getPatientID();
    this.setState({ loading: true });
    let data = {
      params: [{
        locID: locBtnActive,
        // patID,
        patInfo: patID,
        triageStatusCode: statusBtnActive,
        startDate,
        endDate
      }],
      pagination: [{
        pageSize,
        currentPage: page
      }]
    }
    $http.post('urlS', this, {
      code: '17010002',
      data,
      success: function (res) {
        if (res.errorCode === '0') {
          let tableData = res.result?.rows || [];
          if (isResetOperation !== 'N') { // 自动刷新不清除操作数据
            this.state.rowID = '';
            this.state.rowData = {};
          }
          if (tableData && tableData.length > 0) {
            if (isTips && isTips !== 'N' && isTips !== 'Y') { // 新增检查单根据就诊ID选中默认选中操作数据
              let record = Util.returnDataCccordingToAttributes(tableData, isTips, 'admID');
              this.state.rowID = record?.queID || '';
              this.state.rowData = record;
            }
            this.setState({ tableData, total: res.result?.total || 0, loading: false }, () => {
              isTips && isTips !== 'N' && isTips !== 'Y' && this.getDataAccordingToQueueID();
            });
          } else {
            this.setState({ tableData: [], total: 0, loading: false })
            isTips === 'N' ? '' : message.error('未查询到数据');
          }
        } else {
          this.setState({ loading: false });
        }
      },
      error: function () {
        this.setState({ loading: false });
      }
    })
  }

  // 删除
  handleDelete = record => {
    let data = {
      params: [{
        queID: record?.queID || '',
      }],
    }
    $http.post('urlS', this, {
      code: '17010007',
      data,
      success: function (res) {
        if (+res.errorCode === 0) {
          message.success(res.errorMessage || '删除成功');
          this.getTableData('N');
        }
      }
    })
  }

  // 操作弹框
  onClickRowPublic = (record) => {
    return {
      onClick: () => {
        if (this.state.rowID === '') {
          this.setState({ rowID: record.queID, rowData: record }, () => {
            this.getDataAccordingToQueueID();
          })
        } else {
          if (this.state.rowID !== record.queID) {
            this.setState({ rowID: record.queID, rowData: record }, () => {
              this.getDataAccordingToQueueID();
            })
          }
        }
      },
    }
  }

  setRowClassNamePublic = (record) => {
    return record.queID === this.state.rowID ? 'clickRowStyle' : '';
  }

  // 在线诊室switchChange事件
  handleOnlineCheckedChange = e => {
    this.setState({ onlineChecked: e, roomRowData: {} })
  }

  // 验光室选中操作
  handleOptometryRoomClick = (item) => {
    let { allowSendOffRoomFlag, roomRowData } = this.state;
    // 离线验光室需判断allowSendOffRoomFlag是否为Y不能分诊
    if ((allowSendOffRoomFlag === 'Y' && item.loginStatus === 'off') || item.loginStatus === 'on') {
      if (roomRowData?.areaRoomID !== item.areaRoomID) {
        this.setState({ roomRowData: item })
      } else {
        this.setState({ roomRowData: {} })
      }
    }
  }

  // 验光室双击直接分诊
  handleOptometryRoomDoubleClick = (item, e) => {
    e?.stopPropagation();
    let { allowSendOffRoomFlag, rowID, btnStatus } = this.state;
    this.setState({ roomRowData: item }, () => {
      if (rowID && btnStatus?.triageBtnEdit === 'Y' && (allowSendOffRoomFlag === 'Y' && item.loginStatus === 'off') || item.loginStatus === 'on') {
        this.handleTriageORReport('TRI');
      }
    })
  }

  // 查看队列
  handleViewQueue = (item, e) => {
    e?.stopPropagation();
    this.viewQueue && this.viewQueue.modifyVisible(true, item);
  }

  // 切换配镜中心
  handleSwitchLocBtn = item => {
    this.setState({ locBtnActive: item.locID }, () => {
      this.handleQuery('Y');
    })
  }

  // 状态按钮切换
  handleSwitchStatusBtn = item => {
    this.setState({ statusBtnActive: item.statusCode, page: 1 }, () => {
      this.getTableData();
    })
  }

  // 视光分诊/报道 -- 状态码：CR-报到；TRI-分诊
  handleTriageORReport = (statusCode) => {
    let { rowID, roomRowData } = this.state;
    if (statusCode === 'TRI' && !roomRowData.areaRoomID) {
      message.warning("请选择验光室再分诊。");
      return;
    }
    let data = {
      params: [{
        queID: rowID,
        statusCode,
        areaRoomID: roomRowData?.areaRoomID || ''
      }]
    }
    $http.post('urlS', this, {
      code: '17010005',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ roomRowData: {} });
          message.success(res.errorMessage || '操作成功');
          this.obtainDataAccordingToDepartment();
        }
      }
    })
  }

  // 复诊
  handleFollowUpVisit = () => {
    let { rowID, roomRowData, btnStatus } = this.state;
    if (!(roomRowData && roomRowData.areaRoomID) && (btnStatus?.reAdmCheckRoomFlag === 'Y')) {
      message.warning("请选择验光室再复诊排队。");
      return;
    }
    let data = {
      params: [{
        queID: rowID,
        areaRoomID: roomRowData?.areaRoomID || ''
      }]
    }
    $http.post('urlS', this, {
      code: '17010006',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ roomRowData: {} });
          message.success(res.errorMessage || '操作成功');
          this.obtainDataAccordingToDepartment();
        }
      }
    })
  }

  // 更换验光室
  handleSwitchRoom = () => {
    let { rowData } = this.state;
    this.replaceRoomRef && this.replaceRoomRef.modifyVisible(true, rowData);
  }

  handleDetailListFlagChange = () => {
    const { detailListFlag } = this.state;
    let nDetailListFlag = detailListFlag === 'Y' ? 'N' : 'Y';
    React.$setLocalStorageData('TriageFrontDesk_detailListFlag', nDetailListFlag, false);
    this.setState({ detailListFlag: nDetailListFlag });
  }

  // 自动呼叫 areaCallProp 下 callFlag 为Y则自动呼叫
  handleAutoCall = () => {
    try {
      const { areaCallProp } = this.state;
      let data = {
        params: [{
          ...areaCallProp
        }],
      }
      $http.post('urlS', this, {
        code: '17010011',
        data,
        success: function (res) {
          if (res.errorCode === '0') {
            // message.success(res.errorMessage || '呼叫成功');
            speech.speechSynthesis(res?.result || {}, callNumberSocket.sendMsg);
          }
        }
      })
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    let { locBtnData, locBtnActive, cardSelectData, startDate, endDate, cardType, statusBtnData, statusBtnActive, column, tableData, total, page, totalWidth, userData, detailListFlag,
      loading, onlineChecked, optometryRoomData, roomRowData, rowID, btnStatus, allowSendOffRoomFlag
    } = this.state;

    let operationObj = {
      width: 100,
      title: '操作',
      fixed: 'right',
      align: 'center',
      key: 'operation',
      render: (text, record) => (
        <span>
          <Icon type="delete" className="common-record-delete-span" style={{ color: record.deleteFlag === 'Y' ? 'red' : '#999' }}></Icon>
          {record.deleteFlag === 'Y' ? (
            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
              <span className="span common-record-delete-span">删除</span>
            </Popconfirm>
          ) : (
            <span style={{ color: '#999', cursor: 'no-drop', fontWeight: 'normal' }}>删除</span>
          )}
        </span>
      ),
    }
    let columns = column && column.length > 0 ? column : this.staticColumns;

    return (
      <div className="triage-front-desk">
        <div className="tfd-header tfd-btn-item flex-align-items">
          <span className="common-input-label">{userData?.locDesc || '验光配镜中心'}：</span>
          {locBtnData && locBtnData.map((item, index) => {
            return (
              <Button key={index} type={locBtnActive === item.locID ? 'primary' : 'default'} onClick={() => this.handleSwitchLocBtn(item)}>{item.locDesc}</Button>
            )
          })}
        </div>
        <div className="common-query-split-line"></div>
        <div className="tfd-content">
          {/* 查询条件 */}
          <Row className="tfd-content-query">
            <Col className="flex-align-items" span={16}>
              <div className="flex-align-items" style={{ marginRight: 15 }}>
                <span className="common-input-label">检查日期：</span>
                <RangeDatePicker
                  width="300px"
                  format="YYYY-MM-DD"
                  label=""
                  endDate={endDate}
                  startDate={startDate}
                  endChange={this.handleEndChange}
                  startChange={this.handleStartChange}
                />
              </div>
              <GetPatientInformation
                parLabelClass="common-input-label"
                queryType="fuzzySearch"
                cardType={cardType}
                cardSelectData={cardSelectData}
                onRef={ref => this.patientRef = ref}
                handleQuery={this.handleQuery}
              />
              <Button type="primary" onClick={this.handleQuery}>
                查询
              </Button>
            </Col>
            <Col span={6} style={{ textAlign: 'right' }}>
              <Button
                icon="plus"
                className="add-btn add-btn-nohover"
                onClick={this.handleAdd}
              >
                新增检查单
              </Button>
            </Col>
          </Row>
          {/* 操作按钮 */}
          <Row className="tfd-btn-item">
            <Col span={16}>
              {statusBtnData && statusBtnData.map((item, index) => {
                return (
                  <Button
                    key={index}
                    type={statusBtnActive === item.statusCode ? 'primary' : 'default'}
                    onClick={() => this.handleSwitchStatusBtn(item)}
                  >
                    {item.statusDesc + (item.statusCount ? ('(' + item.statusCount + ')') : '')}
                  </Button>
                )
              })}
            </Col>
            <Col span={6} style={{ textAlign: 'right' }}>
              <Button
                disabled={!(rowID && btnStatus?.changeRoomBtnEdit === 'Y')}
                style={{ display: btnStatus?.changeRoomBtnStatus === 'Y' ? 'inline-block' : 'none' }}
                onClick={this.handleSwitchRoom}
              >
                更换验光室
              </Button>
              <Button
                ghost
                type="primary"
                disabled={!(rowID && btnStatus?.reAdmBtnEdit === 'Y')}
                style={{ display: btnStatus?.reAdmBtnStatus === 'Y' ? 'inline-block' : 'none' }}
                onClick={this.handleFollowUpVisit}
              >
                复诊排队
              </Button>
              <Button
                className="add-btn-nohover"
                style={{
                  background: rowID ? '#52cc6f' : '#f5f5f5',
                  color: rowID ? '#fff' : 'rgba(0, 0, 0, 0.25)',
                  display: btnStatus?.checkInBtnStatus === 'Y' ? 'inline-block' : 'none'
                }}
                disabled={!(rowID && btnStatus?.checkInBtnEdit === 'Y')}
                onClick={() => this.handleTriageORReport('CR')}
              >
                报到
              </Button>
              <Button
                type="primary"
                className="add-btn-nohover"
                disabled={!(rowID && btnStatus?.triageBtnEdit === 'Y')}
                style={{ display: btnStatus?.triageBtnStatus === 'Y' ? 'inline-block' : 'none', marginRight: 0 }}
                onClick={() => this.handleTriageORReport('TRI')}
              >
                分诊
              </Button>
            </Col>
          </Row>
          <div className="table-body-height" style={{ marginTop: 12 }}>
            <PublicTablePagination
              param={{
                page,
                total,
                loading,
                x: totalWidth,
                data: tableData,
                size: 'large',
                rowKey: 'queID',
                componentName: 'TriageFrontDesk',
                y: store.getState().tableHeight.y - (detailListFlag === 'Y' ? 311 : 66),
                height: store.getState().tableHeight.y - (detailListFlag === 'Y' ? 261 : 15) + 'px',
                columns: [...columns, operationObj],
              }}
              compilePage={this.compilePage}
              getColumns={this.getColumnsData}
              onClickRowPublic={this.onClickRowPublic}
              setRowClassNamePublic={this.setRowClassNamePublic}
            />
          </div>
        </div>
        <div className="common-query-split-line"></div>
        <Card
          size="small"
          title={(
            <div style={{ position: 'relative', paddingLeft: '36px' }}>
              <Icon
                className={detailListFlag === 'N' ? 'hospital-advice-list-hide' : 'hospital-advice-list-show'}
                style={{ position: 'absolute', top: '-4px', left: '-6px' }}
                onClick={this.handleDetailListFlagChange}
              />
              诊室数据
            </div>
          )}
          extra={(
            <div>
              仅显示在线诊室
              <Switch
                checkedChildren="是"
                unCheckedChildren="否"
                checked={onlineChecked}
                style={{ marginLeft: 6 }}
                onChange={this.handleOnlineCheckedChange}
              />
            </div>
          )}
          bodyStyle={{ display: detailListFlag === 'Y' ? 'block' : 'none' }}
        >
          <div className="tfd-optometry-room">
            <div className="flex" style={{ width: (optometryRoomData?.length || 1) * 296 + 'px' }}>
              {optometryRoomData && (onlineChecked ? optometryRoomData.filter(item => item.loginStatus === 'on') : optometryRoomData).map((item, index) => {
                return (
                  <div
                    key={index}
                    className={(item.areaRoomID === roomRowData.areaRoomID ? 'tfd-optometry-room-item-active' : '') + (item.loginStatus === 'off' && allowSendOffRoomFlag !== 'Y' ? ' tfd-optometry-room-item-disable' : '') + ' tfd-optometry-room-item'}
                    onClick={() => this.handleOptometryRoomClick(item)}
                    onDoubleClick={(e) => this.handleOptometryRoomDoubleClick(item, e)}
                  >
                    <h3 className="flex-between-center">
                      <span className="flex-align-items">
                        {item.areaRoomDesc}
                        <span className={(item.loginStatus === 'off' ? 'tfd-optometry-room-item-status-invalid' : '') + ' tfd-optometry-room-item-status'}>{item.loginStatus === 'on' ? '在线' : '离线'}</span>
                      </span>
                      <span className="tfd-optometry-room-item-source">{item.admCount}/{item.totalCount}</span>
                    </h3>
                    <div className="tfd-optometry-room-item-content">
                      <div className="flex-between-center">
                        <span>当前检查号</span>
                        <span>{item.curNo || '--'}</span>
                      </div>
                      <div className="flex-between-center tfd-optometry-room-item-content-doc">
                        <span>当前检查医生</span>
                        <span>{item.doctorName || '--'}</span>
                      </div>
                    </div>
                    <div className="tfd-optometry-room-item-footer flex-center">
                      <span onClick={(e) => this.handleViewQueue(item, e)}>查看队列</span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </Card>
        <OptometryRoomQueue cardType={cardType} cardSelectData={cardSelectData} onRef={ref => this.viewQueue = ref} />
        <AddOptometrySheet
          triageFlag="Y"
          cardType={cardType}
          cardSelectData={cardSelectData}
          onRef={ref => this.addSheet = ref}
          handleQuery={this.handleQuery}
        />
        <ReplaceTheOptometryRoom optometryRoomData={optometryRoomData} onRef={ref => this.replaceRoomRef = ref} getTableData={this.getTableData} />
      </div>
    );
  }
};

export default TriageFrontDesk;