/**
 * 
 * 预约治疗
 */

import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, List, Modal,
    Pagination, Button, Popconfirm, Icon, Tabs, message, DatePicker
} from 'antd';
import './style/index.less';
import ReadCard from 'components/readcard/ReadCard';
import { $http } from 'containers/config/https';
import RangeDatePicker from 'components/rangePicker/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import ShowAppointApplicationModal from './component/ShowAppointApplicationModal';
import ShowConfirmApplicationModal from './component/ShowConfirmApplicationModal';
import ShowApplicationDetailModal from './component/ShowApplicationDetailModal';
import ShowNewApplicationModal from './component/ShowNewApplicationModal';
import ShowToOrderModal from './component/ShowToOrderModal';
import CommonPagination from 'components/pagination/index';
import store from 'store';
import { Util, dayFormat } from 'tools/index';
import moment from 'moment';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const Option = Select.Option;
const InputGroup = Input.Group;
const confirm = Modal.confirm;
const Search = Input.Search;

class AppointTreatPage extends React.Component {

    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var date = new Date()
        this.state = {
            userData: userData,
            column: [],
            pageSize: 10,
            size: 'small',
            page: 1,
            dateTime: moment(date).format(dayFormat),
            regDateFrom: moment(date).format(dayFormat),
            regDateTo: moment(date).format(dayFormat),
        }
    }

    componentDidMount() {
        this.loadCardType()
        this.initData()
        this.loadOrderData()
        this.loadScheduling()
        this.getDoctor();//获取坐诊医生
        this.loadTimeRange()
        this.loadDepartment()
        this.loadAppointStatus()//申请单状态
    }

    loadAppointStatus() {
        var params = {
            params: [{
                language: this.state.userData.language
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050178",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    var appointStatus = res.result
                    var statusID = ''
                    if (!Util.isEmpty(appointStatus)) {
                        for (var i = 0; i < appointStatus.length; i++) {
                            if (appointStatus[i].defaultFlag == 'Y') {
                                statusID = appointStatus[i].id
                            }
                        }
                    }
                    this.setState({
                        appointStatus: res.result,
                        statusID: statusID
                    }, () => {
                        this.loadData(1)
                    })
                }
            }
        });
    }

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

    //获取坐诊医生
    getDoctor() {
        var params = {
            params: [{
                locID: this.state.userData.locID,
                groupID: '',
                depDoctorID: '',
                CureApplicationID: this.state.cureAppID,
                hospID: this.state.userData.hospID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050215",
            // code: "03020049",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        doctorData: res.depDoctor
                    })
                }
            }
        });
    }


    //获取卡类型
    loadCardType() {
        var params = {
            params: [{
                cardTypeFlag: '1',//卡类型
                patTypeFlag: '1',
            }]
        }
        $http.post('urlDeault', this, {
            code: "03030005",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    var cardStatus = ''
                    var replaceZero = ''
                    var cardLength = 0
                    var readMode = ''
                    if (res.cardType && res.cardType.length > 0) {
                        var cardType = res.cardType;
                        for (var i = 0; i < cardType.length; i++) {
                            if (cardType[i].defaultFlag == 'Y') {
                                cardStatus = cardType[i].id,
                                    replaceZero = cardType[i].replenishZero
                                cardLength = cardType[i].cardLength
                                readMode = cardType[i].readMode
                            }
                        }
                    }
                    this.setState({
                        cardTypeData: res.cardType,
                        credTypeData: res.credType,
                        patTypeData: res.patType,
                        sexData: res.sex,
                        socialStatusData: res.patSocialStatusDesc,
                        cardStatus: cardStatus,
                        readMode: readMode,
                        cardLength: cardLength,
                        replaceZero: replaceZero,
                    })
                }
            }
        });
    }

    //查询时段服务
    loadTimeRange() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040010",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        timeRange: res.timeRange
                    })
                }
            }
        });
    }

    loadData(page, pageSize, search) {
        var params = {
            params: [{
                cardTypeID: this.state.cardTypeID ? this.state.cardTypeID : this.state.cardStatus,
                cardNo: this.state.cardNo,
                number: this.state.number,
                medicalNo: this.state.medicalNo,
                dateFrom: this.state.regDateFrom,
                dateTo: this.state.regDateTo,
                appLocID: this.state.appLocID,
                locID: this.state.userData.locID,
                statusID: this.state.statusID,
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: page
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050165",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: !Util.isEmpty(res.result.data) ? res.result.data : [],
                        patientData: !Util.isEmpty(res.result.data) ? res.result.data[0] : '',
                        totalCount: res.result.totalCount,
                        page: page,
                        search: 'search'
                        // cureAppID: !Util.isEmpty(res.result.data) ? res.result.data[0].cureAppID : '',
                    }, () => {
                        if (!Util.isEmpty(res.result.data)) {
                            this.loadBookRecord()
                        }
                    })
                }
            }
        });
    }

    loadOrderData() {
        let data = {
            params: [{
                compontName: "AppBookRecord",
                type: "C",
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    var columns = res.result.C;
                    var dynColumns = []
                    for (var i = 0; i < columns.length; i++) {
                        if (columns[i].dataIndex == 'dateTime') {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center',
                                sorter: true//(text, data) => new Date(text.dateTime).getTime() - new Date(data.dateTime).getTime()
                            })
                        } else if (columns[i].dataIndex == 'Receptionist') {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center',
                                render: (text, data) => {
                                    return <span style={{ color: '#1890ff', cursor: 'pointer' }}
                                        onClick={this.showReceptionModal.bind(this, data)}>{data.Receptionist}</span>
                                }
                            })
                        } else {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center'
                            })
                        }
                    }
                    this.setState({
                        columns: dynColumns,
                        listWidth: res.totalWidth
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })
    }

    //获取医生排班信息
    loadScheduling() {
        var params = {
            params: [{
                cureAppID: this.state.cureAppID,
                timeRangeID: this.state.timeRangeId,
                doctorID: this.state.doctorID,
                medicalNo: this.state.medicalNo,
                date: this.state.dateTime ? moment(this.state.dateTime).format(dayFormat) : '',
                locID: this.state.userData.locID,
                hospID: this.state.userData.hospID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050166",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    let doctorList = res.result && res.result.data && res.result.data.length > 0 ? res.result.data : [];
                    let windowHost = window.location && window.location.origin ? window.location.origin : (window.location && window.location.protocol ? (window.location.protocol + '//' + window.location.hostname) : "");
                    for (var i = 0; i < doctorList.length; i++) {
                        let url = doctorList[i].image
                        doctorList[i].image = url.indexOf("http") !== -1 ? url : windowHost + url;
                    }
                    this.setState({
                        doctorList
                    })
                }
            }
        });
    }

    loadBookRecord() {
        var params = {
            params: [{
                cureAppID: this.state.cureAppID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050169",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        orderList: res.result.data,
                        totalPrice: res.result.totalPrice,
                        payPrice: res.result.payPrice,
                        unPayPrice: res.result.unPayPrice,
                    })
                }
            }
        });
    }

    initData() {
        let data = {
            params: [{
                compontName: "AppointTreatPage",
                type: "C",
                reactCode: ['AppointTreatPage']
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    var columns = res.result.C;
                    var dynColumns = []
                    for (var i = 0; i < columns.length; i++) {
                        if (columns[i].dataIndex == 'dateTime') {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center',
                                sorter: true//(text, data) => new Date(text.dateTime).getTime() - new Date(data.dateTime).getTime()
                            })
                        } else if (columns[i].dataIndex == 'Receptionist') {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center',
                                render: (text, data) => {
                                    return <span style={{ color: '#1890ff', cursor: 'pointer' }}
                                        onClick={this.showReceptionModal.bind(this, data)}>{data.Receptionist}</span>
                                }
                            })
                        } else if (columns[i].dataIndex == 'opertion') {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center',
                                render: (text, data) => {
                                    return data.sourceID == '2' ? <Popconfirm title={this.setMessage('AppointTreatPagedelete', 'descripts')} onConfirm={this.handleDel.bind(this, data)} >
                                        <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>{this.setMessage('AppointTreatPageapplication', 'descripts')}</span>
                                    </Popconfirm> : null
                                }
                            })
                        } else {
                            dynColumns.push({
                                title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center'
                            })
                        }
                    }
                    this.setState({
                        column: dynColumns,
                        appointWidth: res.totalWidth,
                        localeProvider: this.state.userData.language == 'EN' ? res.result.language.EN : res.result.language.CN
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })
    }

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

    changeRecorceType(data) {
        this.setState({
            resourceTypeID: data.id
        }, () => {
            // this.loadHospitalMsg()
        })
    }

    //切换卡类型
    changeCardType(name, e) {
        var { cardTypeData } = this.state;
        for (var i = 0; i < cardTypeData.length; i++) {
            if (e == cardTypeData[i].id) {
                this.setState({
                    cardLength: cardTypeData[i].cardLength,
                    replaceZero: cardTypeData[i].replenishZero,
                    cardTypeId: cardTypeData[i].id,
                    readMode: cardTypeData[i].readMode,
                    [name]: e,
                    inputStatus: true
                })
            }
        }
    }

    handleReadCard() {
        var cardType = this.state.cardTypeID ? this.state.cardTypeID : (this.state.cardStatus);
        this.readCard.ReadCard(cardType, "R", (json) => {
            this.setState({ readPatID: json && json.patInfo ? json.patInfo.patID : '', patCardNo: json.cardNo, readStatus: 'read' }, () => {
                this.loadData()
            })
        })
    }

    loadEnterData(e) {
        if (e.keyCode == '13') {
            this.loadData(1)
        }
    }

    startChange(date) {
        this.setState({
            regDateFrom: date ? moment(date).format(dayFormat) : '',
        })
    }

    endChange(date) {
        this.setState({
            regDateTo: date ? moment(date).format(dayFormat) : '',
        })
    }

    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    onBottomColumnRef = (ref) => {
        this.btnColumnRef = ref;
    }

    //新建预约申请
    handleOrderApplication() {
        this.setState({
            appointApplicationModal: true
        })
    }

    handleDel(data) {
        var params = {
            params: [{
                cureAppID: [data.cureAppID]
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050173",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    message.success(this.setMessage('AppointTreatPagesuccessfully', 'descripts'))
                    this.setState({
                        ids: []
                    }, () => {
                        this.loadData(1)
                    })
                }
            }
        });
    }

    hideModal(name) {
        this.setState({
            [name]: false
        })
    }

    hideAppListModal(name) {
        this.setState({
            [name]: false
        }, () => {
            this.loadData(1)
        })
    }

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

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

    changeDoctorId(name, e) {
        this.setState({
            [name]: e
        }, () => {
            this.loadScheduling()
        })
    }

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

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    cureAppID: record.cureAppID,
                    patientData: record,
                    bookScheduleID: []
                }, () => {
                    this.loadScheduling()
                    this.loadBookRecord()
                    this.getDoctor()
                })
            },
            onDoubleClick: () => {
                this.setState({
                    isShowApplicationDetailModal: true
                })
            }
        };
    }

    onSelectChange(ids) {
        this.setState({
            ids
        })
    }

    onSelectBottomChange(bookScheduleID) {
        this.setState({
            bookScheduleID
        })
    }

    loadOrderModal(data) {
        // this.setState({
        //     resDetailID: item.resDetailID,
        //     isShowToOrderModal: true
        // })
        if (parseInt(data.registedNum) >= parseInt(data.registNum)) {
            message.error(this.setMessage('AppointTreatPagevisiting', 'descripts'));
            return
        }
        var params = {
            params: [{
                patID: '',
                resDetailID: data.resDetailID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040018",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        orderData: res.data,
                        resDetailID: data.resDetailID,
                    }, () => {
                        this.handleShowToder()
                    })
                }
            }
        });
    }

    handleSubmitOrder(id) {
        var params = {
            params: [{
                userID: this.state.userData.userID,
                hospID: this.state.userData.hospID,
                curAppID: this.state.cureAppID,
                resDetailID: this.state.resDetailID,
                bookMethodID: 'WIN',
                resTimeID: id,

            }]
        }
        $http.post('urlDeault', this, {
            code: "03050167",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    message.success(this.setMessage('AppointTreatPageSuccess', 'descripts'))
                    this.hideModal('isShowToOrderModal')
                    this.loadData(1)
                    this.loadScheduling()
                }
            }
        });
    }

    handleShowToder() {
        this.setState({
            isShowToOrderModal: true
        })
    }

    handleCannelOrder() {
        if (Util.isEmpty(this.state.bookScheduleID)) {
            message.error(this.setMessage('AppointTreatPagePlease', 'descripts'))
            return
        }
        var params = {
            params: [{
                userID: this.state.userData.userID,
                bookScheduleIDArr: this.state.bookScheduleID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050170",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    message.success(this.setMessage('AppointTreatPageCancellation', 'descripts'))
                    this.setState({
                        bookScheduleID: []
                    }, () => {
                        this.loadBookRecord()
                        this.loadData(1)
                        this.loadScheduling()
                    })
                }
            }
        });
    }

    //获取开始时间和结束时间
    changeTimeRang(e) {
        this.setState({
            timeRangeId: e,
        }, () => {
            this.loadScheduling()
        })
    }

    changeDateTime(e) {
        this.setState({
            dateTime: e ? moment(e).format(dayFormat) : ''
        }, () => {
            this.loadScheduling()
        })
    }

    changeTime(name) {
        var date = new Date()
        if (name == 'left') {
            if (moment(this.state.dateTime, dayFormat).unix() < (moment(date, dayFormat).unix())) {
                message.error(this.setMessage('AppointTreatPagetime', 'descripts'))
                return
            }
            this.setState({
                dateTime: this.state.dateTime ? moment(this.state.dateTime).subtract(1, 'days') : ''
            }, () => {
                this.loadScheduling()
            })
        } else if (name == 'right') {
            this.setState({
                dateTime: this.state.dateTime ? moment(this.state.dateTime).add(1, 'days') : ''
            }, () => {
                this.loadScheduling()
            })
        }
    }

    disabledDate(current) {
        return current && current < moment().startOf('day');
    }

    //保存预约申请
    onSubmitApplication(params) {
        var that = this;
        $http.post('urlDeault', this, {
            code: "03050172",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        appointApplicationModal: false
                    }, () => {
                        confirm({
                            title: that.setMessage('AppointTreatPagetherapy', 'descripts'),
                            content: that.setMessage('AppointTreatPagetreatment', 'descripts'),
                            okText: that.state.userData.language == 'EN' ? 'Yes' : '是',
                            cancelText: that.state.userData.language == 'EN' ? 'No' : '否',
                            onOk() {
                                that.setState({
                                    isShowConfirmApplicationModal: true,
                                    admID: res.admID,
                                    cureConAppID: res.cureAppID
                                })
                            },
                            onCancel() {
                                that.hideAppListModal('appointApplicationModal')
                            },
                        });
                    })
                }
            }
        });
        // this.setState({
        //     appointApplicationModal: false
        // }, () => {
        //     confirm({
        //         title: '预约治疗',
        //         content: '保存成功，是否立即预约治疗？',
        //         okText: '是',
        //         cancelText: '否',
        //         onOk() {
        //             that.setState({
        //                 isShowConfirmApplicationModal: true,
        //                 // admID:res.admID,
        //                 cureConAppID:'110'
        //             })
        //         },
        //         onCancel() {
        //             console.log('Cancel');
        //         },
        //     });
        // })
    }

    render() {
        var { ids, doctorList, bookScheduleID } = this.state;
        //医嘱录入
        const rowSelection = {
            ids,
            onChange: this.onSelectChange.bind(this),
            selectedRowKeys: ids,
        }
        const rowBottomSelection = {
            bookScheduleID,
            onChange: this.onSelectBottomChange.bind(this),
            selectedRowKeys: bookScheduleID,
        }

        var resourceTypeOption = []
        this.state.resourceType && this.state.resourceType.map((item, index) => {
            resourceTypeOption.push(<Button key={index} value={item.id} size="large" style={{ marginRight: 5 }}
                className={item.id == this.state.resourceTypeID ? 'resource-btn-bgd' : ''}
                onClick={this.changeRecorceType.bind(this, item)}>{item.descripts}</Button>)
        })

        //卡类型
        let cardTypeOption = []
        this.state.cardTypeData && this.state.cardTypeData.map((item, index) => {
            cardTypeOption.push(<Option key={index} value={item.id} code={item.descripts}>{item.descripts}</Option>)
        })

        //坐诊医生
        let doctorOption = []
        this.state.doctorData && this.state.doctorData.map((item, index) => {
            doctorOption.push(<Option key={index} value={item.id} code={item.descriptsSPCode} name={item.descripts}>
                {item.descripts}</Option>)
        })

        let departDataOption = []
        this.state.departData && this.state.departData.map((item, index) => {
            departDataOption.push(<Option key={index} value={item.id} code={item.descriptsSPCode} name={item.descripts}>
                {item.descripts}</Option>)
        })

        let timeRangeOption = []
        this.state.timeRange && this.state.timeRange.map((item, index) => {
            timeRangeOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
        })

        let appointStatusOption = []
        this.state.appointStatus && this.state.appointStatus.map((item, index) => {
            appointStatusOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
        })

        var doctorListOption = []
        doctorList && doctorList.map((item, index) => {
            doctorListOption.push(<div key={index} value={item.doctorName}
                className={this.state.resDetailID == item.resDetailID ? 'appoint-check-style' : 'appoint-disabled-style'}
                onClick={this.loadOrderModal.bind(this, item)}
                style={{ width: '95%', height: 90, cursor: 'pointer' }}>
                <div style={{ float: 'left', width: '65%' }}>
                    <div style={{ display: 'flex' }}>
                        {!Util.isEmpty(item.image) ? <div style={{ width: 80, height: 87 }}><img src={item.image} style={{ width: '100%', height: '100%' }} /></div> :
                            <div style={{ marginTop: 3 }} className={item.docSexCode == '1' ? 'card-splice-boy' : 'card-splice-girl'}></div>}
                        <div>
                            <div style={{ marginTop: '25%' }}>
                                <span>{item.doctorName}
                                    <Icon className={item.onLineStatusCode == 'Y' ? 'card-splice-onLine' : 'card-splice-out'} />
                                </span>
                                {/* <div style={{ color: 'orange' }}>普通针刺</div> */}
                            </div>
                        </div>
                    </div>
                </div>
                <div style={{ float: 'right', width: '34.5%', textAlign: 'center', borderLeft: '1px solid #e8e8e8', lineHeight: '85px' }}>
                    <span><span style={{ color: '#1999db' }}>{item.registedNum}</span>/{item.registNum}</span></div>
            </div>)
        })

        return (
            <div className='appoint-treat-body' style={{ background: '#F1F1F1', height: '100%' }}>
                <ReadCard ref={ref => this.readCard = ref}></ReadCard>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="AppointTreatPage"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.initData}
                />
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="AppBookRecord"
                    configType="C"
                    onRef={this.onBottomColumnRef}
                    reloadData={this.loadOrderData}
                />
                {/**新建预约申请 */}
                {/* <ShowAppointApplicationModal isShow={this.state.appointApplicationModal}
                    onHide={this.hideAppListModal.bind(this, 'appointApplicationModal')}>
                </ShowAppointApplicationModal> */}
                <ShowNewApplicationModal isShow={this.state.appointApplicationModal}
                    onSubmit={this.onSubmitApplication.bind(this)}
                    onHide={this.hideAppListModal.bind(this, 'appointApplicationModal')}>
                </ShowNewApplicationModal>

                {/**治疗预约 */}
                <ShowConfirmApplicationModal isShow={this.state.isShowConfirmApplicationModal}
                    cureConAppID={this.state.cureConAppID}
                    admID={this.state.admID}
                    onHide={this.hideAppListModal.bind(this, 'isShowConfirmApplicationModal')}>
                </ShowConfirmApplicationModal>

                {/**预约治疗弹框 */}
                <ShowToOrderModal isShow={this.state.isShowToOrderModal}
                    orderData={this.state.orderData}
                    patientData={this.state.patientData}
                    cureAppID={this.state.cureAppID}
                    onSubmit={this.handleSubmitOrder.bind(this)}
                    onHide={this.hideModal.bind(this, 'isShowToOrderModal')}>
                </ShowToOrderModal>

                {/**查看治疗申请单 */}
                <ShowApplicationDetailModal isShow={this.state.isShowApplicationDetailModal}
                    cureAppID={this.state.cureAppID}
                    onHide={this.hideModal.bind(this, 'isShowApplicationDetailModal')}>
                </ShowApplicationDetailModal>
                <div style={{ float: 'left', width: '82.8%', height: '100%' }}>
                    <Card style={{ height: '10%' }}>
                        <Row gutter={40}>
                            <Col span={7}>
                                {this.setMessage('AppointTreatPageCardtype', 'descripts')}<Select style={{ width: '100px' }}
                                    placeholder={this.setMessage('AppointTreatPagecard', 'descripts')}
                                    allowClear showSearch
                                    value={this.state.cardTypeID ? this.state.cardTypeID : (this.state.cardStatus)}
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                    getPopupContainer={triggerNode => triggerNode.parentNode}
                                    onChange={this.changeCardType.bind(this, 'cardTypeID')}>
                                    {cardTypeOption}
                                </Select>
                                <Search className={this.state.readMode == 'R' ? 'disable-input-title' : ''}
                                    placeholder={this.setMessage('AppointTreatPageread', 'descripts')} style={{ width: '60%', marginLeft: 10 }}
                                    onChange={Util.commonInputChange.bind(this, 'cardNo')}
                                    value={this.state.cardNo}
                                    enterButton={this.setMessage('AppointTreatPageCall', 'descripts')}
                                    readOnly={this.state.readMode == 'R' ? true : false}
                                    onPressEnter={(e) => console.dir(e)}
                                    // onKeyDown={this.loadEnterData.bind(this, '1')}
                                    onSearch={this.handleReadCard.bind(this)}
                                />
                            </Col>

                            <Col span={6}>
                                {this.setMessage('AppointTreatPageidentifiy', 'descripts')}<Input onChange={Util.commonInputChange.bind(this, 'number')} allowClear={true}
                                    onKeyDown={this.loadEnterData.bind(this)}
                                    placeholder={this.setMessage('AppointTreatPagemobile', 'descripts')} style={{ width: '75%' }} />
                            </Col>

                            <Col span={6}>
                                {this.setMessage('AppointTreatPageHospitalization', 'descripts')}
                                <Input placeholder={this.setMessage('AppointTreatPageinpatient', 'descripts')} style={{ width: '67%' }}
                                    onChange={Util.commonInputChange.bind(this, 'medicalNo')} />
                            </Col>

                            <Col span={5} >
                                {this.setMessage('AppointTreatPagedepartment', 'descripts')}
                                <Select placeholder={this.setMessage('AppointTreatPageDepart', 'descripts')} style={{ width: '67%' }} showSearch
                                    allowClear={true}
                                    value={this.state.appLocID}
                                    onChange={Util.handleSelectChange.bind(this, 'appLocID')}
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }>{departDataOption}</Select>
                            </Col>

                            <Col span={7} style={{ marginTop: 5 }}>
                                <RangeDatePicker label={this.setMessage('AppointTreatPageDate', 'descripts')} format='YYYY-MM-DD' width={'82%'}
                                    startDate={this.state.regDateFrom} endDate={this.state.regDateTo}
                                    startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                            </Col>

                            <Col span={6} style={{ marginTop: 5 }}>
                                {this.setMessage('AppointTreatPageStatus', 'descripts')}
                                <Select placeholder={this.setMessage('AppointTreatPageform', 'descripts')} style={{ width: '48%' }}
                                    allowClear={true}
                                    value={this.state.statusID}
                                    onChange={Util.handleSelectChange.bind(this, 'statusID')}>{appointStatusOption}</Select>
                                <Button style={{ marginLeft: 10 }} type='primary' onClick={this.loadData.bind(this, '1')}>
                                    {this.setMessage('AppointTreatPageSearch', 'descripts')}
                                </Button>
                            </Col>
                        </Row>
                    </Card>
                    <Card style={{ height: '44.5%', marginTop: 5 }} bodyStyle={{ padding: '0px 10px' }}
                        title={<span><span style={{ color: 'orange' }}>{this.setMessage('AppointTreatPageNote', 'descripts')}</span></span>}
                        extra={<div>
                            {/* <Button size='small' type='danger' onClick={this.handleDel.bind(this)}>删除申请</Button> */}
                            <Button size='small' type='primary' style={{ marginLeft: 10 }}
                                onClick={this.handleOrderApplication.bind(this)}>{this.setMessage('AppointTreatPageapplications', 'descripts')}</Button>
                        </div>}>
                        <Table columns={this.state.column} className='appoint-treat-table-body'
                            dataSource={this.state.dataSource}
                            onRow={this.onClickRow}
                            rowSelection={rowSelection}
                            rowClassName={this.setRowClassName}
                            bordered
                            rowKey={(data) => {
                                return data.cureAppID
                            }}
                            scroll={{ x: this.state.appointWidth, y: store.getState().tableHeight.y }}
                            onHeaderRow={column => {
                                return {
                                    onDoubleClick: () => {
                                        this.columnRef.onOpenModel();
                                    },
                                };
                            }}
                            pagination={false}></Table>
                        <CommonPagination size={this.state.size} current={this.state.page} total={this.state.totalCount} search={this.state.search}
                            onShowSizeChange={this.changePageSize.bind(this)} complete={true} dataSource={this.state.dataSource}
                            loading={this.state.loading} onChange={this.onChange.bind(this)} />
                    </Card>

                    <Card style={{ marginTop: 5, height: '44%' }}
                        title={<div>
                            {this.setMessage('AppointTreatPageamount', 'descripts')}<span style={{ color: '#1999db', marginRight: 10 }}>{this.state.totalPrice || '0'}</span>
                            {this.setMessage('AppointTreatPageCharged', 'descripts')}<span style={{ color: '#1999db', marginRight: 10 }}>{this.state.payPrice || '0'}</span>
                            {this.setMessage('AppointTreatPageUncollected', 'descripts')}<span style={{ color: '#1999db', marginRight: 10 }}>{this.state.unPayPrice || '0'}</span>
                            <Button size='small' style={{ marginLeft: 10 }}>{this.setMessage('AppointTreatPageconsumption', 'descripts')}</Button></div>}
                        extra={<Button size='small' type='primary' style={{ marginLeft: 10 }}
                            onClick={this.handleCannelOrder.bind(this)}>{this.setMessage('AppointTreatPagecancel', 'descripts')}</Button>}>
                        <Table columns={this.state.columns}
                            dataSource={this.state.orderList}
                            rowSelection={rowBottomSelection}
                            bordered
                            rowKey={(data) => {
                                return data.bookScheduleID
                            }}
                            scroll={{ x: this.state.listWidth, y: '29vh' }}
                            onHeaderRow={column => {
                                return {
                                    onDoubleClick: () => {
                                        this.btnColumnRef.onOpenModel();
                                    },
                                };
                            }}
                            pagination={false}></Table>
                    </Card>
                </div>
                <Card style={{ float: 'right', width: '17%', height: '100%' }}>
                    <div style={{ height: '13%' }}>
                        <Col style={{ textAlign: 'center' }}>
                            <Icon type='left' style={{ marginRight: 10, cursor: 'pointer' }} onClick={this.changeTime.bind(this, 'left')} />
                            <DatePicker style={{ width: '80%' }} onChange={this.changeDateTime.bind(this)}
                                disabledDate={this.disabledDate}
                                value={!Util.isEmpty(this.state.dateTime) ? moment(this.state.dateTime, dayFormat) : ''} />
                            <Icon type='right' style={{ marginLeft: 10, cursor: 'pointer' }} onClick={this.changeTime.bind(this, 'right')} />
                        </Col>
                        <Col style={{ marginTop: 5 }}>
                            {this.setMessage('AppointTreatPageinterval', 'descripts')}
                            <Select placeholder={this.setMessage('AppointTreatPageperiod', 'descripts')} style={{ width: '78%' }} onChange={this.changeTimeRang.bind(this)}
                                getPopupContainer={triggerNode => triggerNode.parentNode} value={this.state.timeRangeId}>
                                {timeRangeOption}
                            </Select>
                        </Col>
                        <Col style={{ marginTop: 5 }}>
                            {this.setMessage('AppointTreatPageDoctor', 'descripts')}
                            <Select placeholder={this.setMessage('AppointTreatPageselecta', 'descripts')} style={{ width: '80%' }} showSearch
                                allowClear={true}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                value={this.state.doctorID}
                                onChange={this.changeDoctorId.bind(this, 'doctorID')}
                                getPopupContainer={triggerNode => triggerNode.parentNode}>
                                {doctorOption}
                            </Select>
                        </Col>
                    </div>

                    <div style={{ height: '86%', marginTop: 5, overflow: 'auto' }}>
                        {doctorListOption}
                    </div>
                </Card>
            </div>
        )
    }
}
export default Form.create()(AppointTreatPage);