// 退药
import React from 'react';
import { Card, Row, Col, Select, Input, Button, DatePicker, Table, message, Modal } from 'antd';
import PubilcTablePagination from './../../common/PubilcTablePagination';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import store from 'store';
import { $http } from 'containers/config/https';
import './style/outpha.less';
import Moment from 'moment';
import ReadCard from 'components/readcard/ReadCard';
import iconListvisits from 'assets/images/icon_listvisits.png';
import iconMessages from 'assets/images/icon_messages.png';

let { Option } = Select;
let buttonStatus = true;

export default class DrugRepercussion extends React.Component {

  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData,
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 20,
      rowId: '', // 选中行标识
      rowData: {}, // 选中行数据
      basicHeight: 0,
      dataSource: [], // 药品列表数据
      barCode: '', // 病人Id/处方号
      detailRowId: '', // 药品信息选中行标识
      selectedRowKeys: [], // 药瓶信息勾选行key值
      selectedRows: [], // 药瓶信息勾选行数据
      statusSelectData: [], // 拉下框数据
      startDate: undefined, // 开始日期
      endDate: undefined, // 结束日期
      fyFlag: undefined, // 状态
      visible: false, // 弹窗状态
      rejectReasonValue: undefined, // 拒绝原因
      defaultValue: '', // 默认卡类型
      cardSlectData: [], // 卡类型下拉框数据
      cardType: undefined, // 卡类型
      cardNo: undefined, // 卡号
      barValue: undefined, // 病人Id/处方号---inputValue
      loading: false,
      columns: [], // 退药表头数据
      widthTotal: 0,
      detailColumns: [], // 药品信息表头数据
      detailWidthTotal: 0,
    };
    this.columns = [
      { title: '性名', dataIndex: 'patName', key: '1', width: '100px', align: "center" },
      { title: '病人ID', dataIndex: 'patNo', key: '2', width: '100px', align: "center" },
      { title: '处方号', dataIndex: 'ordPrescno', key: '28', width: '150px', align: "center" },
      { title: '退药原因', dataIndex: 'reasonDesc', key: '4', width: '150px', align: "center" },
      { title: '发药人', dataIndex: 'dispUserName', key: '3', width: '100px', align: "center" },
      { title: '开单科室', dataIndex: 'ordLocDesc', key: '5', width: '150px', align: "center" },
      { title: '发药日期', dataIndex: 'dispDate', key: '6', width: '100px', align: "center" },
      { title: '发药时间', dataIndex: 'dispTime', key: '7', width: '100px', align: "center" },
    ],
      this.detailColumns = [
        { title: '药品名称', dataIndex: 'medDesc', key: '1', width: '300px', align: "center" },
        {
          title: '退药数量', dataIndex: 'qty', key: '2', width: '100px', align: "center",
          render: (text, record) => (
            <div>
              <Input
                type="number"
                className="input-number input-botder-bottom"
                style={{ width: '60px' }} value={record.qty}
                onClick={this.handleStopPropagation}
                onChange={(e) => this.handleCompileNum(record, e)}
                onBlur={(e) => this.handleCompoleNumBlur(record, e)}
              />{'(' + record.retUnitDesc + ')'}
            </div>
          )
        },
        {
          title: '可退数量', dataIndex: 'lefQty', key: '3', width: '100px', align: "center", render: (text, record) => (
            <div>
              {record.lefQty + '(' + record.lefUnitDesc + ')'}
            </div>
          )
        },
        { title: '最少退药数量', dataIndex: 'eachQty', key: '7', width: '100px', align: "center" },
        {
          title: '已退数量', dataIndex: 'retQty', key: '4', width: '100px', align: "center", render: (text, record) => (
            <div>
              {record.retQty + '(' + record.retUnitDesc + ')'}
            </div>
          )
        },
        {
          title: '发药数量', dataIndex: 'dispQty', key: '5', width: '100px', align: "center", render: (text, record) => (
            <div>
              {record.dispQty + '(' + record.dispUnitDesc + ')'}
            </div>
          )
        },
        { title: '用法用量', dataIndex: 'usageDosage', key: '6', width: '200px', align: "center" },
        { title: '药品批号', dataIndex: 'batNo', key: '8', width: '150px', align: "center" },
      ];
    this.myRef1 = React.createRef();
  }

  componentDidMount() {
    // this.handleQuery();
    this.getSelectData(); // 取类型下拉框数据集
    this.getCardSelectData(); // 获取卡类型下拉框数据
    this.getParameterSetting(); // 取退药参数设置
    this.getDetailTableColumns();
    // 关闭loading
    this.child.handleLoading();
    this.getTableData('','','0','');
    this.setState({ basicHeight: document.getElementById("dr-basic").clientHeight }, () => {
      setTimeout(() => {
        this.myRef1 && this.myRef1.current && this.myRef1.current.focus();
      }, 300)
    })
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 获取数据列表columns
  getMainTableColumns = () => {
    let { userData, fyFlag } = this.state;
    let compontName = "DrugWithdrawal"
    if (fyFlag == 2) {
      compontName = "MallOrderWithdrawal"
    }
    let data = {
      params: [{
        compontName: compontName,
        reactCode: ['DrugWithdrawal'],
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: '01040073',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let arr = res.result.C && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
            return {
              ...item,
              key: index + 1,
              title: <div onDoubleClick={() => this.mainColumnRef.onOpenModel()}>{userData.language == 'EN' ? (item && item.enDescripts ? item.enDescripts : item.title) : item.title}</div>
            }
          }) : '';
          let filterArr = arr.filter(function (item) { return item.display === 'Y' });
          this.setState({
            columns: filterArr, widthTotal: res.totalWidth,
            localeProvider: userData.language == 'EN' ? res.result.language.EN : res.result.language.CN
          })
        }
      }
    })
  }

  onMainColumnRef = (ref) => {
    this.mainColumnRef = ref;
  }

  //国际化
  setMessage = (name, message, defaultTitle) => {
    return this.state.localeProvider && this.state.localeProvider[name] ? this.state.localeProvider[name][message] : defaultTitle
  }

  // 获取药品信息表头数据
  getDetailTableColumns = () => {
    let data = {
      params: [{
        compontName: "DrugWithdrawalInformation",
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: '01040073',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let arr = res.result.C && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
            return {
              ...item,
              key: index + 1,
              title: <div onDoubleClick={() => this.detailColumnRef.onOpenModel()}>{item.title}</div>,
              render: (text, record) => {
                if (item.dataIndex === "qty") {
                  return (<div>
                    <Input
                      type="number"
                      className="input-number input-botder-bottom"
                      style={{ width: '60px' }} value={record.qty}
                      onClick={this.handleStopPropagation}
                      onChange={(e) => this.handleCompileNum(record, e)}
                      onBlur={(e) => this.handleCompoleNumBlur(record, e)}
                    />{'(' + record.retUnitDesc + ')'}
                  </div>)
                } else if (item.dataIndex === "lefQty") {
                  return <div>{record.lefQty + '(' + record.retUnitDesc + ')'}</div>
                } else if (item.dataIndex === "retQty") {
                  return (<div>
                    {record.retQty + '(' + record.retUnitDesc + ')'}
                  </div>)
                } else if (item.dataIndex === "dispQty") {
                  return (<div>
                    {record.dispQty + '(' + record.dispUnitDesc + ')'}
                  </div>)
                } else {
                  return text;
                }
              }
            }
          }) : '';
          let filterArr = arr.filter(function (item) { return item.display === 'Y' });
          this.setState({ detailColumns: filterArr, detailWidthTotal: res.totalWidth })
        }
      }
    })
  }

  onDetailColumnRef = (ref) => {
    this.detailColumnRef = ref;
  }

  // 3.2.1.6.10.取发药 参数设置
  getParameterSetting = () => {
    let data = {
      params: []
    }
    $http.post('urlS', this, {
      code: "02030046",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let parameterSetting = res.result[0];
          this.setState({
            startDate: parameterSetting.startDate ? Moment(parameterSetting.startDate) : Moment(),
            endDate: parameterSetting.endDate ? Moment(parameterSetting.endDate) : Moment(),
          })
        }
      }
    })
  }

  // 3.2.1.6.3.取发药状态下拉框数据集
  getSelectData = () => {
    let data = {
      params: []
    }
    $http.post('urlS', this, {
      code: "02030047",
      data: data,
      success: function (res) {
        let statusSelectData = []
        let fyFlag
        if (+res.errorCode === 0 && res.result) {
          let defaultFyAry = res.result.filter((item) => (item.defaultfyFlag === "Y"))
          if (defaultFyAry.length > 0) { fyFlag = defaultFyAry[0].id }
          else { fyFlag = res.result[0].id }
          statusSelectData = res.result
        }
        this.setState({ statusSelectData: statusSelectData, fyFlag }, () => {
          this.getMainTableColumns();
        })

      }
    })
  }

  // 点击input框时阻止事件冒泡
  handleStopPropagation = (e) => {
    e.stopPropagation();
  }

  getTableData(startDate, endDate, fyFlag, barCode) {
    this.setState({ loading: false });
    let { pageSize, page } = this.state;
    let data = {
      params: [{
        startDate: startDate ? Moment(startDate).format('YYYY-MM-DD') : Moment().format('YYYY-MM-DD'), // 开始日期
        endDate: endDate ? Moment(endDate).format('YYYY-MM-DD') : Moment().format('YYYY-MM-DD'), // 截止日期
        typeID: fyFlag, // 退药标志
        barCode, // 病人ID
      }],
      pagination: [{
        pageSize,
        currentPage: page
      }]
    }
    let code = fyFlag == 2 ? "14010021" : "02030048"
    $http.post('urlS', this, {
      code: code,
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let arr = res.result[0] && res.result[0].rows && res.result[0].rows.length > 0 ? JSON.parse(JSON.stringify(res.result[0].rows)) : [];
          for (var i = 0; i < arr.length; i++) {
            arr[i].key = i + 1
          }
          this.setState({
            rowId: '', dataSource: [], rowData: {}, detailRowId: "", selectedRowKeys: [],
            selectedRows: [], tableData: arr, total: res.result[0].total, loading: false
          }, () => {
            // 数据加载成功关闭loading
            this.child.handleLoading();
          })
        } else {
          this.setState({
            rowId: '', dataSource: [], rowData: {}, detailRowId: "", selectedRowKeys: [],
            selectedRows: [], tableData: [], total: 0, loading: false
          })
          // 数据加载失败关闭loading
          this.child.handleLoading();
        }
      },
      error: function (error) {
        this.setState({ tableData: [], total: 0, loading: false }, () => {
          // 数据加载成功关闭loading
          this.child.handleLoading();
        })
      }
    })
  }

  // 获取表格数据
  handleQuery = () => {
    setTimeout(() => {
      this.setState({ page: 1 }, () => {
        let { startDate, endDate, fyFlag, barCode } = this.state;
        this.getTableData(startDate, endDate, fyFlag, barCode)
      })
    })
  }

  onRef = (ref) => {
    this.child = ref;
  }

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowId === '') {
          // 保存行数据以及ID
          this.setState({ rowId: record.key, rowData: record, detailRowId: "", selectedRowKeys: [], selectedRows: [] }, () => {
            this.getDrugDetailData()
          })
        } else {
          if (this.state.rowId !== record.key) {
            this.setState({ rowId: record.key, rowData: record, detailRowId: "", selectedRowKeys: [], selectedRows: [] }, () => {
              this.getDrugDetailData()
            })
          }
        }
      }
    }
  }

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

  // 3.2.1.7.4.获取可退药明细记录
  getDrugDetailData = () => {
    let { rowData, fyFlag } = this.state;
    let data = {
      params: [{
        reqID: rowData.reqID, // 申请单ID
        dispID: rowData.dispID, // 发药ID
      }]
    }
    let code = fyFlag == 2 ? "14010022" : "02030049"
    $http.post('urlS', this, {
      code: code,
      data: data,
      success: function (res) {
        if (+res.errorCode === 0 && res.result) {
          let arr = res.result[0] && res.result[0].rows && res.result[0].rows.length > 0 ? JSON.parse(JSON.stringify(res.result[0].rows)) : [];
          for (var i = 0; i < arr.length; i++) {
            arr[i].key = i + 1
            arr[i].usageDosage = (arr[i].ordUsageDesc ? arr[i].ordUsageDesc : '') + ' ' + (arr[i].ordFreqDesc ? arr[i].ordFreqDesc : '') + '*' + (arr[i].ordDoseUnitDesc ? arr[i].ordDoseUnitDesc : '')
          }
          this.setState({ dataSource: arr })
        } else {
          this.setState({ dataSource: [] })
        }
      }
    })
  }

  // 药品信息选中行操作
  onClickDetailRow = (record) => {
    return {
      onClick: () => {
        let { selectedRowKeys, selectedRows } = this.state;
        let findFlag = false;
        let start = 0;
        if (selectedRowKeys) {
          selectedRowKeys.find(function (value, key) {
            if (value === record.key) {
              //遍历找到选中的数据，并记录下选中数据在数组中的key
              findFlag = true;
              start = key;
            }
          })
        }
        if (findFlag) {
          //再次点击移除选中
          selectedRowKeys.splice(start, 1);
          selectedRows.splice(start, 1);
        } else {
          //将点击的行添加到选中
          selectedRowKeys.push(record.key);
          selectedRows.push(record);
        }
        if (this.state.detailRowId === "") {
          this.setState({
            detailRowId: record.key,
            selectedRowKeys,
            selectedRows
          });
        } else {
          if (this.state.detailRowId !== record.key) {
            this.setState({
              detailRowId: record.key,
              selectedRowKeys,
              selectedRows
            });
          } else {
            this.setState({
              detailRowId: "",
              selectedRowKeys,
              selectedRows
            });
          }
        }
      }
    }
  }

  // 药瓶信息选中行className
  setDetailRowClassName = (record) => {
    return (("^" + this.state.selectedRowKeys.join("^") + "^").indexOf("^" + record.key + "^") > -1) ? 'clickRowStyle' : '';
  }

  handleCompoleNumBlur = (record, e) => {
    let dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
    let status = false;
    for (var i = 0; i < dataSource.length; i++) {
      if (dataSource[i].key === record.key) {
        if (+e.target.value > record.lefQty || +e.target.value < record.eachQty) {
          status = true;
          dataSource[i].qty = "";
          break;
        } else {
          status = false;
          dataSource[i].qty = e.target.value;
        }
      }
    }
    if (status) {
      message.error(this.setMessage("DrugWithdrawalwithdrawalNumTips", "descripts", "退药数量不能大于可退数量并且不能小于最少退药数量"))
    }
    this.setState({ dataSource })
  }

  // 修改药品信息--退药数量
  handleCompileNum = (record, e) => {
    let dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
    for (var i = 0; i < dataSource.length; i++) {
      if (dataSource[i].dispDetID === record.dispDetID) {
        dataSource[i].qty = e.target.value;
        break;
      }
    }
    this.setState({ dataSource })
  }

  // 病人id/处方号
  handlePatientOnChange = (e) => {
    this.setState({ barValue: e.target.value, barCode: e.target.value })
  }

  // 退药
  handleDrugWithdrawal = () => {
    // 如果行数据存在退药原因ID则直接退药。不存在则需要选择
    if (this.state.rowData.reasonID) {
      this.handleOk();
    } else {
      this.setState({ visible: true }, () => {
        this.getRejectReasonSelectData(); // 获取拒绝原因下拉框数据
      })
    }
  }

  // 查询条件 --- 开始日期
  handleStartDate = (e) => {
    this.setState({ startDate: e });
  }

  // 查询条件 --- 截止日期
  handleEndDate = (e) => {
    this.setState({ endDate: e });
  }

  // 查询条件 --- 审核状态
  handlestatusID = (e) => {
    this.setState({ fyFlag: e }, () => {
      this.getMainTableColumns();
    });
  }

  // 病人ID或处方号回车事件
  handleOnPressEnter = (e) => {
    if (!e.target.value) {
      return;
    }
    this.setState({ barCode: e.target.value, cardNo: undefined, cardType: this.state.defaultValue }, () => {
      this.handleQuery(); // 重新调用查询接口
    })
  }

  // 提供修改page和pageSize的回调函数
  compilePage(page, pageSize) {
    // 修改page，或者pageSize
    this.setState({ page: page, pageSize: pageSize }, () => {
      // 重新调用查询方法
      let { startDate, endDate, fyFlag, barCode } = this.state;
      this.getTableData(startDate, endDate, fyFlag, barCode)
    })
  }

  // 获取拒绝原因下拉框数据
  getRejectReasonSelectData = () => {
    let data = {
      params: [{}]
    }
    $http.post('urlS', this, {
      code: "02030051",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ rejectReasonSelectData: res.result })
        }
      }
    })
  }

  // 拒绝原因下拉框
  handleRejectReasonValue = (e) => {
    this.setState({ rejectReasonValue: e })
  }

  // 关闭
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  }

  // 确定
  handleOk = () => {
    let { rowData, dataSource, rejectReasonValue, selectedRows, fyFlag } = this.state;
    let arr = [];
    let status = false;
    for (var i = 0; i < dataSource.length; i++) {
      for (var j = 0; j < selectedRows.length; j++) {
        if (dataSource[i].key === selectedRows[j].key) {
          arr.push(dataSource[i])
        }
      }
    }
    for (var i = 0; i < arr.length; i++) {// 遍历勾选的药品是否符合退药标准
      if (arr[i].qty > arr[i].lefQty || arr[i].qty < arr[i].eachQty) {
        status = true;
        break;
      } else {
        status = false;
      }
    }
    if (status) {
      message.error(this.setMessage("DrugWithdrawalwithdrawalNumTips", "descripts", "退药数量不能大于可退数量并且不能小于最少退药数量"));
      this.handleCancel();
      return;
    }
    let data = {
      params: [{
        reqID: rowData.reqID, // 申请单ID
        dispID: rowData.dispID, // 发药ID
        reasonID: rowData.reasonID ? rowData.reasonID : rejectReasonValue, // 退药原因ID
        retDetail: arr, // 退药明细
      }]
    }
    let code = fyFlag == 2 ? "14010023" : "02030050"
    $http.post('urlS', this, {
      code: code,
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          message.success(res.errorMessage);
          this.setState({ visible: false }, () => {
            this.handleQuery();
          })
        }
      }
    })
  }

  // 获取卡类型下拉框数据
  getCardSelectData = () => {
    let data = {
      params: [{}]
    }
    $http.post('urlS', this, {
      code: '02030052',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let defaultValue = '';
          for (var i = 0; i < res.result.length; i++) {
            if (res.result[i].defaultFlag === 'Y') {
              defaultValue = res.result[i].id;
            }
          }
          this.setState({ cardSlectData: res.result, cardType: defaultValue, defaultValue: defaultValue })
        }
      }
    })
  }

  // 3.2.1.3.13.根据卡号取病人信息
  getPatientInformation = (name) => {
    let data = {
      params: [{
        number: '', // 病人登记号/证件号
        cardTypeID: this.state.cardType, // 卡类型id
        cardNo: this.state.cardNo, // 卡号
      }]
    }
    setTimeout(() => {
      buttonStatus = true;
    }, 500)
    $http.post('urlS', this, {
      code: '03040004',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ barCode: res.data && res.data.patNo ? res.data.patNo : '' }, () => {
            if (name === 'enter') {
              this.setState({ page: 1, pageSize: 10, }, () => {
                let { startDate, endDate, fyFlag, barCode } = this.state;
                this.getTableData(startDate, endDate, fyFlag, barCode)
              })
            }
          })
        } else if (res.errorFlag === 'N') {
          this.setState({ page: 1, pageSize: 10, rowId: '', dataSource: [], rowData: {}, detailRowId: "", selectedRowKeys: [], selectedRows: [], barCode: 'aaaaa', tableData: [] })
          message.error(res.errorMessage)
        }
      }
    })
  }

  // 卡类型
  handleCardNoChange = (e) => {
    this.setState({ cardNo: e.target.value })
  }

  // 卡号
  handleCardTypeOnChange = (e) => {
    this.setState({ cardType: e })
  }

  // 读卡
  handleReadCard = () => {
    if (!buttonStatus) {
      return;
    }
    let { cardType } = this.state;
    this.readCard.ReadCard(cardType, "R", (json) => {
      this.setState({ barCode: json && json.patInfo ? json.patInfo.patID : 'aaaaa', cardNo: json.cardNo }, () => {
        this.handleQuery(); // 重新调用查询接口
      })
    })
  }

  // 卡号回车事件
  handleReadCardOnBlur = (e, name) => {
    if (!e.target.value) {
      this.setState({ barCode: '' })
      return;
    }
    if (name === 'blur') {
      buttonStatus = false
    }
    this.setState({ barValue: undefined }, () => {
      this.getPatientInformation(name);
    })
  }

  render() {
    let { barValue, basicHeight, dataSource, tableData, total, page, selectedRowKeys, selectedRows,
      startDate, endDate, statusSelectData, fyFlag, rejectReasonValue, rejectReasonSelectData, loading, columns, widthTotal, detailColumns,
      detailWidthTotal,
    } = this.state;
    // 组件所需参数
    const param = {
      // 表头配置
      columns: columns && columns.length > 0 ? columns : this.columns,
      // 表格数据
      data: tableData,
      // 数据总条数
      total: total,
      // 当前页数
      page: page,
      // 表格的宽度
      x: columns && columns.length > 0 ? widthTotal : 950,
      y: store.getState().tableHeight.y + 90 - basicHeight,
      height: store.getState().tableHeight.y + 136 - basicHeight + 'px',
      isOnRow: true,
      rowClassName: true,
      TableClassName: 'table-scroll-height',
      loading,
      pageSize: "20"
    };

    const rowSelection = {
      selectedRowKeys,
      selectedRows,
      onChange: (selectedRowKeys, selectedRows) => {
        let detailRowId = "";
        if (selectedRowKeys.length !== 0) {
          detailRowId = selectedRowKeys[selectedRowKeys.length - 1];
        }
        this.setState({ selectedRowKeys, selectedRows, detailRowId })
      }
    };

    // 退药状态
    let refundMedicineState = statusSelectData && statusSelectData.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    // 卡类型
    let cardTypeOption = this.state.cardSlectData && this.state.cardSlectData.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })

    // 拒绝原因
    let rejectReasonSelect = rejectReasonSelectData && rejectReasonSelectData.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })

    return (
      <div className="drug-repercussion">
        <Row id="dr-basic" style={{ padding: '0 24px' }}>
          <Col span={20}>
            <Row style={{ marginBottom: '20px' }}>
              <Select value={this.state.cardType} onChange={this.handleCardTypeOnChange} showSearch optionFilterProp="seatchprop" allowClear placeholder={this.setMessage("DrugWithdrawalperHealthCard", "descripts", "居民健康卡")} style={{ width: '109px', margin: '22px 10px 0 0' }}>
                {cardTypeOption}
              </Select>
              <Input value={this.state.cardNo} onChange={this.handleCardNoChange} onBlur={(e) => this.handleReadCardOnBlur(e, 'blur')} onPressEnter={(e) => this.handleReadCardOnBlur(e, 'enter')} placeholder={this.setMessage("DrugWithdrawalcardNumTips", "descripts", "请输入卡号(Enter)")} style={{ width: '142px', marginTop: '22px' }} />
              <Button style={{ margin: '0 10px', background: '#007AFF', color: '#fff' }} onClick={this.handleReadCard}>{this.setMessage("DrugWithdrawalCardReading", "descripts", "读卡")}</Button>
              <Input
                placeholder={this.setMessage("DrugWithdrawalpatID/preNum", "descripts", "病人ID/处方号(Enter)")}
                style={{ width: '160px', margin: '22px 10px 0 0' }}
                ref={this.myRef1}
                value={barValue}
                onChange={this.handlePatientOnChange}
                onBlur={this.handleOnPressEnter}
                onPressEnter={this.handleOnPressEnter}
              />
              <div style={{ display: 'inline-block' }}>
                <span className="d-form-label">{this.setMessage("DrugWithdrawalchargeDate", "descripts", "收费日期")}</span>
                <DatePicker
                  className="d-start-date"
                  value={startDate}
                  onChange={this.handleStartDate}
                  style={{ width: '125px', marginTop: '8px' }}
                  placeholder={this.setMessage("DrugWithdrawalstartDate", "descripts", "开始日期")} />
                <span className="d-form-label form-label-date">{this.setMessage("DrugWithdrawalReach", "descripts", "到")}</span>
                <DatePicker
                  className="d-end-date"
                  value={endDate}
                  onChange={this.handleEndDate}
                  style={{ width: '125px', marginTop: '8px' }}
                  placeholder={this.setMessage("DrugWithdrawaldeadline", "descripts", "结束日期")}
                />
                <Select value={fyFlag} onChange={this.handlestatusID} showSearch optionFilterProp="seatchprop" allowClear placeholder={this.setMessage("DrugWithdrawalstate", "descripts", "状态")} style={{ width: '125px', margin: '8px 10px 0 10px' }}>
                  {refundMedicineState}
                </Select>
                <Button type="primary" style={{ marginTop: '8px' }} onClick={this.handleQuery}>{this.setMessage("DrugWithdrawalsearch", "descripts", "查询")}</Button>
              </div>
            </Row>
          </Col>
          <Col span={4} style={{ textAlign: 'right' }}>
            <Button
              onClick={this.handleDrugWithdrawal}
              type="danger"
              style={{ marginTop: '22px', minWidth: '100px' }}
              disabled={selectedRows && selectedRows.length < 1}
              ghost
            >
              {this.setMessage("DrugWithdrawalwithdrawal", "descripts", "退药")}
            </Button>
          </Col>
        </Row>
        <div style={{ height: '6px', background: 'rgba(240, 242, 245, 1)', width: '100%' }}></div>
        <Row>
          <Col span={12}>
            <Card
              size="small"
              title={<div className="card-title-left-img"><img src={iconListvisits} alt="" />{this.setMessage("DrugWithdrawalwithdrawalList", "descripts", "退药列表")}</div>}
            >
              <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} onClickRowPublic={this.onClickRowPublic} setRowClassNamePublic={this.setRowClassNamePublic} />
            </Card>
          </Col>
          <Col span={12}>
            <div style={{ paddingLeft: '6px', position: 'relative' }}>
              <Card
                size="small"
                title={<div className="card-title-left-img"><img src={iconMessages} alt="" />{this.setMessage("DrugWithdrawaldrugInfo", "descripts", "药品信息")}</div>}
              >
                <div style={{ height: store.getState().tableHeight.y + 174 - basicHeight + 'px', overflow: 'auto' }}>
                  <Table
                    bordered
                    pagination={false}
                    dataSource={dataSource}
                    columns={detailColumns && detailColumns.length > 0 ? detailColumns : this.detailColumns}
                    rowSelection={rowSelection}
                    onRow={this.onClickDetailRow}
                    rowClassName={this.setDetailRowClassName}
                    scroll={{ x: detailColumns && detailColumns.length > 0 ? detailWidthTotal : 1250, y: store.getState().tableHeight.y + 90 - basicHeight, }}
                    className="clearBackground table-scroll-height"
                    style={{ height: store.getState().tableHeight.y + 136 - basicHeight + 'px' }}
                  />
                </div>
              </Card>
              <div style={{ width: '6px', background: 'rgba(240, 242, 245, 1)', position: 'absolute', top: 0, left: 0, height: '100%' }}></div>
            </div>
          </Col>
        </Row>
        <Modal
          title={<div><div className="modal-title-top"></div>{this.setMessage("DrugWithdrawalselectCause", "descripts", "选择退药原因")}</div>}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onOk={this.handleOk}
          className="modal-header-line"
        >
          <div style={{ minHeight: '100px' }}>
            {this.setMessage("DrugWithdrawalcause", "descripts", "退药原因")}：<Select style={{ width: '200px' }} showSearch optionFilterProp="seatchprop" allowClear value={rejectReasonValue} onChange={this.handleRejectReasonValue}>
              {rejectReasonSelect}
            </Select>
          </div>
        </Modal>
        <ReadCard ref={r => this.readCard = r} />
        <ColumnAuthoritysModel
          clientWidth='800px'
          compontName='DrugWithdrawal'
          configType="C"
          onRef={this.onMainColumnRef}
          reloadData={this.getMainTableColumns}
        />
        <ColumnAuthoritysModel
          clientWidth='800px'
          compontName='DrugWithdrawalInformation'
          configType="C"
          onRef={this.onDetailColumnRef}
          reloadData={this.getDetailTableColumns}
        />
      </div>
    )
  }
}