/**
 * 处理医嘱清单
 */
import React from 'react';
import {
    Modal, Row, Col, Select, Card, Radio, Input, Button, Tree, Icon, Tag, Table,
    Divider, message, DatePicker
} from 'antd';
import { Util, dayFormat, timeFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ReadCard from 'components/readcard/ReadCard';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const RadioButton = Radio.Button;
const confirm = Modal.confirm;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const { TreeNode } = Tree;

class ShowAppointApplicationModal extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var date = new Date()
        this.state = {
            userData: userData,
            radioValue: '1',
            ids: [],
            dataSource: [],
            dateTime: moment(date).format(dayFormat),
            bookScheduleID:[]
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            this.loadCardType()
            this.loadModalColumns()
            this.loadTimeRange()
            this.getDoctor()
            this.loadScheduling()
        } else if (this.props.isShow === false) {
            this.clearInput()
        }
    }

    //查询时段服务
    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
                    })
                }
            }
        });
    }

    loadApplicationProgram(value) {
        var params = {
            params: [{
                searchCode: value
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050171",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        appProgram: res.result.data
                    })
                }
            }
        });
    }

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

    clearInput() {
        this.setState({
            doctorList: [],
            appProgram: [],
            patientMsg: '',
            timeRangeId: undefined,
            doctorID: undefined,
            admID:undefined,
            bookScheduleID:[]
        })
    }

    loadModalColumns() {
        this.sunColumns = [
            {
                title: '项目',
                dataIndex: 'ordDesc',
                width: 120,
                align: 'left',
            }, {
                title: '预约时间',
                dataIndex: 'bookDateTime',
                width: 150,
                align: 'left',
            }, {
                title: '预约医生',
                dataIndex: 'bookDoctorDesc',
                width: 100,
                align: 'left',
            }, {
                title: '预约状态',
                dataIndex: 'bookStatusDesc',
                width: 100,
                align: 'left',
            }
        ]
    }

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

    //获取建卡后跳转过来信息
    searchBuildCardMsg() {
        var params = {
            params: [{
                number: this.state.number,
                cardTypeID: this.state.carTypeDr ? this.state.carTypeDr : (this.state.cardStatus),
                cardNo: this.state.cardNo
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040004",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        patientMsg: res.data,
                    })
                }
            }
        });
    }

    handleReadCard() {
        var cardType = this.state.carTypeDr ? this.state.carTypeDr : (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()
            })
        })
    }
    //切换卡类型
    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
                })
            }
        }
    }

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

    //获取医生排班信息
    loadScheduling() {
        var params = {
            params: [{
                cureAppID: this.state.cureAppID,
                timeRangeID: this.state.timeRangeId,
                doctorID: this.state.doctorID,
                medicalNo: this.state.medicalNo,
                date: this.state.dateTime,
                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') {
                    this.setState({
                        doctorList: res.result.data
                    })
                }
            }
        });
    }

    closeModal(name) {
        let { onHide } = this.props;
        onHide && onHide();
    }

    onSubmit() {
        var { onSubmit } = this.props;
        onSubmit && onSubmit()
    }

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

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

    handleSearch(value) {
        if (value.length >= 2) {
            this.loadApplicationProgram(value)
        }
    }

    changeScheduling(e) {
        this.setState({
            medItemID: e
        }, () => {
            this.loadScheduling()
        })
    }

    //获取医生排班信息
    loadScheduling() {
        var params = {
            params: [{
                cureAppID: this.state.cureAppID,
                timeRangeID: this.state.timeRangeId,
                doctorID: this.state.doctorID,
                medicalNo: this.state.medicalNo,
                date: this.state.dateTime,
                locID: this.state.userData.locID,
                hospID: this.state.userData.hospID,
                medItemID: this.state.medItemID
            }]
        }
        $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
                    })
                }
            }
        });
    }

    loadOrderModal(data) {
        // this.setState({
        //     resDetailID: item.resDetailID,
        //     isShowToOrderModal: true
        // })
        if (parseInt(data.registedNum) >= parseInt(data.registNum)) {
            message.error('号源已满，请选择其他科室或者坐诊医生');
            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,
                    })
                }
            }
        });
    }

    addBackground(data, index) {
        this.setState({
            rowId: index,
            code: data.id
        })
    }

    addElement(data, index, e) {
        if (e.keyCode == '13') {
            this.submitOrder(data)
        } else if (e.keyCode == '37') {//左方向键
            if (parseInt(this.state.rowId) - 1 < 0) {
                this.setState({//当向左移动已无数据时，默认第一个数据
                    rowId: '0'
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) - 1
                })
            }
        } else if (e.keyCode == '38') {//上方向键
            if (parseInt(this.state.rowId) - 4 < 0) {
                this.setState({//当上移已无数据时，默认当前数据
                    rowId: index
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) - 4
                })
            }
        } else if (e.keyCode == '39') {//右方向键schedulData
            if (parseInt(this.state.rowId) + 1 == this.state.orderData.resDetail.length) {
                this.setState({//当右移大于当前数据的长度时，默认当前数据
                    rowId: index
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) + 1
                })
            }
        } else if (e.keyCode == '40') {//下方向键
            if (parseInt(this.state.rowId) + 4 >= this.state.orderData.resDetail.length) {
                this.setState({//当下移大于当前数据的长度时，默认当前数据
                    rowId: index
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) + 4
                })
            }
        }
    }

    //双击去预约
    submitOrder(data) {
        if(Util.isEmpty(this.state.patientMsg)){
            message.error('请先录入病人信息！')
            return
        }
        var params = {
            params: [{
                timeRangeStr: data.id,
                admID:this.state.admID,
                resDetailID: this.state.resDetailID,
                medItemID: this.state.medItemID,
                patID:this.state.patientMsg?this.state.patientMsg.patID:''
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050172",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    message.success('预约成功')
                    this.setState({
                        resTimeID:data.id,
                        admID:res.admID
                    })
                    this.loadLeftTable()
                }
            }
        });
    }

    handleCannelOrder() {
        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.loadLeftTable()
                    })
                }
            }
        });
    }

    loadLeftTable() {
        var params = {
            params: [{
                resTimeID: this.state.resTimeID,
                admID:this.state.admID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050174",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        dataSource:res.result.data,
                        unPayPrice: res.result.unPayPrice
                    })
                }
            }
        });
    }

    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('预约时间不能小于当前时间！')
                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()
            })
        }
    }

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

    render() {
        var { doctorList,bookScheduleID} = 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 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 timeRangeOption = []
        this.state.timeRange && this.state.timeRange.map((item, index) => {
            timeRangeOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
        })
        //申请单项目
        let appProgramOption = []
        this.state.appProgram && this.state.appProgram.map((item, index) => {
            appProgramOption.push(<Option key={index} value={item.medItemID}>{item.medItemDesc}</Option>)
        })

        const rowBottomSelection = {
            bookScheduleID,
            onChange: this.onSelectBottomChange.bind(this),
            selectedRowKeys: bookScheduleID,
        }


        var doctorListOption = []
        doctorList && doctorList.map((item, index) => {
            doctorListOption.push(<Col span={6} 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: '31%', height: 90, cursor: 'pointer', marginLeft: 10, marginTop: 5 }}>
                <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>
            </Col>)
        })

        var loadOrderNum = []
        if (!Util.isEmpty(this.state.orderData)) {
            var resDetail = this.state.orderData.resDetail;
            resDetail && resDetail.map((item, index) => {
                loadOrderNum.push(
                    <div className='order-table-body' style={{ cursor: 'pointer' }}
                        onKeyDown={this.addElement.bind(this, item, index)} tabIndex={'-1'}
                        onClick={this.addBackground.bind(this, item, index)} onDoubleClick={this.submitOrder.bind(this, item)}>
                        <div style={{ display: 'flex' }}><div className={item.workStatusCode == 'S' ? 'stop-order-num' :
                            (item.workStatusCode == 'F' ? 'full-order-num' : '')}></div>
                            <div className={item.workStatusCode == 'N' ? 'order-table-disable' : 'order-table-title'}>{item.timeDetail}</div></div>
                        <div style={{ background: index == this.state.rowId ? '#bfe6f8' : '' }}><div>已用号源/总号源</div>
                            {index == this.state.rowId ? <div style={{ display: 'flex', marginLeft: 50 }}>{item.regResources}
                                <Button autoFocus={true} style={{ border: '0', height: 10, background: '#bfe6f8' }}></Button></div> :
                                <div>{item.regResources}</div>}
                        </div>
                    </div>
                )
            })
        }

        return <div className='show-application-modal'>
            <ReadCard ref={ref => this.readCard = ref}></ReadCard>
            <Modal className='collections-modal-body'
                title={'新建预约申请'}
                maskClosable={false}
                visible={this.props.isShow}
                footer={null}
                onOk={this.onSubmit.bind(this)}
                onCancel={this.closeModal.bind(this)}>
                <div style={{ height: '60vh', width: '100%' }}>
                    <div style={{ width: '35%', float: 'left', background: 'white', height: '60vh' }}>
                        <Row>
                            <Col style={{ marginLeft: 5, marginTop: 5 }}>
                                卡类型：<Select style={{ width: '100px' }} placeholder='请选择卡类型'
                                    allowClear showSearch
                                    value={this.state.carTypeDr ? this.state.carTypeDr : (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, 'carTypeDr')}>
                                    {cardTypeOption}
                                </Select>
                                <Search className={this.state.readMode == 'R' ? 'disable-input-title' : ''}
                                    placeholder={'请输入卡号或读卡'} style={{ width: '60%', 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 style={{ marginLeft: 5, marginTop: 5 }} span={14}>
                                人员标识：<Input onChange={Util.commonInputChange.bind(this, 'number')} allowClear={true}
                                    value={this.state.number}
                                    onKeyDown={this.loadEnterData.bind(this)}
                                    placeholder='病人ID/身份证号码' style={{ width: '70%' }} />
                            </Col>

                            <Col style={{ marginLeft: 5, marginTop: 5 }} span={9}>
                                住院号：<Input placeholder='请输入' style={{ width: '65%' }} />
                            </Col>
                        </Row>

                        <div style={{ height: 80, background: '#F6FCF9', textAlign: 'center', marginTop: 5 }}>
                            <div style={{ height: 79, display: 'flex', float: 'left' }}>
                                <div className={this.state.patientMsg && this.state.patientMsg.patSexCode == '1' ?
                                    'splice-boy' : (this.state.patientMsg && this.state.patientMsg.patSexCode == '2' ? 'splice-girl' : 'splice-other')}></div>
                                <div style={{ height: 79, borderRight: '1px solid #EEEEEE' }}></div>
                                {!Util.isEmpty(this.state.patientMsg) ? <div style={{ fontSize: '16px' }}>
                                    <div style={{ padding: '10px 0 0 10px' }}>
                                        <span style={{ color: '#333333', fontWeight: 'bold' }}>{this.state.patientMsg ? this.state.patientMsg.patName || '--' : '--'}</span><Divider type="vertical" />
                                        <span>{this.state.patientMsg ? this.state.patientMsg.patSexDesc || '--' : '--'}</span><Divider type="vertical" />
                                        <span>{this.state.patientMsg ? this.state.patientMsg.patAge || '--' : '--'}</span><Divider type="vertical" />
                                        <span><Icon className='patNo-splice' />{this.state.patientMsg ? this.state.patientMsg.patNo || '--' : '--'}</span>
                                    </div>
                                    <div style={{ fontWeight: 400, color: '#666666', fontSize: '16px', padding: '10px 0 0 10px' }}>
                                        <span><Icon className='statusdesc-splice' />{this.state.patientMsg ? this.state.patientMsg.patSocialStatusDesc || '--' : '--'}</span><Divider type="vertical" />
                                        <span><Icon className='typeDesc-splice' />{this.state.patientMsg ? this.state.patientMsg.patTypeDesc || '--' : '--'}</span><Divider type="vertical" />
                                        <span>
                                            <span style={{ color: '#1999db' }}><Icon className='account-splice' />{this.state.patientMsg ? this.state.patientMsg.accountBalance || '--' : 0}</span> </span>
                                    </div>
                                </div> : <span style={{ color: '#999999', lineHeight: '79px' }}>{'暂无相关数据～'}</span>}
                            </div>
                        </div>

                        <Table columns={this.sunColumns} dataSource={this.state.dataSource} className='application-table-title'
                            bordered rowSelection={rowBottomSelection}
                            rowKey={(data)=>{
                                return data.bookScheduleID
                            }}
                            title={() => {
                                return <div>
                                    <span className='collection-list-left'></span>
                                    <span style={{ marginLeft: 10, color: '#1999db' }}>预约记录</span>
                                    <span style={{ marginLeft: 10, color: '#666666', fontWeight: 'bold' }}>未收费（元）：
                                    <span style={{ color: '#1999db' }}>{this.state.unPayPrice || '0'}</span>
                                    </span>
                                    <Button size='small' style={{ marginLeft: 10 }}>卡消费</Button>
                                    <Button size='small' type='primary' style={{ marginLeft: 10 }}onClick={this.handleCannelOrder.bind(this)}>取消预约</Button>
                                </div>
                            }}
                            pagination={false}>

                        </Table>
                    </div>
                    <div style={{ width: '64.5%', float: 'right', background: 'white', height: '60vh' }} className='application-right-card'>
                        <Card style={{ height: '37vh' }} title={<div>
                            <span className='collection-list-left' style={{ marginTop: 2 }}></span>
                            <span style={{ marginLeft: 10 }}>选择预约项目及医生</span>
                        </div>}>
                            <Row>
                                <Col span={10}>
                                    申请项目：<Select placeholder='请输入申请项目模糊查询' style={{ width: '70%' }} showSearch
                                        onSearch={this.handleSearch.bind(this)}
                                        defaultActiveFirstOption={false}
                                        showArrow={false}
                                        filterOption={false}
                                        onChange={this.changeScheduling.bind(this)}>{appProgramOption}</Select>
                                </Col>
                                <Col style={{ textAlign: 'center' }} span={10}>
                                    <Icon type='left' style={{ marginRight: 10, cursor: 'pointer' }} onClick={this.changeTime.bind(this, 'left')} />
                                    <DatePicker style={{ width: '67%' }} onChange={this.changeDateTime.bind(this)}
                                        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 }} span={10}>
                                    时段：<Select placeholder='请选择时段' style={{ width: '70%' }} onChange={this.changeTimeRang.bind(this)}
                                        getPopupContainer={triggerNode => triggerNode.parentNode} value={this.state.timeRangeId}>
                                        {timeRangeOption}
                                    </Select>
                                </Col>
                                <Col style={{ marginTop: 5 }} span={10}>
                                    医生：<Select placeholder='请选择医生' style={{ width: '70%' }} 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>
                            </Row>
                            <div style={{ marginTop: 5, height: '29vh', overflow: 'auto' }}>
                                {doctorListOption}
                            </div>
                        </Card>

                        <Card style={{ height: '23vh' }} className='application-right-btn-extra' title={<div>
                            <span className='collection-list-left' style={{ marginTop: 2 }}></span>
                            <span style={{ marginLeft: 10 }}>预约时段</span>
                        </div>} extra={<span style={{ color: 'orange' }}>注：请双击选择预约时段</span>}>
                            <div className='order-num-table'>
                                {loadOrderNum}
                            </div>
                        </Card>
                    </div>
                </div>
            </Modal>
        </div>
    }
}

export default ShowAppointApplicationModal;