/**
 * 
 * 常用用法维护
 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox,
    Popconfirm, Button, Modal, Icon, Divider, message, Pagination, Spin
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ShowCommonTableModal from './component/ShowCommonTableModal';
import { PAGE_NUM_MORE_STATUS } from 'tools/statusConstants';
import CommonPagination from 'components/pagination/index';
import moment from 'moment';
import store from 'store';
import './style/index.less';

const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;
const cost_type = require('../../assets/images/icon_Inquire.png')

class CommonUsagePage extends React.Component {
    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var titleData = JSON.parse(sessionStorage.getItem('titleData'))
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 10,
            userData: userData,
            selectData: [],
            titleData: titleData,
            totalCount: 0,
            size: 'small',
            saveStatus: false
        }
        this.selectFocus = React.createRef();
        this.saveBtn = React.createRef();
        this.ordSkinFocus = React.createRef();
        this.ordDurQtyIdFocus = React.createRef();
        this.ordDurQtyFocus = React.createRef();
        this.ordUsageIDFocus = React.createRef();
        this.ordFreqIDFocus = React.createRef();
        this.ordDoseIDFocus = React.createRef();
        this.ordDoseFocus = React.createRef();
        this.ordNoteFocus = React.createRef();
        this.eyePartID = React.createRef();
    }

    componentDidMount() {
        this.loadData();
        this.initData();
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 60 + 'px';
    }

    initData() {
        // var date = new Date();
        this.columns = [
            {
                title: '药品编码',
                dataIndex: 'ordCode',
                width: 120,
                align: 'center',
            }, {
                title: '名称*规格',
                dataIndex: 'ordDesc',
                width: 280,
                align: 'center',
            }, {
                title: '剂量',
                dataIndex: 'ordDose',
                width: 100,
                align: 'center',
            }, {
                title: '剂量单位',
                dataIndex: 'ordDoseUnitDesc',
                width: 120,
                align: 'center',
            }, {
                title: '频次',
                dataIndex: 'ordFreqDesc',
                width: 80,
                align: 'center',
            }, {
                title: '用法',
                dataIndex: 'ordUsageDesc',
                width: 120,
                align: 'center',
            }, {
                title: '疗程',
                dataIndex: 'ordDurQty',
                width: 100,
                align: 'center',
            }, {
                title: '疗程单位',
                dataIndex: 'ordDurationDesc',
                width: 100,
                align: 'center',
            }, {
                title: '眼别',
                dataIndex: 'eyePartDesc',
                width: 100,
                align: 'center',
            }, {
                title: '皮试',
                dataIndex: 'ordSkinTestFlag',
                width: 80,
                align: 'center',
            }, {
                title: '皮试备注',
                dataIndex: 'ordSkinTestWayDesc',
                width: 120,
                align: 'center',
            }, {
                title: '医嘱备注',
                dataIndex: 'ordNote',
                width: 120,
                align: 'center',
            }, {
                title: '操作',
                dataIndex: 'bookFlag',
                width: 120,
                align: 'center',
                fixed:'right',
                render: (text, data) => {
                    return (
                        <span>
                            <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
                            <span className='span' onClick={this.editData.bind(this, data)}>编辑</span>
                            <Divider type="vertical" />
                            <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
                            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={this.handleDel.bind(this, data)} >
                                <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                            </Popconfirm>
                        </span >
                    )
                }
            }
        ],
            this.sunColumns = [
                {
                    title: '编码',
                    dataIndex: 'medCode',
                    width: 80,
                    align: 'center',
                }, {
                    title: '名称*规格',
                    dataIndex: 'medDesc',
                    width: 180,
                    align: 'center',
                }, {
                    title: '库存',
                    dataIndex: 'medStock',
                    width: 80,
                    align: 'center',
                }, {
                    title: '大类',
                    dataIndex: 'medCatDesc',
                    width: 120,
                    align: 'center',
                }, {
                    title: '子类',
                    dataIndex: 'medSubCatDesc',
                    width: 120,
                    align: 'center',
                }, {
                    title: '供应商',
                    dataIndex: 'medVendorDesc',
                    width: 120,
                    align: 'center',
                }, {
                    title: '商品名',
                    dataIndex: 'tradeName',
                    width: 120,
                    align: 'center',
                },
            ]
    }

    editData(data) {
        this.setState({
            tableData: data,
            medId: data.medID,
            changeValue: undefined
        }, () => {
            this.loadTableData('edit', data, '')
        })
    }

    handleDel(data) {
        var params = {
            params: [{
                userID: this.state.userData.userID,
                oftenUsageID: [data.oftenUsageID]
            }],

        }
        $http.post('urlDeault', this, {
            code: "03050068",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('删除成功！', this.state.userData && this.state.userData.messageTime)
                    this.loadData(1)
                }
            }
        });
    }

    clearInput() {
        this.props.form.resetFields()
        this.setState({
            tableData: {},
            ordDose: undefined,
            ordDoseUnitID: undefined,
            ordFreqID: undefined,
            ordUsageID: undefined,
            ordDurQty: undefined,
            ordDurationID: undefined,
            ordSkinTestFlag: undefined,
            ordSkinTestWayID: undefined,
            ordNote: undefined,
            eyePartID: undefined,
            doseUnitList: [],
            frequenceList: [],
            usageList: [],
            durationList: [],
            skinTestWayList: []
        })
    }
    //分页切换
    onChange(e) {
        this.setState({ page: e }, () => {
            this.loadSelectData('', e, '');
        });
    }

    changeData(e) {
        this.setState({ codePage: e }, () => {
            this.loadData(e);
        });
    }

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

    changeAdvicePage(current, pageSize) {
        this.setState({ newPage: pageSize, codePage: current }, () => {
            this.loadData(current, pageSize, 'search');
        });
    }

    loadSelectData(value, page, pageSize) {
        var params = {
            params: [{
                searchCode: value ? value : this.state.changeValue,
                logonLocID: this.state.userData.locID,
                userID: this.state.userData.userID,
                groupID: this.state.userData.groupID,
                hospID: this.state.userData.hospID,
                drugsFlag: "Y"
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: page
            }]

        }
        $http.post('urlDeault', this, {
            code: "03050019",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        selectData: res.result.data,
                        total: res.result.totalCount,
                        rowMedID: res.result.data ? res.result.data[0].medID : ''
                    })
                }
            }
        });
    }

    handleSearch(value) {
        this.setState({
            changeValue: value,
            visible: true,
            colStatus: ''
        })
        if (value.length >= 2) {
            this.loadSelectData(value, '', '')
        }
    }

    //onfocus名称规格展示下拉table
    handleFocusInput(e) {
        this.setState({
            // indexTable: index,
            visible: e,
            focus: true
        })
    }

    rowClick(record, index) {
        this.setState({
            visible: false,
            rowData: record.medDesc,
            ordSpecID: record.ordSpecID,
            selectData: [],
            visStatus: false,
            medId: record.medID,
            colData: record,
            changeValue: undefined,
        }, () => {
            this.child.handleCancel();
            this.loadTableData('', record, index)
        })
    }

    //获取列表行数据
    loadTableData(status, record, data) {
        var that = this;
        var date = new Date();
        var params = {
            params: [{
                orders: [{
                    medID: record.medID,
                    ordSetID: record.ordSetID ? record.ordSetID : ''
                }]
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050020",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    if (res.confirmData.length > 0) {
                        confirm({
                            title: '确认医嘱',
                            content: res.confirmData[0].errorMessage,
                            onOk() {
                                that.setState({
                                    tableData: status == 'edit' ? record : res.data[0].defaultData,
                                    doseUnitList: res.data[0].dataList.doseUnitList,//剂量单位
                                    durationList: res.data[0].dataList.durationList,//疗程单位
                                    qtyUnitList: res.data[0].dataList.qtyUnitList,//数量单位
                                    eyePartList: res.data[0].dataList.eyePartList,//数量单位
                                    recLocList: res.data[0].dataList.recLocList,//接收科室
                                    frequenceList: res.data[0].dataList.frequenceList,//频次
                                    usageList: res.data[0].dataList.usageList,//用法
                                    skinTestWayList: res.data[0].dataList.skinTestWayList,//皮试备注
                                    priorityList: res.data[0].dataList.priorityList,//优先级
                                    admReasonList: res.data[0].dataList.admReasonList,
                                    specList: res.data[0].dataList.specList,//标本
                                    changeValue: undefined
                                })
                            },
                            onCancel() {
                                console.log('Cancel');
                            },
                        });
                    } else {
                        this.setState({
                            tableData: status == 'edit' ? record : res.data[0].defaultData,
                            doseUnitList: res.data[0].dataList.doseUnitList,//剂量单位
                            durationList: res.data[0].dataList.durationList,//疗程单位
                            qtyUnitList: res.data[0].dataList.qtyUnitList,//数量单位
                            eyePartList: res.data[0].dataList.eyePartList,//数量单位
                            recLocList: res.data[0].dataList.recLocList,//接收科室
                            frequenceList: res.data[0].dataList.frequenceList,//频次
                            usageList: res.data[0].dataList.usageList,//用法
                            skinTestWayList: res.data[0].dataList.skinTestWayList,//皮试备注
                            priorityList: res.data[0].dataList.priorityList,//优先级
                            admReasonList: res.data[0].dataList.admReasonList,
                            specList: res.data[0].dataList.specList,//标本
                            changeValue: undefined
                        })
                    }
                }
            }
        });
        this.ordDoseFocus.current.focus()
    }

    //当前组件内，所有的下拉，针对index进行赋值
    changeCommonSelect(name, code, e) {
        var id = '', desc = '', freCode = '';
        if (e) {
            id = e.substring(0, e.indexOf('^'))
            desc = e.substring(e.indexOf('^') + 1)
            freCode = e.substring(0, e.indexOf('-'))
        }
        this.state.tableData[name] = id ? id : e
        this.setState({
            [name]: id ? id : e,
            [code]: desc,
            freCode: freCode

        })
    }

    changeCommonEyeSelect(name,code,e){
        this.state.tableData[name] = e
        this.setState({
            [name]:e
        })
    }

    commonInputKeyDown(name, e) {
        if (e.keyCode == '13') {
            if (name == 'ordDose') {
                this.ordDoseIDFocus.current.focus()
            } else if (name == 'ordDurQty') {
                this.ordDurQtyIdFocus.current.focus()
            } else if (name == 'ordNote') {
                this.saveBtn.current.buttonNode.focus()
            }
        }
    }

    commonInputChange(name, e) {
        var value = e.target.value
        this.setState({
            [name]: value
        })
    }

    onSelectFocus(name, e) {
        if (name == 'ordDoseUnitID') {
            this.ordFreqIDFocus.current.focus()
        } else if (name == 'ordFreqID') {
            this.ordUsageIDFocus.current.focus()
        } else if (name == 'ordUsageID') {
            this.ordDurQtyFocus.current.focus()
        } else if (name == 'ordDurationID') {
            this.ordSkinFocus.current.focus()
        } else if (name == 'ordSkinTestWayID') {
            this.ordNoteFocus.current.focus()
        }
    }

    changeCheckBox(name, e) {
        this.setState({
            [name]: e.target.checked ? 'Y' : 'N'
        })
    }

    loadData(page, pageSize, e) {
        this.setState({ loading: true })
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                searchCode: this.state.searchCode
            }],
            pagination: [{
                pageSize: this.state.size == 'small' ? this.state.pageSize : PAGE_NUM_MORE_STATUS[0].code,
                currentPage: page
            }]

        }
        $http.post('urlDeault', this, {
            code: "03050066",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result.data,
                        totalCount: res.result.totalCount,
                        codePage: 1,
                        search: e,
                        loading: false
                    })
                }
            }
        });
    }

    loadDataNewData(e) {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                searchCode: this.state.searchCode
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: 1
            }]

        }
        if (e.keyCode == '13') {
            $http.post('urlDeault', this, {
                code: "03050066",
                data: params,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setState({
                            dataSource: res.result.data,
                            totalCount: res.result.totalCount
                        })
                    }
                }
            });
        }
    }

    //添加用法
    saveCommonUsage() {
        var { colData, tableData } = this.state;
        this.setState({ saveStatus: true })
        var obj = this.props.form.getFieldsValue()
        if (Util.isEmpty(tableData)) {
            message.error('暂无保存数据！', this.state.userData && this.state.userData.messageTime)
            this.setState({ saveStatus: false })
            return
        }
        tableData.ordNote = this.state.ordNote ? this.state.ordNote : tableData.ordNote;
        tableData.ordDurQty = this.state.ordDurQty ? this.state.ordDurQty : tableData.ordDurQty;
        tableData.ordDose = this.state.ordDose ? this.state.ordDose : tableData.ordDose;
        var params = {
            params: [{
                userID: this.state.userData.userID,
                hospID: this.state.userData.hospID,
                oftenUsageID: tableData.oftenUsageID ? tableData.oftenUsageID : '',//常用用法id，用于修改
                medID: this.state.medId,
                ordDose: tableData.ordDose,
                ordDoseUnitID: tableData.ordDoseUnitID,
                ordFreqID: tableData.ordFreqID,
                ordUsageID: tableData.ordUsageID,
                eyePartID: tableData.eyePartID,
                ordDurQty: tableData.ordDurQty,
                ordDurationID: tableData.ordDurationID,
                ordSkinTestFlag: tableData.ordSkinTestFlag,
                ordSkinTestWayID: tableData.ordSkinTestWayID,
                ordNote: obj.ordNote,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050067",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('保存成功', this.state.userData && this.state.userData.messageTime)
                    this.setState({ saveStatus: false })
                    this.clearInput();
                    this.loadData(1)
                } else {
                    this.setState({ saveStatus: false })
                }
            }
        });
    }


    showCommonTableModal(e) {
        if (e.keyCode == '13') {
            // this.state.dataSource[index] = {}
            this.setState({
                isShowCommonTableModal: true
            }, () => {
                this.loadSelectData(this.state.changeValue, '', '')
                this.child.showModal();
            })
        }
    }

    //列修改为input框，change事件处理
    handleSearchInput(name, e) {
        let top = 180//document.getElementsByClassName('name-input').getBoundingClientRect().top + 40 + 'px';
        let left = 100//document.getElementsByClassName('name-input').getBoundingClientRect().left + 'px';
        var value = e.target.value;
        // this.setState({
        //     changeValue: value,
        //     top: top,
        //     left: left
        // })
        // if (value.length >= 2) {
        //     this.loadSelectData(value, '', '')
        // } else {
        //     this.setState({
        //         selectData: [],
        //         total: 0,
        //         page: 1,
        //     })
        // }
        this.setState({
            changeValue: value,
            visible: true,
            colStatus: '',
            top: top,
            left: left,
            tableData: '',
            doseUnitList: [],//剂量单位
            durationList: [],//疗程单位
            qtyUnitList: [],//数量单位
            recLocList: [],//接收科室
            frequenceList: [],//频次
            usageList: [],//用法
            skinTestWayList: [],//皮试备注
            priorityList: [],//优先级
            admReasonList: [],
            specList: [],//标本
        })
        if (value.length >= 2) {
            this.loadSelectData(value, '', '')
        }
    }

    // 操作弹框
    onClickRowPublic = (record, index) => {
        return {
            onDoubleClick: () => {
                this.rowClick(record, index)
            },
            onClick: () => {
                this.setState({
                    rowMedID: record.medID
                })
            }
        }
    }

    setRowClassNamePublic = (record) => {
        return record.medID === this.state.rowMedID ? 'clickRowStyle' : '';
    }

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

    //隐藏弹出框
    hideModal(name) {
        this.setState({
            [name]: false,//将所有参数置为false
        });
    }

    handleOnKeydown(e) {
        var e = window.event || e;
        let scroll_height = 50;
        let id = '';
        let oneArr = this.state.selectData && this.state.selectData.length > 0 ? this.state.selectData : [];
        switch (e.keyCode) {
            case 13:
                if (this.state.rowMedID) {
                    let obj = {}
                    for (var i = 0; i < oneArr.length; i++) {
                        if (oneArr[i].medID === this.state.rowMedID) {
                            obj = i > 0 ? oneArr[i] : oneArr[0];
                            break;
                        }
                    }
                    this.rowClick(obj);
                } else {
                    message.info("请选择一条需要操作的数据", this.state.userData && this.state.userData.messageTime)
                }
                break;
            case 38: //上
                if (this.state.rowMedID) {
                    for (var i = 0; i < oneArr.length; i++) {
                        if (oneArr[i].medID === this.state.rowMedID) {
                            id = i > 0 ? oneArr[i - 1].medID : oneArr[0].medID;
                            break;
                        }
                    }
                    this.setState({ rowMedID: id }, () => {
                        var gundong = document.getElementById("gundong");
                        gundong.scrollTop = gundong.scrollTop - scroll_height;
                    })
                } else {
                    this.setState({ rowMedID: oneArr[0].medID })
                }
                break;
            case 40: //下
                if (this.state.rowMedID) {
                    for (let i = 0; i < oneArr.length; i++) {
                        if (oneArr[i].medID === this.state.rowMedID) {
                            id = i + 1 >= oneArr.length ? oneArr[oneArr.length - 1].medID : oneArr[i + 1].medID;
                            break;
                        }
                    }
                    this.setState({ rowMedID: id }, () => {
                        var gundong = document.getElementById("gundong");
                        gundong.scrollTop = gundong.scrollTop + scroll_height;
                    })
                } else {
                    this.setState({ rowMedID: oneArr[0].medID })
                }
                break;
        }
    }

    handleLoadUsage() {
        var params = {
            params: [{
                medID: this.state.tableData ? this.state.tableData.medID : '',
                hospID: this.state.userData.hospID
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040065",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    // this.state.dataSource[index]['usageList'] = res.data
                    this.state.usageList = res.data
                    this.setState({})
                }
            }
        });
    }

    onBlurFreqSelect() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050143",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.state.frequenceList = res.result
                    this.setState({})
                }
            }
        });
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const { dataSource, items, page, total, top, left, selectData } = this.state;
        const formItemLayoutAge = {
            labelCol: { span: 7 },
            wrapperCol: { span: 15 },
        }

        let param = {
            width: '700px',
            // height: 300,
            top: top,
            left: left,
            columns: this.sunColumns,
            data: selectData,
            isOnRow: true,
            TableClassName: 'tab-placeholder',
            rowClassName: true,
            showPagination: true,
            page,
            total,
        }

        //计量单位
        var doseUnitListOption = []
        this.state.doseUnitList && this.state.doseUnitList.map((item, index) => {
            doseUnitListOption.push(<Option key={index} value={item.doseUnitID + '^' + item.doseUnitDesc}>{item.doseUnitDesc}</Option>)
        })

        //频次
        var frequenceListOption = []
        this.state.frequenceList && this.state.frequenceList.map((item, index) => {
            frequenceListOption.push(<Option key={index} value={item.id} code={item.descripts} endsp={item.enDescripts}>{item.descripts}</Option>)
        })

        //用法
        var usageListOption = []
        this.state.usageList && this.state.usageList.map((item, index) => {
            usageListOption.push(<Option key={index} value={item.id + '^' + item.descripts}>{item.descripts}</Option>)
        })

        //疗程单位
        var durationListOption = []
        this.state.durationList && this.state.durationList.map((item, index) => {
            durationListOption.push(<Option key={index} value={item.id + '^' + item.descripts}>{item.descripts}</Option>)
        })

        //皮试备注
        var skinTextWayListOption = []
        this.state.skinTestWayList && this.state.skinTestWayList.map((item, index) => {
            skinTextWayListOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
        })
        //眼别
        var eyePartListOption = []
        this.state.eyePartList && this.state.eyePartList.map((item, index) => {
            eyePartListOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
        })

        return (
            // <Spin spinning={this.state.saveStatus} style={{ background: '#F5F7FE',width:'100%',height:'100%' }} tip='加载中...'>
            <div style={{ background: '#F5F7FE', width: '100%', height: '100%' }} className='outpatient-body'>
                {/**列input框新表格弹框 */}
                <div
                    tabIndex={1}
                    onKeyDown={this.handleOnKeydown.bind(this)}
                    style={{ outline: 'none' }}
                >
                    <ShowCommonTableModal onClickRowPublic={this.onClickRowPublic}
                        setRowClassNamePublic={this.setRowClassNamePublic}
                        isShow={this.state.isShowCommonTableModal}
                        onHide={this.hideModal.bind(this, 'isShowCommonTableModal')}
                        param={param}
                        onRef={this.onRef}
                        id="gundong"
                        compilePage={this.changePageSize.bind(this)}>
                    </ShowCommonTableModal></div>
                <Card style={{ float: 'left', width: '20%', height: store.getState().tableHeight.y + 242 }} headStyle={{ textAlign: 'left' }}
                    title={<div><img src={cost_type} style={{ marginLeft: 5 }} /><span style={{ marginLeft: 5 }}>添加药品常用用法</span></div>}>
                    <Row gutter={20} className='hospital-zation-express'>
                        <Col span={25}>
                            <Input.Group>
                                <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'名称及规格：'} disabled />
                                <Input ref={this.selectFocus} className="name-input" style={{ width: '69.9%' }}
                                    onKeyDown={this.showCommonTableModal.bind(this)} allowClear={true}
                                    value={this.state.tableData ? this.state.tableData.ordDesc : this.state.changeValue}
                                    autoFocus placeholder='请输入内容回车查询'
                                    onChange={this.handleSearchInput.bind(this, 'ordMedItemDesc')} />
                            </Input.Group>
                        </Col>

                        <Col span={25} style={{ marginTop: 10 }}>
                            <FormItem>
                                {getFieldDecorator('ordDose', {
                                    initialValue: this.state.ordDose ? this.state.ordDose :
                                        (this.state.tableData ? this.state.tableData.ordDose : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'剂量：'} disabled />
                                        <Input placeholder='请输入剂量' style={{ width: '69.9%' }} ref={this.ordDoseFocus}
                                            value={this.state.ordDose ? this.state.ordDose :
                                                (this.state.tableData ? this.state.tableData.ordDose : undefined)}
                                            onKeyDown={this.commonInputKeyDown.bind(this, 'ordDose')}
                                            onChange={this.commonInputChange.bind(this, 'ordDose')} />
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordDoseUnitID', {
                                    initialValue: this.state.ordDoseUnitID ? this.state.ordDoseUnitDesc :
                                        (this.state.tableData ? this.state.tableData.ordDoseUnitDesc : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'剂量单位：'} disabled />
                                        <Select style={{ width: '69.9%' }} allowClear className='express-select-border'
                                            ref={this.ordDoseIDFocus} placeholder='请选择剂量单位'
                                            value={this.state.ordDoseUnitID ? this.state.ordDoseUnitDesc :
                                                (this.state.tableData ? this.state.tableData.ordDoseUnitDesc : undefined)}
                                            onSelect={this.onSelectFocus.bind(this, 'ordDoseUnitID')}
                                            onChange={this.changeCommonSelect.bind(this, 'ordDoseUnitID', 'ordDoseUnitDesc')}>
                                            {doseUnitListOption}
                                        </Select>
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordFreqID', {
                                    initialValue: this.state.ordFreqID ? this.state.ordFreqDesc :
                                        (this.state.tableData ? (this.state.tableData.ordFreqDesc || this.state.tableData.ordFrequenceDesc) : undefined),
                                    // rules: [{ required: true, message: '不能为空' }],
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'频次：'} disabled />
                                        <Select style={{ width: '69.9%' }} ref={this.ordFreqIDFocus} className='express-select-border'
                                            filterOption={(input, option) =>
                                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                || option.props.endsp.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            allowClear placeholder='请选择频次单位'
                                            value={this.state.ordFreqID ? this.state.ordFreqDesc :
                                                (this.state.tableData ? (this.state.tableData.ordFreqDesc || this.state.tableData.ordFrequenceDesc) : undefined)}
                                            onSelect={this.onSelectFocus.bind(this, 'ordFreqID')}
                                            onFocus={this.onBlurFreqSelect.bind(this, 'ordFreqID')}
                                            onChange={this.changeCommonSelect.bind(this, 'ordFreqID', 'ordFreqDesc')}>
                                            {frequenceListOption}
                                        </Select>
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordUsageID', {
                                    initialValue: this.state.ordUsageID ? this.state.ordUsageDesc :
                                        (this.state.tableData ? this.state.tableData.ordUsageDesc : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'用法：'} disabled />
                                        <Select style={{ width: '69.9%' }} allowClear ref={this.ordUsageIDFocus} className='express-select-border'
                                            firstActiveValue={this.state.ordUsageID ? (this.state.ordUsageID + '^' + this.state.ordUsageDesc) :
                                                (this.state.tableData ? this.state.tableData.ordUsageID + '^' + this.state.tableData.ordUsageDesc : undefined)}
                                            defaultActiveFirstOption={false} placeholder='请选择用法单位'
                                            onSelect={this.onSelectFocus.bind(this, 'ordUsageID')}
                                            onFocus={this.handleLoadUsage.bind(this, 'ordUsageID')}
                                            onChange={this.changeCommonSelect.bind(this, 'ordUsageID', 'ordUsageDesc')}>
                                            {usageListOption}</Select>
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordDurQty', {
                                    initialValue: this.state.ordDurQty ? this.state.ordDurQty :
                                        (this.state.tableData ? this.state.tableData.ordDurQty : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'疗程：'} disabled />
                                        <Input placeholder='请输入疗程' style={{ width: '69.9%' }} onChange={this.commonInputChange.bind(this, 'ordDurQty')}
                                            onKeyDown={this.commonInputKeyDown.bind(this, 'ordDurQty')}
                                            ref={this.ordDurQtyFocus}
                                            value={this.state.ordDurQty ? this.state.ordDurQty :
                                                (this.state.tableData ? this.state.tableData.ordDurQty : undefined)} />
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordDurationID', {
                                    initialValue: this.state.ordDurationID ? this.state.ordDurationDesc :
                                        (this.state.tableData ? this.state.tableData.ordDurationDesc : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'疗程单位：'} disabled />
                                        <Select allowClear className='express-select-border' placeholder='请选择疗程单位'
                                            ref={this.ordDurQtyIdFocus} style={{ width: '69.9%' }}
                                            value={this.state.ordDurationID ? this.state.ordDurationDesc :
                                                (this.state.tableData ? this.state.tableData.ordDurationDesc : undefined)}
                                            onSelect={this.onSelectFocus.bind(this, 'ordDurationID')}
                                            onChange={this.changeCommonSelect.bind(this, 'ordDurationID', 'ordDurationDesc')}>
                                            {durationListOption}
                                        </Select>
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordSkinTestWayID', {
                                    initialValue: this.state.ordSkinTestWayID ? this.state.ordSkinTestWayID :
                                        (this.state.tableData ? this.state.tableData.ordSkinTestWayID : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'皮试备注：'} disabled />
                                        <Select style={{ width: '69.9%' }} allowClear ref={this.ordSkinFocus} className='express-select-border'
                                            onSelect={this.onSelectFocus.bind(this, 'ordSkinTestWayID')} placeholder='请选择皮试备注'
                                            value={this.state.ordSkinTestWayID ? this.state.ordSkinTestWayID :
                                                (this.state.tableData ? this.state.tableData.ordSkinTestWayID : undefined)}
                                            onChange={this.changeCommonSelect.bind(this, 'ordSkinTestWayID', 'ordSkinTestWayDesc')}>
                                            {skinTextWayListOption}
                                        </Select>
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('ordNote', {
                                    initialValue: this.state.ordNote ? this.state.ordNote : (
                                        this.state.tableData ? this.state.tableData.ordNote : undefined
                                    ),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'备注：'} disabled />
                                        <Input placeholder='请输入备注' ref={this.ordNoteFocus} style={{ width: '69.9%' }}
                                            onKeyDown={this.commonInputKeyDown.bind(this, 'ordNote')} value={this.state.ordNote ? this.state.ordNote : (
                                                this.state.tableData ? this.state.tableData.ordNote : undefined
                                            )}
                                            onChange={this.commonInputChange.bind(this, 'ordNote')} />
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25} style={{ marginTop: 5 }}>
                            <FormItem>
                                {getFieldDecorator('eyePartID', {
                                    initialValue: this.state.eyePartID ? this.state.eyePartID :
                                        (this.state.tableData ? this.state.tableData.eyePartDesc : undefined),
                                })(
                                    <Input.Group>
                                        <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'眼别：'} disabled />
                                        <Select allowClear className='express-select-border' placeholder='请选择眼别'
                                            ref={this.eyePartID} style={{ width: '69.9%' }} allowClear 
                                            value={this.state.eyePartID ? this.state.eyePartID :
                                                (this.state.tableData ? this.state.tableData.eyePartDesc : undefined)}
                                            onSelect={this.onSelectFocus.bind(this, 'eyePartID')}
                                            onChange={this.changeCommonEyeSelect.bind(this, 'eyePartID', 'eyePartDesc')}>
                                            {eyePartListOption}
                                        </Select>
                                    </Input.Group>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={25}>
                            <Button onClick={this.clearInput.bind(this)} style={{ width: '48%' }}>清空</Button>
                            <Button style={{ width: '48%', marginLeft: 10 }} type='primary' ref={this.saveBtn} onClick={this.saveCommonUsage.bind(this)}>保存</Button>
                        </Col>
                    </Row>
                </Card>
                <Card style={{ float: 'right', width: '79.5%', height: store.getState().tableHeight.y + 242 }} headStyle={{ textAlign: 'left' }}
                    title={<div><img src={cost_type} style={{ marginLeft: 5 }} /><span style={{ marginLeft: 5 }}>药品常用用法列表</span></div>}>
                    <Table columns={this.columns}
                        dataSource={this.state.dataSource} bordered
                        loadData={this.loadData.bind(this)}
                        title={() => {
                            return <div style={{ display: 'flex' }}>
                                <Input placeholder='药品编码/首拼/名称回车查询' style={{ width: 280 }}
                                    onKeyDown={this.loadDataNewData.bind(this)}
                                    onChange={Util.commonInputChange.bind(this, 'searchCode')} />
                                <Button style={{ marginLeft: 5 }} type='primary' onClick={this.loadData.bind(this, 1, 'search')}>查询</Button>
                            </div>
                        }
                        }
                        rowKey={(data) => {
                            return data.oftenUsageID || ''
                        }}
                        scroll={{ y: store.getState().tableHeight.y + 60,x:1200 }}
                        pagination={false}>
                    </Table>
                    <CommonPagination size={this.state.size} current={this.state.codePage} total={this.state.totalCount} search={this.state.search}
                        onShowSizeChange={this.changeAdvicePage.bind(this)} complete={true} dataSource={this.state.dataSource}
                        loading={this.state.loading} onChange={this.changeData.bind(this)} />
                </Card>
            </div>)

    }
}

export default Form.create()(CommonUsagePage);