// 退药
import React from 'react';
import { Card, Row, Col, DatePicker, Button, Input, Table, Select, Tabs, message, Icon } from 'antd';
import { $loopPrint } from '../lodop/Common/Print';
import store from 'store';
import { $http } from 'containers/config/https';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import Moment from 'moment';
import './style/index.less';

let { Option } = Select;
const { TabPane } = Tabs;

export default class HPDrugWithdrawal extends React.Component {
    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            pharmacy: userData.locID, // 药房
            startDate: Moment(), // 开始日期 
            endDate: Moment(), // 结束日期
            patNoOrName: undefined, // 退药单号、患者姓名
            registerNum: undefined, // 登记号、姓名
            basicHeight: 0,
            drugApplyLoading: false,
            rugApplyColumns: [], // 退药申请表头数据
            drugApplyTableData: [], // 退药申请列表数据
            drugApplyRowId: '', // 退药申请选中行ID
            activeTabPaneKey: '1', // 当前激活的面板
            drugDetailColumns: [], // 退药明细表头数据
            drugDetailTableData: [], // 退药明细列表数据
            selectedRows: [], // 退药明细选中行数据
            selectedRowKeys: [], // 退药明细选中行key
            drugDetailRowId: '', // 退药明细选中行ID
            selectData: {}, // 下拉框数据
            refundMedicineDirectlyRowId: '', //直接退药选中行ID
            refundMedicineDirectlyRowData: {},
            refundMedicineDirectlyColumns: [], // 直接退药表头数据
            refundMedicineDirectlyTableWidth: 0,
            refundMedicineDirectlyTableData: [], // 直接退药列表数据
            wardAndPatientColumns: [], //表头数据
            wardAndPatientTableWidth: '', //表头长度
            parameterCode: '',
            detailWidthTotal: '',
            letfColumns: [], //左边表头数据,
            stateID: undefined, // 退药状态
            drugApplyRowData: {}, // 退药申请选中行数据
            refundMedicineDirectlyLoading: false
        }
    }

    componentDidMount() {
        this.getDrugApplyColumns();
        this.getDrugApplyTableData();
        this.getSelectData();
        this.getWardAndPatientColumns();
        this.getDetailTableColumns();
        this.setState({ basicHeight: document.getElementById("refund-medicine-ward").clientHeight })
    }

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

    // 取发药下拉框数据集
    getSelectData = () => {
        let data = {
            params: []
        }
        $http.post('urlS', this, {
            code: "02040036",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ selectData: res }, () => {
                        this.getDrugDetailColumns();
                    })
                }
            }
        })
    }

    // 切换医嘱查询页签
    toggleTabPane = key => {
        this.setState({ activeTabPaneKey: key }, () => {
            if (this.state.activeTabPaneKey === '1') {
                this.getDrugApplyTableData();
            } else if (this.state.activeTabPaneKey === '2') {
                if (!(this.state.refundMedicineDirectlyColumns && this.state.refundMedicineDirectlyColumns.length > 0)) {
                    this.getRefundMedicineDirectlyColumns();
                }
                this.getRefundMedicineDirectlyTableData();
            }
            this.getDrugDetailColumns();
            this.filterWardAndPatientColumns();
        })
    }

    // 药房查询条件
    handlePharmacyOnChange = e => {
        this.setState({ pharmacy: e })
    }

    // 开始日期
    handleStartDate = e => {
        this.setState({ startDate: e })
    }

    // 结束日期
    handleEndDate = e => {
        this.setState({ endDate: e })
    }

    // 查询
    handleQuery = () => {
        let { activeTabPaneKey } = this.state;
        if (activeTabPaneKey === '1') {
            this.getDrugApplyTableData(); // 退药申请
        } else if (activeTabPaneKey === '2') {
            this.getRefundMedicineDirectlyTableData(); //直接退药
        }
    }

    // 重置列表数据
    handleReset = () => {
        let { activeTabPaneKey } = this.state;
        if (activeTabPaneKey === '1') {
            this.setState({ drugApplyRowId: '' });
        } else if (activeTabPaneKey === '2') {
            this.setState({ refundMedicineDirectlyRowId: '', refundMedicineDirectlyRowData: {} });
        }
        this.setState({ selectedRows: [], selectedRowKeys: [], drugDetailRowId: '', drugDetailTableData: [] })
    }

    // 获取退药申请表头数据
    getDrugApplyColumns = () => {
        let data = [
            {
                title: '退药申请单号',
                dataIndex: 'inReqNO',
                width: '200px',
                align: "center",
            },
            {
                title: '患者',
                dataIndex: 'patName',
                width: '100px',
                align: "center"
            },
            {
                title: '病人登记号',
                dataIndex: 'patNo',
                width: '100px',
                align: "center"
            },
            {
                title: '床号',
                dataIndex: 'bedNo',
                width: '100px',
                align: "center",
            },
            {
                title: '申请科室',
                dataIndex: 'recLocDesc',
                width: '150px',
                align: "center"
            },
            {
                title: '状态',
                dataIndex: 'stateDesc',
                width: '80px',
                align: "center"
            },
        ]
        this.setState({ drugApplyColumns: data })
    }

    // 获取退药申请列表数据
    getDrugApplyTableData = () => {
        let { startDate, endDate, patNoOrName, pharmacy, stateID } = this.state;
        this.setState({ drugApplyLoading: true });
        let data = {
            params: [{
                startDate: startDate ? Moment(startDate).format('YYYY-MM-DD') : "", // 开始日期
                endDate: endDate ? Moment(endDate).format('YYYY-MM-DD') : "", // 截止日期
                patNoOrName, // 姓名或登记号
                stateID, // 状态ID
                recLocID: pharmacy
            }]
        }
        $http.post('urlS', this, {
            code: "02040042",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    for (var i = 0; i < res.rows.length; i++) {
                        res.rows[i].key = i
                    }
                    this.setState({ drugApplyTableData: res.rows, drugApplyLoading: false });
                    this.handleReset();
                } else {
                    this.setState({ drugApplyLoading: false });
                }
            },
            error: function () {
                this.setState({ drugApplyLoading: false });
            }
        })
    }

    // 退药申请选中行操作
    handleDrugApplyOnRow = (record) => {
        return {
            // 单击行选中
            onClick: () => {
                if (this.state.drugApplyRowId === '') {
                    // 保存行数据以及ID
                    this.setState({ drugApplyRowId: record.inReqID, drugApplyRowData: record, selectedRows: [], selectedRowKeys: [] }, () => {
                        this.getDrugDetailTableData();
                    });
                } else {
                    if (this.state.drugApplyRowId !== record.inReqID) {
                        this.setState({ drugApplyRowId: record.inReqID, drugApplyRowData: record, selectedRows: [], selectedRowKeys: [] }, () => {
                            this.getDrugDetailTableData();
                        });
                    }
                }
            }
        }
    }

    handleDrugApplyRowClassName = (record) => {
        return record.inReqID === this.state.drugApplyRowId ? 'clickRowStyle' : '';
    }

    // 请求退药数量/退药原因
    handleCompileInputBox = (record, e, flag) => {
        let { activeTabPaneKey } = this.state;
        let drugDetailTableData = JSON.parse(JSON.stringify(this.state.drugDetailTableData));
        for (let i = 0; i < drugDetailTableData.length; i++) {
            if (activeTabPaneKey === '1') { // 当为退药申请时
                if (drugDetailTableData[i].inReqBatID === record.inReqBatID) {
                    drugDetailTableData[i].retQty = e.target.value;
                    break;
                }
            } else if (activeTabPaneKey === '2') { // 当为直接退药时
                if (drugDetailTableData[i].inDispBatID === record.inDispBatID) {
                    if (flag === 'retQty') {
                        drugDetailTableData[i].retQty = e.target.value;
                    } else if (flag === 'reqReasonID') {
                        drugDetailTableData[i].reqReasonID = e;
                        break;
                    }
                }
            }
        }
        this.setState({ drugDetailTableData })
    }

    /**打印住院退药
    */
    print = (rowId) => {
        const data = {
            params: [{ retID: rowId }]
        };
        $http.post('urlS', this, {
            code: "02040068",
            data: data,
            success: function (res) {
                // console.log(res)
                if (+res.errorCode === 0) {
                    $loopPrint('', res.result);
                } else {
                    message.error(res.errorMessage);
                }
            }
        })
    }
    // 获取退药明细表头数据
    getDrugDetailColumns = () => {
        let { selectData, activeTabPaneKey } = this.state;
        let reasonOption = selectData && selectData.reason && selectData.reason.length > 0 ? selectData.reason.map((item, index) => {
            return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        }) : '';
        let data = [
            {
                title: '发药数量',
                dataIndex: 'dispQty',
                width: '100px',
                align: "center",
            },
            {
                title: activeTabPaneKey === '2' ? '患者' : '请求数量',
                dataIndex: activeTabPaneKey === '2' ? 'patName' : 'reqQty',
                width: '100px',
                align: "center",
            },
            {
                title: '退药数量',
                dataIndex: 'retQty',
                width: '100px',
                align: "center",
                render: (text, record) => (
                    <Input placeholder="请输入" style={{ width: '90%' }} value={record.retQty} onChange={(e) => this.handleCompileInputBox(record, e, 'retQty')} />
                )
            },
            {
                title: '退药原因',
                dataIndex: 'reqReasonID',
                width: '100px',
                align: "center",
                render: (text, record) => (
                    <div>
                        {activeTabPaneKey === '2' ? <Select placeholder="请选择" style={{ width: '90%' }} value={record.reqReasonID} onChange={(e) => this.handleCompileInputBox(record, e, 'reqReasonID')}>
                            {reasonOption}
                        </Select> : record.reqReasonDesc}
                    </div>
                )
            },
            {
                title: '药品名称',
                dataIndex: 'stockDesc',
                width: '250px',
                align: "center"
            },
            {
                title: '剂型',
                dataIndex: 'formDesc',
                width: '100px',
                align: "center",
            },
            {
                title: '规格',
                dataIndex: 'stockSpec',
                width: '100px',
                align: "center"
            },
            {
                title: '用药时间',
                dataIndex: 'reqExecTime',
                width: '100px',
                align: "center"
            },
        ];
        this.setState({ drugDetailColumns: data });
    }

    // 获取表头数据
    getWardAndPatientColumns = () => {
        let data = {
            params: [{
                compontName: "HPDrugWithdrawal",
                type: 'C'
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let arr = res.result?.C || [];
                    let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                    this.setState({ wardAndPatientColumns: filterArr, wardAndPatientTableWidth: res.totalWidth }, () => {
                        this.filterWardAndPatientColumns();
                    })
                }
            }
        })
    }

    filterWardAndPatientColumns = () => {
        let { selectData, activeTabPaneKey, wardAndPatientColumns } = this.state;
        let reasonOption = selectData && selectData.reason && selectData.reason.length > 0 ? selectData.reason.map((item, index) => {
            return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        }) : '';
        let arr = wardAndPatientColumns && wardAndPatientColumns.length > 0 ? JSON.parse(JSON.stringify(wardAndPatientColumns)).map((item, index) => {
            return {
                ...item,
                key: index + 1,
                title: activeTabPaneKey !== '2' && item.code == 'patName' ? <div onDoubleClick={() => {
                    this.setState({ parameterCode: 'HPDrugWithdrawal' }, () => {
                        this.columnRef.onOpenModel();
                    })
                }}>请求数量</div> : <div onDoubleClick={() => {
                    this.setState({ parameterCode: 'HPDrugWithdrawal' }, () => {
                        this.columnRef.onOpenModel();
                    })
                }}>{item.descripts}</div>,
                render: (text, record) => (
                    <span>
                        {activeTabPaneKey !== '2' && item.code == 'patName' ?
                            record.reqQty
                            :
                            item.code == 'retQty' ?
                                <Input type="number" className="input-number" placeholder="请输入" style={{ width: '90%' }} value={record.retQty} onChange={(e) => this.handleCompileInputBox(record, e, 'retQty')} />
                                :
                                activeTabPaneKey == '2' && item.code == 'reqReasonID' ?
                                    <Select placeholder="请选择" style={{ width: '90%' }} value={record.reqReasonID} onChange={(e) => this.handleCompileInputBox(record, e, 'reqReasonID')}>
                                        {reasonOption}
                                    </Select> : activeTabPaneKey !== '2' && item.code == 'reqReasonID' ? record.reqReasonDesc
                                        : text
                        }
                    </span>
                )
            }
        }) : '';
        this.setState({ wardAndPatientColumns: arr });
    }

    // 获取左边表头数据
    getDetailTableColumns = () => {
        let data = {
            params: [{
                compontName: 'HPDrugWithdrawalLeft',
                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.setState({ parameterCode: 'HPDrugWithdrawalLeft' }, () => {
                                    this.columnRef.onOpenModel();
                                })
                            }}>{item.title}</div>
                        }
                    }) : '';
                    let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                    this.setState({ letfColumns: filterArr, detailWidthTotal: res.totalWidth })
                }
            }
        })
    };

    // 获取退药明细列表数据
    getDrugDetailTableData = () => {
        let { activeTabPaneKey, drugApplyRowId, refundMedicineDirectlyRowData } = this.state;
        let data = {};
        let code = '';
        if (activeTabPaneKey === '1') {
            data = {
                params: [{
                    inReqID: drugApplyRowId
                }]
            }
            code = '02040033'
        } else if (activeTabPaneKey === '2') {
            data = {
                params: [{
                    inDispBat: refundMedicineDirectlyRowData.inDispBat
                }]
            }
            code = '02040039'
        }
        $http.post('urlS', this, {
            code,
            data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    for (var i = 0; i < res.rows.length; i++) {
                        res.rows[i].key = i
                        res.rows[i].hasRet = res.rows[i].hasRet ? res.rows[i].hasRet : 0
                    }
                    this.setState({ drugDetailTableData: res.rows });
                }
            }
        })

    }

    // 退药明细选中行操作
    handledrugDetailOnRow = (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.drugDetailRowId === "") {
                    this.setState({
                        drugDetailRowId: record.key,
                        selectedRowKeys,
                        selectedRows
                    });
                } else {
                    if (this.state.drugDetailRowId !== record.key) {
                        this.setState({
                            drugDetailRowId: record.key,
                            selectedRowKeys,
                            selectedRows
                        });
                    } else {
                        this.setState({
                            drugDetailRowId: "",
                            selectedRowKeys,
                            selectedRows
                        });
                    }
                }
            }
        }
    }

    handledrugDetailRowClassName = (record) => {
        return (("^" + this.state.selectedRowKeys.join("^") + "^").indexOf("^" + record.key + "^") > -1) ? 'clickRowStyle' : '';
    }

    // 获取直接退药表头数据 HP_DirectWithdrawal
    getRefundMedicineDirectlyColumns = () => {
        let data = {
            params: [{
                compontName: 'HP_DirectWithdrawal',
                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.setState({ parameterCode: 'HP_DirectWithdrawal' }, () => {
                                    this.columnRef.onOpenModel();
                                })
                            }}>{item.title}</div>
                        }
                    }) : '';
                    let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                    this.setState({ refundMedicineDirectlyColumns: filterArr, refundMedicineDirectlyTableWidth: res.totalWidth }, () => {
                        if (!(this.state.refundMedicineDirectlyColumns && this.state.refundMedicineDirectlyColumns.length > 0)) {
                            let data = [
                                {
                                    title: '病人登记号',
                                    dataIndex: 'patNo',
                                    width: '100px',
                                    align: "center",
                                },
                                {
                                    title: '病人姓名',
                                    dataIndex: 'patName',
                                    width: '80px',
                                    align: "center"
                                },
                                {
                                    title: '床号',
                                    dataIndex: 'bedNo',
                                    width: '80px',
                                    align: "center"
                                },
                            ];
                            this.setState({ refundMedicineDirectlyColumns: data, refundMedicineDirectlyTableWidth: '260px' })
                        }
                    })
                }
            }
        })
    }

    // 获取直接退药列表数据
    getRefundMedicineDirectlyTableData = () => {
        let { startDate, endDate, pharmacy, registerNum } = this.state;
        this.setState({ refundMedicineDirectlyLoading: true });
        let data = {
            params: [{
                startDate: startDate ? Moment(startDate).format('YYYY-MM-DD') : "", // 开始日期
                endDate: endDate ? Moment(endDate).format('YYYY-MM-DD') : "", // 截止日期
                recLocID: pharmacy, // 药房科室ID
                patNameOrNO: registerNum, // 病人姓名或登记号
            }],
            pagination: [{
                pageSize: 10000,
                currentPage: 1
            }]
        }
        $http.post('urlS', this, {
            code: "02040038",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    for (var i = 0; i < res.rows.length; i++) {
                        res.rows[i].key = i
                    }
                    this.setState({ refundMedicineDirectlyTableData: res.rows, refundMedicineDirectlyLoading: false });
                    this.handleReset();
                } else {
                    this.setState({ refundMedicineDirectlyLoading: false });
                }
            },
            error: function () {
                this.setState({ refundMedicineDirectlyLoading: false });
            }
        })
    }

    // 直接退药列表行操作
    handkeRefundMedicineDirectlyOnRow = (record) => {
        return {
            // 单击行选中
            onClick: () => {
                if (this.state.refundMedicineDirectlyRowId === '') {
                    // 保存行数据以及ID
                    this.setState({ refundMedicineDirectlyRowId: record.key, refundMedicineDirectlyRowData: record }, () => {
                        this.getDrugDetailTableData();
                    })
                } else {
                    if (this.state.refundMedicineDirectlyRowId !== record.key) {
                        this.setState({ refundMedicineDirectlyRowId: record.key, refundMedicineDirectlyRowData: record }, () => {
                            this.getDrugDetailTableData();
                        })
                    }
                }
            }
        }
    }

    handkeRefundMedicineDirectlyRowClassName = (record) => {
        return record.key === this.state.refundMedicineDirectlyRowId ? 'clickRowStyle' : '';
    }

    // 退药
    handleHPDrug = () => {
        let { activeTabPaneKey } = this.state;
        if (activeTabPaneKey === '1') {
            // 退药申请
            this.refundMedicineApplication();
        } else if (activeTabPaneKey === '2') {
            // 直接退药
            this.refundMedicineDirectly();
        }
    }

    // 退药申请
    refundMedicineApplication = () => {
        let { drugDetailTableData, selectedRowKeys } = this.state;
        let arr = [];
        for (var i = 0; i < selectedRowKeys.length; i++) {
            arr.push(drugDetailTableData[selectedRowKeys[i]])
        }
        arr = arr.map((item) => {
            return {
                inReqBatID: item.inReqBatID,
                retQty: item.retQty,
            }
        })
        for (var i = 0; i < arr.length; i++) {
            if (!(arr[i].retQty)) {
                message.error("请输入需要保存药品明细的退药数量");
                return;
            }
        }
        let data = {
            params: arr
        }
        $http.post('urlS', this, {
            code: "02040037",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success("退药成功");
                    this.handleQuery();
                    res.inRetIDArr.map((item, index) => {
                        var inRetID = item;
                        this.print(inRetID)
                    })
                }
            }
        })
    }

    // 直接退药
    refundMedicineDirectly = () => {
        let { drugDetailTableData, selectedRowKeys } = this.state;
        let arr = [];
        for (var i = 0; i < selectedRowKeys.length; i++) {
            arr.push(drugDetailTableData[selectedRowKeys[i]])
        }
        arr = arr.map((item) => {
            return {
                inDispBatID: item.inDispBatID, // 发药批次明细ID
                retQty: item.retQty, // 退药数量
                retReasonID: item.reqReasonID, // 退药原因ID
            }
        })
        for (var i = 0; i < arr.length; i++) {
            if (!(arr[i].retQty)) {
                message.error("请输入需要保存药品明细的退药数量");
                return;
            } else if (!(arr[i].retReasonID)) {
                message.error("请选择需要保存药品明细的退药原因");
                return;
            }
        }
        let data = {
            params: arr
        }
        $http.post('urlS', this, {
            code: "02040040",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success("退药成功");
                    this.handleQuery();
                    res.inRetIDArr.map((item, index) => {
                        var inRetID = item;
                        this.print(inRetID)
                    })

                }
            }
        })
    }

    // 退药单号、患者姓名
    handlePatNameOrNO = (e) => {
        this.setState({ patNameOrNO: e.target.value })
    }

    // 登记号或姓名
    handleRegisterNumOnchange = e => {
        this.setState({ registerNum: e.target.value })
    }
    onColumnRef = (ref) => {
        this.columnRef = ref;
    }

    // 退药状态
    handleStateChange = e => {
        this.setState({ stateID: e })
    }

    render() {
        let { pharmacy, startDate, endDate, basicHeight, drugApplyColumns, drugApplyTableData, activeTabPaneKey, selectedRows, selectedRowKeys, drugApplyLoading, refundMedicineDirectlyLoading,
            drugDetailColumns, drugDetailTableData, selectData, refundMedicineDirectlyColumns, refundMedicineDirectlyTableData, patNameOrNO, registerNum, wardAndPatientColumns, wardAndPatientTableWidth,
            detailWidthTotal, letfColumns, stateID, drugApplyRowData, refundMedicineDirectlyTableWidth } = this.state;
        const drugDetailRowSelection = {
            selectedRowKeys,
            selectedRows,
            onChange: (selectedRowKeys, selectedRows) => {
                // console.log(selectedRowKeys, selectedRows)
                let rowId = "";
                if (selectedRowKeys.length !== 0) {
                    rowId = selectedRowKeys[selectedRowKeys.length - 1];
                }
                this.setState({ selectedRows, selectedRowKeys, drugDetailRowId: rowId })
            }
        };

        // 药房
        let pharmacyOption = selectData.recLoc && selectData.recLoc.map((item, index) => {
            return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        })
        let statusOption = selectData && selectData.status && selectData.status.length > 0 ? selectData.status.map((item, index) => {
            return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        }) : ''
        return (
            <div className="hospital-pharmacies">
                <Row id="refund-medicine-ward" style={{ padding: '0 24px' }}>
                    <Col span={20}>
                        <div style={{ marginBottom: '8px' }}>
                            药房：<Select value={pharmacy} onChange={this.handlePharmacyOnChange} showSearch optionFilterProp="seatchprop" placeholder="请选择" style={{ width: '150px', margin: '8px 15px 0 0' }}>
                                {pharmacyOption}
                            </Select>
                            <DatePicker
                                value={startDate}
                                onChange={this.handleStartDate}
                                style={{ width: '150px', marginTop: '8px' }}
                                placeholder="开始日期"
                                allowClear={false}
                            />
                            <span style={{ display: 'inline-block', margin: '0 5px' }}>到</span>
                            <DatePicker
                                value={endDate}
                                onChange={this.handleEndDate}
                                style={{ width: '150px', marginRight: '8px' }}
                                placeholder="结束日期"
                                allowClear={false}
                            />
                            退药状态：<Select value={stateID} allowClear onChange={this.handleStateChange} showSearch optionFilterProp="seatchprop" placeholder="请选择" style={{ width: '130px', marginRight: '15px' }}>
                                {statusOption}
                            </Select>
                            <Button style={{ marginTop: '8px' }} onClick={this.handleQuery}>查询</Button>
                        </div>
                    </Col>
                    <Col span={4} style={{ textAlign: 'right' }}>
                        <Button
                            type="primary"
                            style={{ marginTop: '8px', width: '100px' }}
                            onClick={this.handleHPDrug}
                            disabled={!(selectedRows && selectedRows.length > 0) || drugApplyRowData.stateCode === "30"}
                        >
                            退药
                        </Button>
                    </Col>
                </Row>
                <div style={{ height: '6px', background: 'rgba(240, 242, 245, 1)', width: '100%' }}></div>
                <Row>
                    <Col span={6} className="card-container leftColumns">
                        <Tabs activeKey={activeTabPaneKey} onChange={this.toggleTabPane} type="card">
                            <TabPane tab='退药申请' key="1">
                                <div style={{ padding: '12px', height: store.getState().tableHeight.y + 198 - basicHeight + 'px', overflow: 'auto' }}>
                                    <div style={{ marginBottom: '12px' }}>
                                        <Input
                                            style={{ width: '100%' }}
                                            value={patNameOrNO}
                                            onChange={this.handlePatNameOrNO}
                                            onPressEnter={this.getDrugApplyTableData}
                                            placeholder="查找退药单号、患者姓名以及病区(Enter)"
                                        />
                                    </div>
                                    <Table
                                        loading={drugApplyLoading}
                                        columns={letfColumns.length > 0 ? letfColumns : drugApplyColumns}
                                        dataSource={drugApplyTableData}
                                        bordered
                                        pagination={false}
                                        // scroll={{x: 730, y: store.getState().tableHeight.y + 160 - 75 - basicHeight}}
                                        scroll={{ x: detailWidthTotal ? detailWidthTotal : 730, y: store.getState().tableHeight.y + 160 - 85 - basicHeight }}
                                        onRow={this.handleDrugApplyOnRow}
                                        rowClassName={this.handleDrugApplyRowClassName}
                                        className="inpatient-area"
                                    />
                                </div>
                            </TabPane>
                            <TabPane tab='直接退药' key="2">
                                <div style={{ padding: '12px', height: store.getState().tableHeight.y + 198 - basicHeight + 'px', overflow: 'auto' }}>
                                    <div style={{ marginBottom: '12px' }}>
                                        <Input
                                            style={{ width: '100%' }}
                                            placeholder="请输入登记号或姓名搜索(Enter)"
                                            value={registerNum}
                                            onPressEnter={this.getRefundMedicineDirectlyTableData}
                                            onChange={this.handleRegisterNumOnchange}
                                        />
                                    </div>
                                    <Table
                                        loading={refundMedicineDirectlyLoading}
                                        columns={refundMedicineDirectlyColumns}
                                        dataSource={refundMedicineDirectlyTableData}
                                        bordered
                                        pagination={false}
                                        scroll={{ x: refundMedicineDirectlyTableWidth, y: store.getState().tableHeight.y + 160 - 85 - basicHeight }}
                                        onRow={this.handkeRefundMedicineDirectlyOnRow}
                                        rowClassName={this.handkeRefundMedicineDirectlyRowClassName}
                                        className="inpatient-area"
                                    />
                                </div>
                            </TabPane>
                        </Tabs>
                    </Col>
                    <Col span={18}>
                        <div style={{ paddingLeft: '6px', position: 'relative' }}>
                            <Card
                                size="small"
                                title={<div className="card-title-left-icon"><div></div>退药明细</div>}
                                extra={<span style={{ color: '#666' }} className='span' onClick={() => {
                                    this.setState({ parameterCode: 'HPDrugWithdrawal' }, () => {
                                        this.columnRef.onOpenModel();
                                    })
                                }}><Icon type="setting" title="列权限设置" /></span>}
                            >
                                <div style={{ height: store.getState().tableHeight.y + 174 - basicHeight + 'px', overflow: 'auto' }}>
                                    <Table
                                        className="remove-td-default-bg inpatient-area"
                                        rowSelection={drugDetailRowSelection}
                                        columns={wardAndPatientColumns.length > 0 ? wardAndPatientColumns : drugDetailColumns}
                                        dataSource={drugDetailTableData}
                                        bordered
                                        pagination={false}
                                        scroll={{ x: wardAndPatientTableWidth ? wardAndPatientTableWidth : 1000, y: store.getState().tableHeight.y + 160 - 42 - basicHeight }}
                                    // onRow={this.handledrugDetailOnRow}
                                    // rowClassName={this.handledrugDetailRowClassName}
                                    />
                                </div>
                            </Card>
                            <div style={{ width: '6px', background: 'rgba(240, 242, 245, 1)', position: 'absolute', top: 0, left: 0, height: '100%' }}></div>
                        </div>
                    </Col>
                </Row>

                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName={this.state.parameterCode}
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={() => {
                        if (this.state.parameterCode == 'HPDrugWithdrawal') {
                            this.getWardAndPatientColumns()
                        } else if (this.state.parameterCode == 'HPDrugWithdrawalLeft') {
                            this.getDetailTableColumns()
                        } else {
                            this.getRefundMedicineDirectlyColumns()
                        }
                    }
                    }
                />
            </div>
        )
    }
}