/*
 * Create:      柿子
 * CreateDate:  2024/01/19
 * Describe:    护士工作站 - 全部医嘱
 * */
import React, { Component } from 'react';
import { Icon, Divider } from 'antd';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
import PublicModalQueryTable from 'pages/common/PublicModalQueryTable';
import PublicTablePagination from 'pages/common/PubilcTablePagination';

class AllMedicalOrders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      medIdentificationArr: [{
        title: '未处理',
        color: 'red',
      }, {
        title: '已处理',
        color: 'pink',
      }, {
        title: '需处理停止',
        color: 'blue',
      }, {
        title: '已处理停止',
        color: 'purple',
      }, {
        title: '皮试医嘱',
        color: 'red',
      }, {
        title: '皮试阳性',
        color: 'pink',
      }, {
        title: '皮试阴性/已执行',
        color: 'blue',
      }, {
        title: '长期医嘱',
        color: 'purple',
      }, {
        title: '新开医嘱',
        color: 'purple',
      }, {
        title: '临时医嘱',
        color: 'purple',
      }], // 医嘱标识数组
      loading: false,
      columns: [],
      formData: [],
      tableData: [],
      totalWidth: 0,
      selectedRowKeys: [],
      selectedRows: []
    };
  };

  componentDidMount() {
    this.props && 'onRef' in this.props && this.props.onRef(this);
    this.getTableColumns();
  };

  // 获取表头数据
  getTableColumns = async () => {
    try {
      let data = {
        params: [{
          compontName: 'AllMedicalOrders',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result?.C || [];
      if (columns && columns.length > 0) {
        this.setState({
          columns,
          totalWidth: res.totalWidth
        })
      }
      let formData = res.result?.formData || [];
      for (let i = 0; i < formData.length; i++) {
        if (formData[i]?.typeCode === 'Input') { // 查询
          formData[i].onPressEnter = this.handleQuery;
        }
        if (formData[i]?.dataIndex === 'queryBtn') { // 查询
          formData[i].type = 'primary';
          formData[i].btnStyle = { marginBottom: '0' };
          formData[i].onClick = this.handleQuery;
        }
        if (formData[i]?.dataIndex === 'processingBtn') { // 处理医嘱
          formData[i].type = 'primary';
          formData[i].ghost = true;
          formData[i].style = { textAlign: 'center' };
          formData[i].btnStyle = { marginBottom: '0' };
          formData[i].onClick = this.handleProcessingMedicalOrders;
        }
        if (formData[i]?.dataIndex === 'revokeBtn') { // 撤销处理
          formData[i].type = 'danger';
          formData[i].ghost = true;
          formData[i].popConfirmFlag = 'Y'; // 弹出确认框
          formData[i].popConfirmTitle = '撤销后不可恢复，确定撤销处理吗?'; // 弹出确认框
          formData[i].btnStyle = { marginBottom: '0' };
          formData[i].onClick = this.handleRevokeProcessing;
        }
      }
      this.setState({ formData });
    } catch (error) {
      console.log(error)
    }
  };

  // 查询
  handleQuery = (value) => {

  };

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowID === '' || (this.state.rowID && (this.state.rowID !== record.key))) {
          this.setState({
            rowID: record.key,
            rowData: record,
          })
        } else {
          this.handleClear();
        }
      }
    }
  };

  handleClear = () => {
    this.setState({ rowID: '', rowData: {} });
  };

  // 选中行操作
  setRowClassNamePublic = (record) => {
    return record.key === this.state.rowID ? 'clickRowStyle' : '';
  };

  handleSelectedRowChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRows,
      selectedRowKeys,
    })
  };

  // 颜色优先级
  handleColorPriority = () => {
    this.props.modifyColorPriorityFlag && this.props.modifyColorPriorityFlag('Y');
    this.colorPriorityRef && this.colorPriorityRef.modifyVisible(true);
  };

  // 列设置
  handleColumnSetting = () => {
    this.publicTableRef && this.publicTableRef.handleOpenSettingModel();
  };

  // 处理医嘱
  handleProcessingMedicalOrders = () => {

  };

  // 撤销处理
  handleRevokeProcessing = () => {

  };

  // 复位
  handleColorPriorityReset = () => {
    console.log('触发了');
    this.handleCancelCallback();
  };

  // 关闭 颜色优先级 弹窗回调 - 用于父组件重新开启鼠标监听
  handleCancelCallback = () => {
    this.props.modifyColorPriorityFlag && this.props.modifyColorPriorityFlag('N');
  };

  // 保存
  handleColorPrioritySave = () => {

  };

  render() {
    const { tableHeight } = this.props;
    const { formData, selectData, medIdentificationArr, loading, columns, tableData, totalWidth, selectedRowKeys } = this.state;

    // 列表多选操作
    let rowSelection = {
      selectedRowKeys,
      onChange: this.handleSelectedRowChange,
    };
    return (
      <div className="medical-orders-need-to-be-processed">
        <div style={{ marginTop: '4px' }} className="dynamic-component">
          <DynamicRenderingForm
            className="dynamic-component-form dynamic-component-form-margin-bottom0"
            rowData={{}}
            selectData={selectData}
            formData={formData}
            onRef={ref => this.formRef = ref}
          />
        </div>
        <div style={{ margin: '10px 0' }} className="flex-between-center">
          <div className="flex-align-items">
            {medIdentificationArr && medIdentificationArr.map((item, index) => {
              return (
                <div key={index} style={{ marginRight: '12px', fontSize: '12px' }} className="flex-align-items">
                  <span style={{ background: item.color, width: '14px', height: '14px' }} className="common-record-color-notes"></span>
                  {item.title}
                </div>
              )
            })}
          </div>
          <div>
            <span style={{ color: '#666', cursor: 'pointer' }} onClick={this.handleColorPriority}>
              <Icon style={{ fontSize: '14px', marginRight: '2px' }} type="sort-descending" />
              颜色优先级
            </span>
            <Divider type="vertical" />
            <span style={{ color: '#666', cursor: 'pointer' }} onClick={this.handleColumnSetting}>
              <Icon style={{ fontSize: '14px', marginRight: '2px' }} type="setting" />
              列设置
            </span>
          </div>
        </div>
        <div className="table-body-height">
          <PublicTablePagination
            param={{
              loading,
              columns, // 表头配置
              data: tableData, // 表格数据
              x: totalWidth, // 表格的宽度
              y: tableHeight || 'N',
              componentName: 'AllMedicalOrders',
              height: tableHeight ? (tableHeight + 45 + 'px') : 'auto',
            }}
            onRef={ref => this.publicTableRef = ref}
            rowSelectionPublic={rowSelection}
            getColumns={this.getTableColumns}
            onClickRowPublic={this.onClickRowPublic}
            setRowClassNamePublic={this.setRowClassNamePublic}
          />
        </div>

        {/* 护士站设置 - 颜色优先级 */}
        <PublicModalQueryTable
          title="护士站设置"
          cancelText="复位"
          okText="保存"
          autoClose="N"
          queryCode=""
          priorityIndex="priority"
          operationFlag="Y"
          cancelPopConfirmFlag="Y"
          cancelPopConfirmTitle="复位后不可恢复，确定复位吗?"
          componentName="AllMedicalOrdersColorPriority"
          onRef={ref => this.colorPriorityRef = ref}
          handleCancel={this.handleColorPriorityReset}
          handleCancelCallback={this.handleCancelCallback}
          handleOk={this.handleColorPrioritySave}
        />
      </div>
    )
  }
};

export default AllMedicalOrders;