/**
 * 取药执行记录
 */
import React from 'react';
import { message, Modal, Table, Select } from 'antd';
import { Util, } from 'tools/index';
import { $http } from 'containers/config/https';
// import CommonPagination from 'components/pagination/index';
import './index.less';
const Option = Select.Option;
let timeout;
class ShowRecordMedicineModal extends React.Component {

  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData: userData,
      dataSource: [],
      total: 0,
      page: 1,
      pageSize: 10,
      size: 'small',
      medData: [],//药品下拉框
      CBMedID: "",
    }
  }

  componentDidMount() {
    this.initData()
    this.loadData(1)
  }

  initData() {
    this.columns = [
      {
        title: '患者登记号',
        dataIndex: 'patNo',
        width: 120,
        align: 'center',
      }, {
        title: '患者姓名',
        dataIndex: 'patName',
        width: 120,
        align: 'center',
      }, {
        title: '开医嘱医生',
        dataIndex: 'ordDocName',
        width: 120,
        align: 'center',
      }, {
        title: '医嘱信息',
        dataIndex: 'ordMessage',
        width: 180,
        align: 'center',
      }, {
        title: '医嘱优先级',
        dataIndex: 'ordPriorityDesc',
        width: 180,
        align: 'center',
      }, {
        title: '医嘱状态',
        dataIndex: 'ordStatusDesc',
        width: 100,
        align: 'center',
      }, {
        title: '医嘱日期',
        dataIndex: 'ordDate',
        width: 120,
        align: 'center',
      }, {
        title: '医嘱时间',
        dataIndex: 'ordTime',
        width: 120,
        align: 'center',
      }
    ]
  }

  loadData(page) {
    var params = {
      params: [{
        admData: this.props.patient,
        medID: this.state.CBMedID,
      }],
      pagination: [{
        pageSize: this.state.pageSize,
        currentPage: page
      }]
    }
    $http.post('urlDeault', this, {
      code: "03060031",
      data: params,
      success: function (res) {
        if (res.errorCode == '0') {
          this.setState({
            dataSource: res.result.data,
            total: res.result.totalCount
          }, () => {
          })
        }
      }
    });
  }

  //分页切换
  onChange(e) {
    this.setState({ page: e }, () => {
      this.loadData(e);
    });
  }

  //分页切换
  changePageSize(current, pageSize) {
    this.setState({ pageSize: pageSize, page: current }, () => {
      this.loadData(current, pageSize);
    });
  }

  onClickRow = (record) => {
    return {
      onClick: () => {
        if (this.state.ordID == record.ordID) {
          this.setState({
            ordID: ''
          })
        } else {
          this.setState({
            ordID: record.ordID
          })
        }
      }
    }
  }

  //点击行，渲染当前行样式 
  setRowClassName = (record) => {
    return record.ordID === this.state.ordID ? 'clickRowStyle' : '';
  }

  closeModal(name) {
    let { onHide } = this.props;
    onHide && onHide();
  }

  onSubmit = Util.debounce(() => {
    if (Util.isEmpty(this.state.ordID)) {
      message.error('请选择需要执行的记录！')
      return
    }
    var { onSubmit } = this.props;
    onSubmit && onSubmit(this.state.ordID)
  })
  onSelctChange = (id) => {
    this.setState({
      CBMedID: id,
    }, () => {
      this.loadData(1)
    })
  }
  handleSerach = (value) => {
    let reg = /\s/g;
    if (reg.test(value)) {
      message.error('不能输入空字符')
      return
    }
    this.GetMedItem(value, data => this.setState({ medData: data }))
  }
  GetMedItem = (value, callback) => {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    function getMedItemData() {
      if (value === "") {
        this.setState({ medData: [] })
        return
      }
      let data = {
        params: [{
          findCode: value,
          detailFlag: "",
        }]
      }
      $http.post('urlS', this, {
        code: "01010002",
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            callback(res.result.Data)
          }
        }
      })
    }
    timeout = setTimeout(getMedItemData, 1000);
  }
  render() {
    // modal 是否弹框标记
    return <div>
      <Modal
        width="1500px"
        className='out-component-modal'
        title={'取药执行记录'}
        maskClosable={false}
        visible={this.props.isShow}
        onOk={this.onSubmit.bind(this)}
        onCancel={this.closeModal.bind(this)}>
        <div>
          <div style={{ display: 'flex', marginLeft: '20px' }}>
            <div style={{ lineHeight: '40px' }}> 药品:</div>
            <Select
              allowClear
              showSearch
              // optionFilterProp="title"
              style={{ width: '180px', margin: ' 3px 10px' }}
              placeholder="请输入药品名称"
              optionFilterProp="children"
              onChange={this.onSelctChange}
              onSearch={this.handleSerach}
              filterOption={false}
            >
              {
                this.state.medData && this.state.medData.map(
                  (item) => {
                    return <Option key={item.id} value={item.id} title={item.descripts + "^" + item.descriptsSPCode.toLowerCase()}>{item.descripts}</Option>
                  }
                )

              }
            </Select>
          </div>
          <Table columns={this.columns}
            dataSource={this.state.dataSource}
            bordered style={{ height: '65vh' }}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
            rowKey={(data) => {
              return data.ordID
            }}
            scroll={{ y: '60vh' }}
            pagination={false}>
          </Table>
          {/* <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total}
            search={this.state.search}
            onShowSizeChange={this.changePageSize.bind(this)} complete={true} dataSource={this.state.dataSource}
            onChange={this.onChange.bind(this)} /> */}
        </div>
      </Modal></div>
  }
}

export default ShowRecordMedicineModal;