/*
 * Create:      柿子
 * CreateDate:  2022/07/13
 * Describe：   视光管理系统 - 综合验光室
 * */
import React, { Component } from 'react';
import { Button, Switch, Radio, Card, Select, message, Tooltip, Icon } from 'antd';
import store from 'store';
import moment from 'moment';
import { Util, speech } from 'tools/index';
import { $http } from 'containers/config/https';
import { callNumberSocket } from 'tools/callNumber.js';
import RangeDatePicker from 'components/rangePicker/index';
import GetPatientInformation from './GetPatientInformation';
import PublicTablePagination from 'pages/common/PubilcTablePagination';
import AddOptometrySheet from './AddOptometrySheet';
import ReplaceTheOptometryRoom from './ReplaceTheOptometryRoom';
import 'pages/hospital/style/index.less'

class ComprehensiveOptometryRoom extends Component {
  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      categoryData: {},
      interfaceType: '',
      userData,
      patSelectData: [],
      patRadio: '',
      statusSelectData: [],
      statusRadio: '',
      onlineChecked: true,
      startDate: moment().format('YYYY-MM-DD'),
      endDate: moment().format('YYYY-MM-DD'),
      optometristID: undefined, // 验光师
      page: 1,
      pageSize: 50,
      total: 0,
      loading: false,
      totalWidth: 2560,
      tableData: [],
      column: [],
      rowID: '',
      rowData: {},
      projectLoading: false,
      projectTotalWidth: 1250,
      projectTableData: [],
      projectColumns: [],
      cardSelectData: [],
      selectedRowKeys: [],
      selectedRows: [],
      cardType: '',
      optometristSelectData: [], // 验光师下拉数据
      areaRoomID: undefined, // 当前诊室
      areaRoomSelectData: [], // 诊室（验光室）
      areaRoomEditFlag: 'Y', // 是否允许选择诊室（Y-允许；N-不允许）
      btnStatus: {}, // 操作按钮控制
      detailListFlag: 'Y',
      callTimes: 0, // 呼叫次数
      intervalTime: 0, // 呼叫间隔时间（秒）
      intervalNum: 1, // 循环调用次数
      optometryTimedRefresh: '', // 自动刷新
    };
    this.staticColumns = [{
      key: 1,
      title: '队列号',
      dataIndex: 'seqNo',
      align: 'center',
      width: 100
    }, {
      key: 2,
      title: '状态',
      dataIndex: 'queStatusDesc',
      align: 'center',
      width: 100
    }, {
      key: 3,
      title: '检查单号',
      dataIndex: 'appNo',
      align: 'center',
      width: 300
    }, {
      key: 4,
      title: '申请项目',
      dataIndex: 'appItemDesc',
      align: 'center',
      width: 300
    }, {
      key: 5,
      title: '病人ID',
      dataIndex: 'patNo',
      align: 'center',
      width: 100
    }, {
      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
    }];
    this.staticProjectColumns = [{
      key: 1,
      title: '项目名称',
      dataIndex: 'medDesc',
      align: 'center',
      width: 300
    }, {
      key: 2,
      title: '数量',
      dataIndex: 'ordQty',
      align: 'center',
      width: 100
    }, {
      key: 3,
      title: '单价',
      dataIndex: 'sprice',
      align: 'center',
      width: 100
    }, {
      key: 4,
      title: '单位',
      dataIndex: 'unitDesc',
      align: 'center',
      width: 100
    }, {
      key: 5,
      title: '金额（元）',
      dataIndex: 'sumamt',
      align: 'center',
      width: 100
    }, {
      key: 6,
      title: '账单描述',
      dataIndex: 'billDesc',
      align: 'center',
      width: 100
    }, {
      key: 7,
      title: '申请单明细状态描述',
      dataIndex: 'appItemStatusDesc',
      align: 'center',
      width: 150
    }, {
      key: 8,
      title: '执行记录状态描述',
      dataIndex: 'execStatusDesc',
      align: 'center',
      width: 150
    }, {
      key: 9,
      title: '备注',
      dataIndex: 'ordNote',
      align: 'center',
      width: 150
    }];
    this.timer = null;
  }

  componentDidMount() {
    let newCategory;
    if ('paras' in this.props && this.props.paras && this.props.paras.params) { // 侧菜单获取类别参数
      newCategory = this.props.paras.params;
    } else {
      if ('location' in this.props && this.props.location.state && this.props.location.state.params) { // 头菜单获取类别参数
        newCategory = this.props.location.state.params;
        React.$setSessionData('ComprehensiveOptometryRoom', newCategory, false);
      } else { // 头菜单刷新界面时获取类别
        newCategory = React.$getSessionData('ComprehensiveOptometryRoom', false);
      }
    }
    let interfaceType = Util.getObjByUrlStr(newCategory)?.interfaceType || '';
    console.log("ComprehensiveOptometryRoom", newCategory);
    this.props.onRef && this.props.onRef(this);
    let CORDefaultValue = store.getState() && store.getState().otherData && store.getState().otherData.CORDefaultValue ? store.getState().otherData.CORDefaultValue : {};
    if (CORDefaultValue && CORDefaultValue.interfaceType === interfaceType) {
      this.setState({ ...CORDefaultValue }, () => {
        this.getBindInfo();
        this.getTableData('N');
        this.handleIimedCallTableData('N');
      })
    } else {
      let detailListFlag = React.$getLocalStorageData('ComprehensiveOptometryRoom_' + interfaceType, false);
      this.setState({ detailListFlag: detailListFlag ? detailListFlag : this.state.detailListFlag }, () => {
        this.getDefaultData(interfaceType);
        this.getColumnsData();
        this.getProjectColumnsData();
      })
    }
  }

  componentWillUnmount() {
    store.dispatch({
      type: 'CORDefaultValue',
      value: this.state
    });
    if (this.timer) { // 清除定时器
      clearInterval(this.timer);
      this.timer = null;
    }
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 获取初始化数据
  getDefaultData = async (interfaceType) => {
    let { startDate, endDate, areaRoomEditFlag } = this.state;
    try {
      var data = {
        params: [{}]
      }
      let res = await React.$asyncPost(this, '17020002', data);
      let defaultValue = '';
      let cardSelectData = res.result?.cardType || [];
      for (var i = 0; i < cardSelectData.length; i++) {
        if (cardSelectData[i].defaultFlag === 'Y') {
          defaultValue = cardSelectData[i].id;
        }
      }
      this.setState({
        interfaceType,
        cardSelectData,
        cardType: defaultValue,
        btnStatus: res.result?.btnStatus || {}, // 按钮状态
        areaRoomSelectData: res.result?.areaRoom || [], // 诊室（验光室）
        areaRoomID: res.result?.defaultValue?.defaultAreaRoomID || undefined, // 默认当前诊室ID
        patRadio: res.result?.defaultValue?.defalutPatListStatusCode, // 默认病人列表状态
        patSelectData: res.result?.patListStatus || [], // 病人列表状态（M-我的患者；R-诊室患者）
        statusRadio: res.result?.defaultValue?.defalutAdmListStatusCode, // 默认就诊状态
        statusSelectData: res.result?.admListStatus || [], // 就诊列表状态（N-未开始；I-进行中；C-已完成）
        optometristSelectData: res.result?.optomeDoctor || [], // 验光师下拉数据
        startDate: res.result?.defaultValue?.defaultStartDate || startDate, // 默认开始日期
        endDate: res.result?.defaultValue?.defaultEndDate || endDate, // 默认结束日期
        onlineChecked: res.result?.defaultValue?.defaultLoginStatus === 'off' ? false : true, // 默认在线状态（on-在线；off-不在线）
        areaRoomEditFlag: res.result?.defaultValue?.areaRoomEditFlag || areaRoomEditFlag, // 是否允许选择诊室（Y-允许；N-不允许）
        callTimes: res.result?.defaultValue?.callTimes || 0, // 呼叫次数
        intervalTime: res.result?.defaultValue?.intervalTime || 0, // 呼叫次数
        optometryTimedRefresh: res.result?.optometryTimedRefresh || '', // 循环调用次数
      }, () => {
        this.getBindInfo();
        this.getTableData('N');
        this.handleIimedCallTableData('N');
      })
    } catch (error) {
      console.log(error)
    }
  }

  // 定时调用列表数据
  handleIimedCallTableData = () => {
    const { optometryTimedRefresh } = this.state;
    console.log('optometryTimedRefresh', optometryTimedRefresh)
    if (!this.timer && optometryTimedRefresh) {
      console.log('触发了定时器')
      this.timer = setInterval(() => {
        this.getTableData('N');
      }, parseInt(optometryTimedRefresh) * 1000);
    }
  }

  // 在线诊室switchChange事件
  handleOnlineCheckedChange = e => {
    this.setState({ onlineChecked: e }, () => {
      this.updateOnlineStatus(); // 更新在线状态
    })
  }

  // 获取表头数据
  getColumnsData = async () => {
    try {
      let data = {
        params: [{
          compontName: 'ComprehensiveOptometryRoom',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let column = res.result && res.result.C && res.result.C.length > 0 ? res.result.C : [];
      if (column && column.length > 0) {
        column = column.map(item => {
          return {
            ...item,
            render: (text, record) => {
              return (
                <Tooltip title={text}>
                  <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                </Tooltip>
              );
            },
          }
        })
        this.setState({
          column,
          totalWidth: res.totalWidth
        })
      }
    } catch (error) {
      console.log(error)
    }
  }

  handleQuery = (isTips) => {
    this.setState({ page: 1 }, () => {
      this.getTableData(isTips);
    })
  }

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

  // 获取列表数据 
  getTableData = (isTips) => {
    this.setState({ loading: true });
    let { page, pageSize, startDate, endDate, areaRoomID, patRadio, statusRadio, optometristID } = this.state;
    let patID = this.patientRef && this.patientRef.getPatientID();
    let data = {
      params: [{
        // patID, // 患者ID
        patInfo: patID,
        endDate,
        startDate,
        areaRoomID, // 诊室ID
        optomeDoctorID: optometristID, // 验光师ID
        patListStatusCode: patRadio, // 病人列表状态（M-我的患者；R-诊室患者）
        admListStatusCode: statusRadio, // 就诊列表状态（N-未开始；I-进行中；C-已完成）
      }],
      pagination: [{
        pageSize,
        currentPage: page
      }]
    }
    $http.post('urlS', this, {
      code: '17020003',
      data,
      success: function (res) {
        this.setState({ loading: false });
        if (res.errorCode === '0') {
          let tableData = res.result?.rows || [];
          if (tableData && tableData.length > 0) {
            this.setState({
              tableData,
              total: res.result?.total || 0,
            }, () => {
              if (isTips && isTips !== 'N' && isTips !== 'Y') { // 新增检查单根据就诊ID选中默认选中操作数据
                let record = Util.returnDataCccordingToAttributes(tableData, isTips, 'admID');
                this.savePatientInformation(record);
              }
            })
          } else {
            this.setState({
              tableData: [],
              total: 0,
            })
            isTips === 'N' ? '' : message.error('未查询到数据');
            this.clearRowData();
          }
        } else {
          this.setState({
            loading: false, tableData: [], total: 0,
          }, () => {
            this.clearRowData();
          });
        }
      },
      error: function () {
        this.setState({
          loading: false
        });
      }
    })
  }

  clearRowData = () => {
    this.setState({
      rowID: '',
      rowData: {},
      projectTableData: [],
      selectedRowKeys: [],
      selectedRows: [],
    })
  }

  // 操作弹框
  onClickRowPublic = (record) => {
    return {
      onClick: () => {
        if (this.state.rowID === '') {
          this.savePatientInformation(record)
        } else {
          if (this.state.rowID !== record.queID) {
            this.savePatientInformation(record)
          }
        }
      },
      onDoubleClick: () => {
        this.savePatientInformation(record, 'doubleClick')
      },
    }
  }

  // 保存患者数据
  savePatientInformation = (record, type) => {
    try {
      let { areaRoomID } = this.state;
      record.areaRoomID = areaRoomID;
      sessionStorage.setItem('patientData', JSON.stringify({
        patID: record?.patID,
        admID: record?.admID,
      }));
      sessionStorage.setItem('titleData', JSON.stringify({ ...record }));
      this.props.updatePatData && this.props.updatePatData(record);
      this.setState({ rowID: record.queID, rowData: record }, () => {
        if (type === 'doubleClick') { // 双击
          this.props.handleDoublePatList && this.props.handleDoublePatList(record);
        } else {
          this.getProjectTableData();
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

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

  // 获取项目表头数据
  getProjectColumnsData = async () => {
    try {
      let data = {
        params: [{
          compontName: 'ComprehensiveOptometryRoomDdel',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let projectColumns = res.result && res.result.C && res.result.C.length > 0 ? res.result.C : [];
      if (projectColumns && projectColumns.length > 0) {
        projectColumns = projectColumns.map(item => {
          return {
            ...item,
            render: (text, record) => {
              return (
                <Tooltip title={text}>
                  <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                </Tooltip>
              );
            },
          }
        })
        this.setState({
          projectColumns,
          projectTotalWidth: res.totalWidth
        })
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 获取检查申请单项目明细
  getProjectTableData = () => {
    let { rowID, btnStatus } = this.state;
    let data = {
      params: [{
        queID: rowID
      }],
    }
    $http.post('urlS', this, {
      code: '17020004',
      data,
      success: function (res) {
        if (res.errorCode === '0') {
          let resBtnStatus = 'btnStatus' in res.result && res.result.btnStatus ? res.result.btnStatus : {};
          this.setState({
            projectTableData: res.result?.rows || [],
            btnStatus: {
              ...btnStatus,
              ...resBtnStatus
            },
            selectedRowKeys: [],
            selectedRows: []
          })
        }
      }
    })
  }

  // 表格数据选择
  handleRowSelectionChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys,
      selectedRows,
    })
  }

  // 撤销检查项目
  handleCancelInspectionItems = Util.debounce((httpCode, httpMessage) => {
    let { selectedRowKeys, areaRoomID } = this.state;
    let data = {
      params: [{
        areaRoomID,
        queItemData: selectedRowKeys,
      }],
    }
    $http.post('urlS', this, {
      code: httpCode,
      data,
      success: function (res) {
        if (res.errorCode === '0') {
          message.success(res.errorMessage || httpMessage);
          this.getProjectTableData();
        }
      }
    })
  })

  getBindInfo = () => {
    let { userData, areaRoomID } = this.state;
    let data = {
      params: [{
        dataID: areaRoomID ? areaRoomID : '',
        userID: userData?.userID || '',
        hospID: userData?.hospID || '',
        purCode: "OptomeRoom",
      }]
    }
    $http.post('urlDeault', this, {
      code: "04150007",
      data: data,
      success: (res) => {
        if (res.errorCode === '0' && res.result.serverIP !== undefined) {
          callNumberSocket.init(res.result.serverIP, res.result.serverPort);
        }
      }
    })
  }

  // 呼叫（17020006） / 过号（17020007）  / 复叫（17020016）
  handleCallAndCrossSign = Util.debounce((code, title, isQuery) => {
    let { areaRoomID, onlineChecked, rowID } = this.state;
    let data = {
      params: [{
        queID: rowID,
        areaRoomID
      }],
    }
    $http.post('urlS', this, {
      code,
      data,
      success: function (res) {
        if (res.errorCode === '0') {
          message.success(res.errorMessage || title);
          speech.speechSynthesis(res?.result || {}, callNumberSocket.sendMsg);
          this.handleSpeechSynthesis(code, title);
          if (isQuery !== 'N') {
            this.handleQuery()
            if (!onlineChecked) { // 如果医生处于离线状态的话更新为在线状态
              this.setState({ onlineChecked: true }, () => {
                this.updateOnlineStatus();
              })
            }
          }
        }
      }
    })
  })

  // 呼叫
  handleSpeechSynthesis = (code, title) => {
    const { callTimes, intervalTime, intervalNum } = this.state;
    if ((code === '17020006' || code === '17020016') && parseInt(callTimes) > intervalNum) { // 呼叫/复叫
      setTimeout(() => {
        this.setState({ intervalNum: this.state.intervalNum + 1 }, () => {
          this.handleCallAndCrossSign(code, title, 'N');
        })
      }, (intervalTime || 4) * 1000)
    } else {
      this.setState({ intervalNum: 1 });
    }
  }

  // 更新验光师上线状态 -（on-上线；off-下线）
  updateOnlineStatus = () => {
    let { areaRoomID, onlineChecked } = this.state;
    let data = {
      params: [{
        areaRoomID,
        statusCode: onlineChecked ? 'on' : 'off'
      }],
    }
    $http.post('urlS', this, {
      code: '17020008',
      data,
      success: function (res) {
        if (res.errorCode === '0') {
          message.success(res.errorMessage || '操作成功');
        }
      }
    })
  }

  // 修改操作框数据
  handleModifyInputValue = (e, dataIndex) => {
    this.state[dataIndex] = e;
    this.setState({}, () => {
      this.handleQuery();
    })
  }

  // 新增验光单
  handleAdd = () => {
    let { areaRoomID } = this.state;
    this.addSheet && this.addSheet.modifyVisible(true, areaRoomID);
  }

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

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

  render() {
    let { interfaceType, patSelectData, patRadio, onlineChecked, startDate, endDate, optometristID, statusSelectData, statusRadio, page, total, loading, totalWidth, tableData, column, projectLoading, detailListFlag,
      projectTotalWidth, projectTableData, projectColumns, selectedRowKeys, cardType, cardSelectData, optometristSelectData, areaRoomID, areaRoomSelectData, areaRoomEditFlag, btnStatus, rowID
    } = this.state;
    let columns = column && column.length > 0 ? column : this.staticColumns;
    // 行数据选择
    let rowSelectionPublic = {
      selectedRowKeys,
      onChange: this.handleRowSelectionChange,
    };

    return (
      <div>
        <div style={{ padding: '12px 15px' }}>
          <GetPatientInformation
            queryType="fuzzySearch"
            parLabelClass="common-input-label"
            cardType={cardType}
            cardSelectData={cardSelectData}
            onRef={ref => this.patientRef = ref}
            handleQuery={this.handleQuery}
          />
          <div className="flex-align-items" style={{ float: 'right' }}>
            <span className="common-input-label">当前验光室：</span>
            <Select
              showSearch
              value={areaRoomID}
              disabled={areaRoomEditFlag === 'Y' ? false : true}
              placeholder="请选择"
              optionFilterProp="search"
              className="common-query-input"
              onChange={(e) => this.handleModifyInputValue(e, 'areaRoomID')}
            >
              {React.$SelectOptions(areaRoomSelectData, 'areaRoomID', 'areaRoomDesc')}
            </Select>
            {btnStatus.loginBtnStatus === 'N' ? '' : (
              <Switch
                checkedChildren="上线"
                unCheckedChildren="下线"
                checked={onlineChecked}
                style={{ marginRight: '12px' }}
                disabled={!(btnStatus.loginBtnEdit === 'Y')}
                onChange={this.handleOnlineCheckedChange}
              />
            )}
            <Radio.Group
              value={patRadio}
              buttonStyle="solid"
              style={{ float: 'right' }}
              onChange={(e) => this.handleModifyInputValue(e.target.value, 'patRadio')}
            >
              {patSelectData && patSelectData.map((item, index) => {
                return (
                  <Radio.Button key={index} value={item.statusCode}>{item.statusDesc}</Radio.Button>
                )
              })}
            </Radio.Group>
          </div>
        </div>
        <div className="common-query-split-line" style={{ height: 8 }}></div>
        <div className="table-body-height" style={{ padding: '12px 15px' }}>
          <div className="flex-between-center" style={{ marginBottom: 12 }}>
            <div className="flex-align-items">
              <div className="flex-align-items" style={{ marginRight: 15 }}>
                <span className="common-input-label">检查日期：</span>
                <RangeDatePicker
                  width="300px"
                  format="YYYY-MM-DD"
                  label=""
                  isChange={true}
                  endDate={endDate}
                  startDate={startDate}
                  endChange={(e) => this.handleModifyInputValue(e, 'endDate')}
                  startChange={(e) => this.handleModifyInputValue(e, 'startDate')}
                />
              </div>
              <span className="common-input-label">验光师：</span>
              <Select
                allowClear
                showSearch
                value={optometristID}
                placeholder="请选择"
                optionFilterProp="search"
                className="common-query-input"
                onChange={(e) => this.handleModifyInputValue(e, 'optometristID')}
              >
                {React.$SelectOptions(optometristSelectData)}
              </Select>
              <Button type="primary" style={{ marginRight: 15 }} onClick={this.handleQuery}>查询</Button>
              {btnStatus.newOptomeBtnStatus === 'Y' ? (
                <Button
                  icon="plus"
                  style={{ marginRight: 15 }}
                  className={btnStatus.newOptomeBtnEdit === 'Y' ? 'add-btn add-btn-nohover' : ''}
                  disabled={!(btnStatus.newOptomeBtnEdit === 'Y')}
                  onClick={this.handleAdd}
                >
                  新增检查单
                </Button>
              ) : ''}
              {interfaceType === 'optometryRoom' && ( // 验光师
                <Button
                  disabled={!(rowID && btnStatus?.changeRoomBtnEdit === 'Y')}
                  style={{ display: btnStatus?.changeRoomBtnStatus === 'Y' ? 'inline-block' : 'none' }}
                  onClick={this.handleSwitchRoom}
                >
                  更换验光室
                </Button>
              )}
            </div>
            <div>
              {btnStatus.callBtnStatus === 'N' ? '' : (
                <Button
                  type="primary"
                  style={{ margin: '0 15px' }}
                  disabled={!(btnStatus.callBtnEdit === 'Y')}
                  onClick={() => this.handleCallAndCrossSign('17020006', '呼叫成功')}
                >呼叫</Button>
              )}
              {btnStatus.delayCallBtnStatus === 'N' ? '' : (
                <Button
                  ghost
                  type="primary"
                  disabled={!(btnStatus.reCallBtnEdit === 'Y')}
                  onClick={() => this.handleCallAndCrossSign('17020016', '呼叫成功')}
                >
                  重呼
                </Button>
              )}
              {btnStatus.delayCallBtnStatus === 'N' ? '' : (
                <Button
                  ghost
                  type="danger"
                  style={{ margin: '0 15px' }}
                  disabled={!(btnStatus.delayCallBtnEdit === 'Y')}
                  onClick={() => this.handleCallAndCrossSign('17020007', '操作成功')}
                >
                  过号
                </Button>
              )}

              <Radio.Group
                value={statusRadio}
                buttonStyle="solid"
                onChange={(e) => this.handleModifyInputValue(e.target.value, 'statusRadio')}
              >
                {statusSelectData && statusSelectData.map((item, index) => {
                  return (
                    <Radio.Button key={index} value={item.statusCode}>{item.statusDesc}</Radio.Button>
                  )
                })}
              </Radio.Group>
            </div>
          </div>
          <PublicTablePagination
            param={{
              page,
              total,
              loading,
              columns,
              x: totalWidth,
              data: tableData,
              size: 'large',
              rowKey: 'queID',
              componentName: 'ComprehensiveOptometryRoom',
              y: store.getState().tableHeight.y - (detailListFlag === 'Y' ? 319 : 92),
              height: store.getState().tableHeight.y - (detailListFlag === 'Y' ? 269 : 42) + 'px',
            }}
            compilePage={this.compilePage}
            getColumns={this.getColumnsData}
            onClickRowPublic={this.onClickRowPublic}
            setRowClassNamePublic={this.setRowClassNamePublic}
          />
        </div>
        <div className="common-query-split-line" style={{ height: 8 }}></div>
        <Card
          size="small"
          className="table-body-height"
          title={(
            <div className="flex">
              <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>
              {btnStatus.cancelCheckBtnStatus === 'N' || detailListFlag === 'N' ? '' : (
                <Button
                  ghost
                  size="small"
                  type="danger"
                  style={{ marginLeft: 32 }}
                  disabled={!(selectedRowKeys && selectedRowKeys.length > 0 && btnStatus && btnStatus.cancelCheckBtnEdit === 'Y')}
                  onClick={() => this.handleCancelInspectionItems('17020005', '撤销成功')}
                >
                  撤销检查
                </Button>
              )}
              {btnStatus.reExecBtnStatus === 'N' || detailListFlag === 'N' ? '' : (
                <Button
                  ghost
                  size="small"
                  type="primary"
                  style={{ marginLeft: 15 }}
                  disabled={!(selectedRowKeys && selectedRowKeys.length > 0 && btnStatus && btnStatus.reExecBtnEdit === 'Y')}
                  onClick={() => this.handleCancelInspectionItems('17020010', '执行成功')}
                >
                  重新执行
                </Button>
              )}
            </div>
          )}
          bodyStyle={{ display: detailListFlag === 'Y' ? 'block' : 'none' }}
        >
          <PublicTablePagination
            param={{
              loading: projectLoading,
              x: projectTotalWidth,
              data: projectTableData,
              rowKey: 'queItemID',
              componentName: 'ComprehensiveOptometryRoomDdel',
              y: 150,
              height: 200,
              columns: projectColumns && projectColumns.length > 0 ? projectColumns : this.staticProjectColumns,
            }}
            rowSelectionPublic={rowSelectionPublic}
            getColumns={this.getProjectColumnsData}
          />
        </Card>
        <AddOptometrySheet
          triageFlag="N"
          cardType={cardType}
          cardSelectData={cardSelectData}
          onRef={ref => this.addSheet = ref}
          handleQuery={this.handleQuery}
        />

        {/* 更换验光室 */}
        <ReplaceTheOptometryRoom callType="2" optometryRoomData={areaRoomSelectData} onRef={ref => this.replaceRoomRef = ref} getTableData={this.getTableData} />
      </div>
    );
  }
};

export default ComprehensiveOptometryRoom;