/*
 * Create:      柿子
 * CreateDate:  2024/01/12
 * Describe:    护士工作站 - 需处理医嘱
 * */
import React, { Component } from 'react';
import { Icon } from 'antd';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
import PublicTablePagination from 'pages/common/PubilcTablePagination';

class MedicalOrdersNeedToBeProcessed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      medIdentificationArr: [{
        title: '需处理停止',
        color: 'red',
      }, {
        title: '皮试医嘱',
        color: 'pink',
      }, {
        title: '长期医嘱',
        color: 'blue',
      }, {
        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: 'MedicalOrdersNeedToBeProcessed',
          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 === 'processingBtn') { // 处理医嘱
          formData[i].type = 'primary';
          formData[i].btnStyle = { marginBottom: '0' }
          formData[i].onClick = this.handleProcessingMedicalOrders;
        }
      }
      this.setState({ formData });
    } catch (error) {
      console.log(error)
    }
  };

  // 操作行
  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' : '';
  };

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

  };

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

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

  render() {
    const { tableHeight } = this.props;
    const { formData, 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={{}}
            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>
          <span style={{ color: '#666', cursor: 'pointer' }} onClick={this.handleColumnSetting}>
            <Icon style={{ fontSize: '14px', marginRight: '2px' }} type="setting" />
            列设置
          </span>
        </div>
        <div className="table-body-height">
          <PublicTablePagination
            param={{
              loading,
              columns, // 表头配置
              data: tableData, // 表格数据
              x: totalWidth, // 表格的宽度
              y: tableHeight || 'N',
              componentName: 'MedicalOrdersNeedToBeProcessed',
              height: tableHeight ? (tableHeight + 45 + 'px') : 'auto',
            }}
            onRef={ref => this.publicTableRef = ref}
            rowSelectionPublic={rowSelection}
            getColumns={this.getTableColumns}
            onClickRowPublic={this.onClickRowPublic}
            setRowClassNamePublic={this.setRowClassNamePublic}
          />
        </div>
      </div>
    )
  }
};

export default MedicalOrdersNeedToBeProcessed;