/**
 * 
 * 申请单
 */
import React from 'react';
import {
    Form, Row, Col, Input, Select, Button, DatePicker, Popconfirm, Modal, Table,
    Icon, Pagination, message, Divider, Tooltip, Card, Tabs
} from 'antd';
import moment from 'moment';
import { $http } from 'containers/config/https';
import { Util, dayFormat, Keup } from 'tools/index';
import RangeDatePicker from 'components/rangePicker/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';
import ShowApplicationDetailModal from '../component/ShowApplicationDetailModal';
import ShowConfirmApplicationModal from '../component/ShowConfirmApplicationModal';
import ShowCompleteTreatModal from './component/ShowCompleteTreatModal';
import ShowHistoryListModal from './component/ShowHistoryListModal';
import store from 'store';
import './style/index.less';

const FormItem = Form.Item;
const Option = Select.Option;
const { TabPane } = Tabs;
const confirm = Modal.confirm;
const Search = Input.Search;

class TreatmentRoomTabs extends React.Component {
    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'))
        var date = new Date();
        this.state = {
            userData: userData,
            total: 0,//表格总数据
            page: 1,
            pageSize: 10,
            size: "small",
            search: "",
            regDateFrom: moment(date).format(dayFormat),
            regDateTo: moment(date).format(dayFormat),
        }
    }
    componentDidMount() {
        this.loadData(1)
        this.loadDepartment()
        this.loadCardType()
        this.getTreatStatus()
        this.getOutStatus()
        this.initData()
        this.loadAcographyPage()
        this.loadReservationRecordPage()
    }

    loadHospitalData() {
        var params = {
            params: [{
                ID: this.state.cureAppID
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040169",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        hospList: res.result.dataArr,
                        totalPrice: res.result.totalPrice,
                        payPrice: res.result.unAmount,
                        unPayPrice: res.result.reAmount,
                    })
                }
            }
        });
    }

    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,
                    })
                }
            }
        });
    }

    loadData(page, pageSize, search) {
        var params = {
            params: [{
                locID: this.state.userData.locID,
                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,
                appStatusID: this.state.appStatusID,
                statusID: this.state.statusID,
                doctorID:this.state.userData.userID
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: page
            }]
        }
        $http.post('urlS', this, {
            code: '03050165',
            data: params,
            success: function (res) {
                if (res.errorCode == 0) {
                    this.setState({
                        dataSource: res.result.data,
                        totalCount: res.result.totalCount,
                        page: page,
                        search: 'search'
                    })
                }
            }
        })
    }

    loadReservationRecordPage() {
        let data = {
            params: [{
                compontName: "ReservationRecordPage",
                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++) {
                        dynColumns.push({
                            title: columns[i].title,
                            dataIndex: columns[i].dataIndex,
                            width: parseInt(columns[i].width),
                            align: columns[i].align || 'center'
                        })
                    }
                    this.setState({
                        recordColumn: dynColumns,
                        recordWidth: res.totalWidth
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })
    }

    loadAcographyPage() {
        let data = {
            params: [{
                compontName: "AcographyPage",
                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++) {
                        dynColumns.push({
                            title: columns[i].title,
                            dataIndex: columns[i].dataIndex,
                            width: parseInt(columns[i].width),
                            align: columns[i].align || 'center'
                        })
                    }
                    this.setState({
                        appColumn: dynColumns,
                        appWidth: res.totalWidth
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })
    }

    initData() {
        let data = {
            params: [{
                compontName: "WalkinApplicationPage",
                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 == 'operation') {
                            dynColumns.push({
                                title: columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center',
                            })
                        } else {
                            dynColumns.push({
                                title: columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: parseInt(columns[i].width),
                                align: columns[i].align || 'center'
                            })
                        }
                    }
                    this.setState({
                        column: dynColumns,
                        appointWidth: res.totalWidth
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })
    }

    //获取治疗状态 
    getTreatStatus() {
        let data = {}
        data = {
            params: [{

            }],
        }
        $http.post('urlS', this, {
            code: '01040176',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.result.Data) {
                    let arr = res.result.Data && res.result.Data.map((item, index) => {
                        res.result.Data[index].key = Number(index)
                    })
                    this.setState({
                        treatArr: res.result.Data,
                    })
                } else {

                }
            }
        })
    }
    //获取预约状态
    getOutStatus() {
        let data = {}
        data = {
            params: [{

            }],
        }
        $http.post('urlS', this, {
            code: '01040177',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.result.Data) {
                    let arr = res.result.Data && res.result.Data.map((item, index) => {
                        res.result.Data[index].key = Number(index)
                    })
                    this.setState({
                        outArr: res.result.Data,
                    })
                } else {

                }
            }
        })
    }

    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
                    })
                }
            }
        });
    }

    //获取卡类型
    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,
                    })
                }
            }
        });
    }

    handleCannelOrder() {
        if (Util.isEmpty(this.state.bookScheduleID)) {
            message.error('请选择您需要取消的预约数据')
            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.setState({
                        bookScheduleID: []
                    }, () => {
                        this.loadBookRecord()
                    })
                }
            }
        });
    }

    //切换卡类型
    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)
        }
    }

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

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

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

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

    onHospClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    rowIds: record.ID,
                })
            }
        };
    }

    setHospRowClassName = (record) => {
        return record.ID === this.state.rowIds ? 'clickRowStyle' : '';
    }

    onorderClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    bookScheduleID: record.bookScheduleID,
                })
            }
        };
    }

    setRoworderClassName = (record) => {
        return record.bookScheduleID === this.state.bookScheduleID ? 'clickRowStyle' : '';
    }

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

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    cureAppID: record.cureAppID,
                    patientData: record,
                    bookScheduleID: '',
                    ordDetailID: record.ordDetailID,
                    compTreat: record.compTreat,
                    rowIds:''
                }, () => {
                    this.loadBookRecord()
                    this.loadHospitalData()
                })
            },
            onDoubleClick: () => {
                this.setState({
                    isShowApplicationDetailModal: true
                })
            }
        };
    }

    handleCanceOK() {
        let data = {}
        data = {
            params: [{
                cureRecordID: this.state.rowIds,
                userID: this.state.userData.userID
            }],
        }
        $http.post('urlS', this, {
            code: '01040178',
            data: data,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success("取消完成")
                    this.loadHospitalData()
                }
            }
        })
    }

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

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

    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    onAcography = (ref) => {
        this.acography = ref;
    }
    onReservationRecord = (ref) => {
        this.reservationRecord = ref;
    }

    handleButton = (num) => {
        if (Util.isEmpty(this.state.patientData)) {
            message.error('请先选择申请单！')
            return
        }
        //策略
        let obj = {
            "4": () => this.handleOk(),
            "5": () => this.handleHistory()
        }
        if (obj[num]) {
            obj[num]()
        }
    }

    //治疗完成
    handleOk = () => {
        this.child.showModal(this.state.patientData, '')
    }
    //历次治疗单
    handleHistory = () => {
        this.hisRef.showModal(this.state.patientData, '')
    }

    // 调用子组件的连接事件 -- 添加新
    OnChildrefs = (ref) => {
        this.child = ref
    }
    // 调用子组件的连接事件 -- 历史
    OnHisRef = (ref) => {
        this.hisRef = ref
    }

    //治疗完成弹框
    handleCompleteModal() {
        this.setState({
            isShowCompleteTreatModal: true
        })
    }

    //完成治疗
    handleEndOfComplete(cureAppID, startDate, endDate, startTime, endTime, completeList, curePlan, note) {
        var source = []
        if(!Util.isEmpty(completeList)){
            for (var i = 0; i < completeList.length; i++) {
                source.push({
                    updateUserID: this.state.userData.userID,
                    locID: this.state.userData.locID,
                    cureAppID: cureAppID,
                    startDate: startDate,
                    endDate: endDate,
                    startTime: startTime,
                    endTime: endTime,
                    curePlan: curePlan,
                    note: note,
                    orderDetailID: this.state.ordDetailID,
                    evaluationID: completeList[i].ID,
                    value: completeList[i].value,
                })
            }
        }else{
            source.push({
                updateUserID: this.state.userData.userID,
                locID: this.state.userData.locID,
                cureAppID: cureAppID,
                startDate: startDate,
                endDate: endDate,
                startTime: startTime,
                endTime: endTime,
                curePlan: curePlan,
                note: note,
                orderDetailID: this.state.ordDetailID
            })
        }
        var params = {
            params: source
        }
        $http.post('urlS', this, {
            code: '01040195',
            data: params,
            success: function (res) {
                var that = this;
                if (res.errorCode == '0') {
                    message.success('治疗完成')
                    this.hideModal('isShowCompleteTreatModal')
                    this.loadHospitalData()
                    this.loadData(1)
                    // this.setState({
                    //     judge: res.judge
                    // }, () => {
                    //     if (res.judge == 'T') {
                    //         let secondsToGo = 3;
                    //         const modal = Modal.success({
                    //             title: res.errorMessage,
                    //             content: <span>弹框将在&nbsp;<span style={{ fontSize: 16, color: 'red' }}>{secondsToGo}</span>&nbsp;秒后关闭.</span>
                    //         });
                    //         const timer = setInterval(() => {
                    //             secondsToGo -= 1;
                    //             modal.update({
                    //                 content: <span>弹框将在&nbsp;<span style={{ fontSize: 16, color: 'red' }}>{secondsToGo}</span>&nbsp;秒后关闭.</span>
                    //             });
                    //         }, 1000);
                    //         setTimeout(() => {
                    //             clearInterval(timer);
                    //             modal.destroy();
                    //         }, secondsToGo * 1000);
                    //     } else {
                    //         confirm({
                    //             title: '治预约疗',
                    //             content: '本次治疗完成，是否预约下次治疗？',
                    //             okText: '是',
                    //             cancelText: '否',
                    //             onOk() {
                    //                 that.setState({
                    //                     isShowConfirmApplicationModal: true,
                    //                 })
                    //             },
                    //             onCancel() {
                    //                 console.log('Cancel');
                    //             },
                    //         });
                    //     }
                    // })
                }
            }
        })
    }

    //历史治疗单列表
    showHistoryListModal() {
        this.setState({
            isShowHistoryListModal: true
        })
    }

    render() {

        var { ids, record, rowIds } = this.state;
        //卡类型
        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 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 treatOption = []
        this.state.treatArr && this.state.treatArr.map(item => {
            treatOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
        })
        //预约状态
        let outOption = []
        this.state.outArr && this.state.outArr.map(item => {
            outOption.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
        })

        return (
            <div className='application-tabpane-body'>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="WalkinApplicationPage"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.initData}
                />
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="AcographyPage"
                    configType="C"
                    onRef={this.onAcography}
                    reloadData={this.loadAcographyPage}
                />
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="ReservationRecordPage"
                    configType="C"
                    onRef={this.onReservationRecord}
                    reloadData={this.loadReservationRecordPage}
                />
                {/**查看治疗申请单 */}
                <ShowApplicationDetailModal isShow={this.state.isShowApplicationDetailModal}
                    cureAppID={this.state.cureAppID}
                    onHide={this.hideModal.bind(this, 'isShowApplicationDetailModal')}>
                </ShowApplicationDetailModal>

                {/** 治疗完成弹框*/}
                <ShowCompleteTreatModal isShow={this.state.isShowCompleteTreatModal}
                    patientData={this.state.patientData}
                    cureAppID={this.state.cureAppID}
                    onSubmit={this.handleEndOfComplete.bind(this)}
                    onHide={this.hideModal.bind(this, 'isShowCompleteTreatModal')}>
                </ShowCompleteTreatModal>

                {/**历史治疗单 */}
                <ShowHistoryListModal isShow={this.state.isShowHistoryListModal}
                    patientData={this.state.patientData}
                    cureAppID={this.state.cureAppID}
                    onHide={this.hideModal.bind(this, 'isShowHistoryListModal')}>
                </ShowHistoryListModal>

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

                <Card>
                    <Row gutter={40}>
                        <Col span={6}>
                            卡类型：<Select style={{ width: '100px' }} placeholder='请选择卡类型'
                                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={'请输入卡号或读卡'} style={{ width: '55%', marginLeft: 10 }}
                                onChange={Util.commonInputChange.bind(this, 'cardNo')}
                                value={this.state.cardNo}
                                enterButton={'读卡'}
                                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={5}>
                            人员标识：<Input onChange={Util.commonInputChange.bind(this, 'number')} allowClear={true}
                                onKeyDown={this.loadEnterData.bind(this)}
                                placeholder='病人ID/姓名/身份证号码/手机号码' style={{ width: '70%' }} />
                        </Col>

                        <Col span={4}>
                            住院号：<Input placeholder='请输入住院号' style={{ width: '75%' }}
                                onChange={Util.commonInputChange.bind(this, 'medicalNo')} />
                        </Col>

                        <Col span={4} >
                            申请科室：<Select placeholder='请选择科室' style={{ width: '70%' }} 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={4}>
                            预约状态：<Select placeholder='请选择预约状态' style={{ width: '70%' }}
                                allowClear={true}
                                value={this.state.appStatusID}
                                onChange={Util.handleSelectChange.bind(this, 'appStatusID')}>{outOption}</Select>
                        </Col>

                        <Col span={6} style={{ marginTop: 5 }}>
                            <RangeDatePicker label='申请日期：' format='YYYY-MM-DD' width={'77%'}
                                startDate={this.state.regDateFrom} endDate={this.state.regDateTo}
                                startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                        </Col>



                        <Col span={5} style={{ marginTop: 5 }}>
                            治疗状态：<Select placeholder='请选择治疗状态' style={{ width: '70%' }}
                                allowClear={true}
                                value={this.state.statusID}
                                onChange={Util.handleSelectChange.bind(this, 'statusID')}>{treatOption}</Select>
                        </Col>

                        <Col span={6} style={{ marginTop: 5 }}>
                            <Button style={{ marginLeft: 10 }} type='primary' onClick={this.loadData.bind(this, '1')}>查询</Button>
                        </Col>

                        <Col span={4} style={{ marginTop: 5 }}>
                        </Col>
                    </Row>
                </Card>

                <Card style={{ marginTop: 5 }} extra={<div style={{ float: 'right' }}>
                    <Button type='primary' onClick={this.handleCompleteModal.bind(this)}
                        disabled={this.state.compTreat == 'T' ? false : true}>治疗完成</Button>
                    <Button style={{ marginLeft: 10 }} onClick={this.showHistoryListModal.bind(this)}
                        disabled={!Util.isEmpty(this.state.cureAppID) ? false : true}>历次治疗单</Button>
                </div>}>
                    <Table columns={this.state.column} className='appoint-treat-table-body'
                        dataSource={this.state.dataSource}
                        onRow={this.onClickRow}
                        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: '32vh' }}>
                    <Tabs type="card" size='small'>
                        <TabPane tab="治疗记录" key="1">
                            <Table columns={this.state.appColumn} className='appoint-treat-table-body'
                                dataSource={this.state.hospList}
                                onRow={this.onHospClickRow}
                                rowClassName={this.setHospRowClassName}
                                bordered
                                rowKey={(data) => {
                                    return data.ID
                                }}
                                title={() => {
                                    return <div style={{ display: 'flex' }}>
                                        <div style={{ width: '95%' }}>
                                            总金额：<span style={{ color: '#1999db', marginRight: 10 }}>{this.state.totalPrice || '0'}</span>
                                            已收费金额：<span style={{ color: '#1999db', marginRight: 10 }}>{this.state.payPrice || '0'}</span>
                                            未收费金额：<span style={{ color: '#1999db', marginRight: 10 }}>{this.state.unPayPrice || '0'}</span>
                                            <Button size='small' style={{ marginLeft: 10 }}>卡消费</Button></div>
                                        <div><Button size='small' onClick={this.handleCanceOK.bind(this)}>取消完成</Button></div>
                                    </div>
                                }}
                                scroll={{ x: this.state.appWidth, y: '30vh' }}
                                onHeaderRow={column => {
                                    return {
                                        onDoubleClick: () => {
                                            this.acography.onOpenModel();
                                        },
                                    };
                                }}
                                pagination={false}></Table>
                        </TabPane>
                        <TabPane tab="预约记录" key="2">
                            <Table columns={this.state.recordColumn} className='appoint-treat-table-body'
                                dataSource={this.state.orderList}
                                onRow={this.onorderClickRow}
                                rowClassName={this.setRoworderClassName}
                                bordered
                                rowKey={(data) => {
                                    return data.bookScheduleID
                                }}
                                title={() => {
                                    return <div style={{ textAlign: 'right' }}><Button type='primary' size='small'
                                        onClick={this.handleCannelOrder.bind(this)}>取消预约</Button></div>
                                }}
                                scroll={{ x: this.state.recordWidth, y: '30vh' }}
                                onHeaderRow={column => {
                                    return {
                                        onDoubleClick: () => {
                                            this.reservationRecord.onOpenModel();
                                        },
                                    };
                                }}
                                pagination={false}></Table>
                        </TabPane>
                    </Tabs>
                </Card>

            </div>

        )
    }
}
export default TreatmentRoomTabs    