/**
 * 视频通话 --图文咨询
 */

import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Modal,
    DatePicker, Button, Switch, Icon, Divider, message, Pagination, Tooltip, Radio,
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ReadCard from 'components/readcard/ReadCard';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';
import RangeDatePicker from 'components/rangePicker/index';
import { PAGE_NUM_MORE_STATUS } from 'tools/statusConstants';
import ShowVideoCallModal from './ShowVideoCallModal';
import ShowRefuseReasonModal from './ShowRefuseReasonModal';
import { callNumberSocket } from 'tools/callNumber.js';
import moment from 'moment';
import store from 'store';
import '../style/index.less';
import autoprefixer from 'autoprefixer';

const { RangePicker } = DatePicker;
const Search = Input.Search;
const Option = Select.Option;
var leftImg = require('../image/left.png');
var rightImg = require('../image/right.png');

class GraphicConsultationTabPane extends React.Component {

    constructor(props) {
        super(props);
        var date = new Date();
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var titleData = JSON.parse(sessionStorage.getItem('titleData'))
        var recordData = JSON.parse(sessionStorage.getItem('patientData'));
        if (!recordData) {
            recordData = JSON.parse(sessionStorage.getItem('recordData'));
        }
        var newDate = date.setMonth(date.getMonth() - 1);
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 20,
            size: 'small',
            curPageDetail: PAGE_NUM_MORE_STATUS[0].code,
            recordData: recordData,
            userData: userData,
            rotaRight: 0,
            SS: 1,
            i: 0,
            S: 1,
            firstIndex: 0,
            f: 0,
            x: 100,
            y: 0,
            imageSource: []
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShowModal === true) {
        } else if (this.props.isShow === false) {
            this.cleanInput();
        }
    }

    componentDidMount() {
        this.props.onRef(this)
        // this.loadData();
        this.initData();
        this.loadCardType()
        this.loadColumnMsg()//获取列头统计状态
        this.getBindInfo();
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y - 80 + 'px';
    }
    componentWillUnmount() {
        callNumberSocket.colse();
    }
    closeModal(name) {
        let { onHide } = this.props;
        onHide && onHide('isShowOutPatientModal');
        this.cleanInput();
    }

    //清空输入框
    cleanInput() {
        var date = new Date()
        var newDate = date.setMonth(date.getMonth() - 1);
        var dateTime = new Date()
        this.setState({
            ids: [],
            admID: '',
            leftData: [],
            rightData: [],
            admDateFrom: moment(newDate).format(dayFormat),
            admDateTo: moment(dateTime).format(dayFormat)
        })
    }

    initData() {
        let data = {
            params: [{
                compontName: "VideoConsultationTabPane",
                type: "C",
                reactCode: ['OutPatientPage']
            }]
        }
        $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: 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,
                        localeProvider: this.state.userData.language == 'EN' ? res.result.language.EN : res.result.language.CN
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })

    }

    loadData(page, pageSize, e, status) {
        var date = new Date();
        var params = {
            params: [{
                patCardTypeID: this.props.patCardTypeID,
                patCardNo: this.props.patCardNo,
                number: this.props.number,
                statusCode: this.state.statusCode,
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                locID: this.state.userData.locID,
                dateFrom: this.state.admDateFrom ? this.state.admDateFrom : moment(moment().subtract(2, 'days')).format(dayFormat),
                dateTo: this.state.admDateTo ? this.state.admDateTo : moment(date).format(dayFormat),
            }],
            pagination: [{
                pageSize: this.state.size == 'small' ? this.state.pageSize : PAGE_NUM_MORE_STATUS[0].code,
                currentPage: page
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100011",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.initData()
                    this.reloadCOlumns()
                    this.setState({
                        dataSource: res.result.data,
                        total: res.result.totalCount,
                        // rowId: res.result.data && res.result.data.length > 0 ? res.result.data[0].patAdmID : '',
                        page: page,
                        search: e,
                        rowId: '',
                        faceData: res.result.data && res.result.data.length > 0 ? res.result.data[0] : '',
                    }, () => {
                        if (status == 'face' && res.result.data && res.result.data.length > 0) {
                            let patientData = {}
                            patientData = {
                                admID: this.state.faceData.admID,
                                patID: this.state.faceData.patAdmID,
                            }
                            sessionStorage.setItem('patientData', JSON.stringify(patientData));
                            var { loadTitleData } = this.props;
                            loadTitleData && loadTitleData();
                            this.loadGetPatient(res.result.data[0])
                        }
                    })
                }
            }
        });
    }

    reloadCOlumns() {
        var date = new Date();
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                locID: this.state.userData.locID,
                dateFrom: this.state.admDateFrom ? this.state.admDateFrom : moment(moment().subtract(2, 'days')).format(dayFormat),
                dateTo: this.state.admDateTo ? this.state.admDateTo : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100010",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        columnMsg: res.result,
                    })
                }
            }
        });
    }

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

    loadColumnMsg() {
        var date = new Date();
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                locID: this.state.userData.locID,
                dateFrom: this.state.admDateFrom ? this.state.admDateFrom : moment(moment().subtract(2, 'days')).format(dayFormat),
                dateTo: this.state.admDateTo ? this.state.admDateTo : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100010",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    var source = res.result
                    var statusCode = ''
                    if (!Util.isEmpty(source)) {
                        for (var i = 0; i < source.length; i++) {
                            if (!Util.isEmpty(source[i].defaultFlag) && source[i].defaultFlag == 'Y') {
                                statusCode = source[i].statusCode
                            }
                        }
                    }
                    this.setState({
                        columnMsg: res.result,
                        statusCode: statusCode
                    }, () => {
                        this.loadData(1);
                    })
                }
            }
        });
    }

    //获取卡类型
    loadCardType() {
        var params = {
            params: [{
                cardTypeFlag: '1',//卡类型
            }]
        }
        $http.post('urlDeault', this, {
            code: "03030005",
            data: params,
            success: function (res) {
                var cardStatus = '', replaceZero = '', cardLength = '', readMode = ''
                if (res.errorCode == '0') {
                    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,
                        cardStatus: cardStatus,
                        readMode: readMode,
                        cardLength: cardLength,
                        replaceZero: replaceZero,
                    })
                }
            }
        });
    }
    getBindInfo() {
        let data = {
            params: [{
                dataID: "8",
                hospID: this.state.userData.hospID,
                purCode: "purCode",
            }]
        }
        $http.post('urlDeault', this, {
            code: "04150007",
            data: data,
            success: (res) => {
                if (res.errorCode == '0') {
                    if (res.result.serverIP != undefined) {
                        callNumberSocket.init(res.result.serverIP, res.result.serverPort);
                        this.setState({
                            bindInfo: res.result,
                        })
                    }
                }
            }
        })
    }
    //叫号
    loadCallNum() {
        console.log("Graph");
        var params = {
            params: [{
                locID: this.state.userData.locID,
                userID: this.state.userData.userID,
                docID: this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050006",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    // message.success('叫号成功')
                    message.success(this.setMessage('OutPatientPageCalled', 'descripts'), this.state.userData && this.state.userData.messageTime)
                    this.loadData()
                }
            }
        });
    }

    //过号
    loadPassNum() {
        var params = {
            params: [{
                locID: this.state.userData.locID,
                userID: this.state.userData.userID,
                docID: this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050007",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    // message.success('过号成功')
                    message.success(this.setMessage('OutPatientPageOperation', 'descripts'), this.state.userData && this.state.userData.messageTime)
                    this.loadData()
                }
            }
        });
    }

    startChange(date) {
        this.setState({
            admDateFrom: date,
        })
    }

    endChange(date) {
        this.setState({
            admDateTo: date,
        })
    }

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

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

    //接诊
    loadGetPatient(record) {
        var params = {
            params: [{
                admID: this.state.rowId,
                userID: this.state.userData.userID,
                hospID: this.state.userData.hospID,
                locID: this.state.userData.locID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100060",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    // message.success('接诊成功')
                    this.loadData(1)
                    this.loadPatientMsg(record)
                }
            }
        });
    }


    loadPatientMsg(record) {
        var params = {
            params: [{
                patID: record.patID,
                admID: record.id,
                locID: this.state.userData.locID,
                userID: this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050021",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    sessionStorage.setItem('titleData', JSON.stringify(res.data))
                    this.setState({
                        titleData: res.data,
                    }, () => {
                        var { loadPatientMsg } = this.props;
                        loadPatientMsg && loadPatientMsg(res.data, record)

                    }
                    )
                }
            }
        });
    }

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onDoubleClick: () => {
                this.setState({
                    patAdmID: record.admID
                });
                this.loadVoiceCall()
                // var { showVoiceChatModal } = this.props;
                // showVoiceChatModal && showVoiceChatModal(this.state.statusNote, this.state.rowId, this.state.chatPatID)
                // this.loadGetPatient(record)
            },
            onClick: () => {
                var patientData = {}
                patientData = {
                    admID: record.admID,
                    patID: record.patID
                }
                sessionStorage.setItem('patientData', JSON.stringify(patientData))
                this.setState({
                    rowId: record.admID,
                    record: record,
                    chatPatID: record.patID,
                    refuseCode: record.statusCode,
                    statusNote: record.status//获取图文咨询弹框里的状态
                }, () => {
                    var { loadTitleData } = this.props;
                    loadTitleData && loadTitleData()
                    this.loadVideoChatMsg()
                })
            },
            onKeyDown: () => {
                this.setState({
                    patAdmID: record.admID
                });
                this.loadGetPatient(record)
            }
        };
    }

    //提交
    onSubmit() {
        // let { onSubmit } = this.props;

        // onSubmit && onSubmit(admID, ids);
        this.loadGetPatient(this.state.record)
    }

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

    commonCheckbox(name, e) {
        this.setState({
            [name]: e
        }, () => {
            this.loadData(1, '', 'search')
        })
    }

    handleReadCard() {
        var cardType = this.state.patCardTypeID ? this.state.patCardTypeID : (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()
            })
        })
    }
    onColumnRef = (ref) => {
        this.columnRef = ref;
    }

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

    loadKeyDown(e) {
        if (e.keyCode == '13') {
            this.setState({//自动补0，渲染到组件中
                patCardNo: this.state.replaceZero == 'Y' ? (Array(parseInt(this.state.cardLength)).join(0) + this.state.patCardNo).slice(-parseInt(this.state.cardLength)) : this.state.patCardNo
            }, () => {
                this.loadData(1)
            })
        }
    }

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

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

    //图文咨询,先接诊
    loadVoiceCall() {
        this.setState({
            showVoiceChatModal: true
        }, () => {
            var { showVoiceChatModal } = this.props;
            showVoiceChatModal && showVoiceChatModal(this.state.statusNote, this.state.rowId, this.state.chatPatID)
        })
        // var params = {
        //     params: [{
        //         admID: this.state.rowId,
        //         userID: this.state.userData.userID,
        //         hospID: this.state.userData.hospID,
        //         locID: this.state.userData.locID,
        //     }]
        // }
        // $http.post('urlDeault', this, {
        //     code: "03100060",
        //     data: params,
        //     success: function (res) {
        //         if (res.errorCode == '0') {
        //             this.setState({
        //                 showVoiceChatModal: true
        //             }, () => {
        //                 var { showVoiceChatModal } = this.props;
        //                 showVoiceChatModal && showVoiceChatModal(this.state.statusNote, this.state.rowId, this.state.chatPatID)
        //             })
        //         }
        //     }
        // });
    }

    loadVideoChatMsg() {
        var params = {
            params: [{
                admID: this.state.rowId,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100070",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    var image = []
                    var source = []
                    if (!Util.isEmpty(res.result) && !Util.isEmpty(res.result.imageAddress)) {
                        image = (res.result.imageAddress).split('&');
                    }
                    if (!Util.isEmpty(image)) {
                        for (var i = 0; i < image.length; i++) {
                            if (!Util.isEmpty(image[i])) {
                                source.push(image[i])
                            }
                        }
                    }
                    this.setState({
                        detailMessage: res.result,
                        imageSource: source
                    })
                }
            }
        });
    }

    //获取列状态的radio
    loadColumnsRadioMsg() {
        var columnsMsg = []
        this.state.columnMsg && this.state.columnMsg.map((item, index) => {
            columnsMsg.push(<Radio.Button key={index} value={item.statusCode}>{item.descripts} {'('} {item.count}{')'}</Radio.Button>)
        })
        return columnsMsg
    }

    commonInputChange(name, e) {
        this.setState({
            [name]: e.target.value,
            rowId: undefined,
            detailMessage: ''
        }, () => {
            this.loadData(1)
        })
    }

    //拒绝接诊
    refusesalReceive() {
        this.setState({
            isShowRefuseReasonModal: true
        })
    }

    handleRefuseReason(reasonID, reasonNote) {
        var params = {
            params: [{
                admID: this.state.rowId,
                userID: this.state.userData.userID,
                hospID: this.state.userData.hospID,
                locID: this.state.userData.locID,
                groupID: this.state.userData.groupID,
                reasonID: reasonID,
                reasonNote: reasonNote
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100057",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('拒绝接诊成功', this.state.userData && this.state.userData.messageTime)
                    this.hideModal('isShowRefuseReasonModal')
                    //拒绝接诊发IM消息
                    var { handlerefuseMsg } = this.props;
                    handlerefuseMsg && handlerefuseMsg(this.state.chatPatID)
                    this.loadData(1)
                }
            }
        });
    }

    loadImageMsg() {
        var imageAddress = []
        //图片截取
        if (!Util.isEmpty(this.state.detailMessage) && !Util.isEmpty(this.state.detailMessage.imageAddress)) {
            var image = (this.state.detailMessage.imageAddress).split('&');
            image && image.map((item, index) => {
                if (!Util.isEmpty(item)) {
                    imageAddress.push(<img scr={item} key={index} className='img-bgd-style' style={{
                        width: '150px', height: 150, background: `url(${item})`,
                        cursor: 'pointer'
                    }} alt=''
                        onClick={this.handleShowModal.bind(this, item, index)} />)
                }
            })
        }
        return imageAddress
    }

    handleShowModal = (imgPath, index) => {
        this.setState({ visible: true, imgPath, firstIndex: index, f: index })
    }

    handleClose = () => {
        this.setState({
            visible: false, rotaRight: 0, SS: 1,
            i: 0,
            S: 1,
            f: 0,
            x: 100,
            y: 0
        })
    }

    //顺时针旋转
    rotateright = () => {
        this.setState({ rotaRight: this.state.rotaRight + 90 })
        this.refs.imgstyle.style.transform = "translate(-50% ,-50%) rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")"
    }

    //放大
    showbig = () => {
        if (this.state.i >= 0) {
            this.setState({ S: this.state.S + 1, i: this.state.i + 1, SS: 1 * (this.state.S + 1) })
        } else {
            this.setState({ S: this.state.S - 1, i: this.state.i + 1, SS: 1 / (this.state.S - 1) })
        }
        this.refs.imgstyle.style.transform = "translate(-50% ,-50%) rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")"
    }

    //缩小
    showmin = () => {
        if (this.state.i <= 0) {
            this.setState({ S: this.state.S + 1, i: this.state.i - 1, SS: 1 / (this.state.S + 1) })
        } else {
            this.setState({ S: this.state.S - 1, i: this.state.i - 1, SS: 1 * (this.state.S - 1) })
        }
        this.refs.imgstyle.style.transform = "translate(-50% ,-50%) rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")"
    }

    handleShowChangeImgBtn() {
        this.setState({
            showImg: true
        })
    }

    handleHideImgBtn() {
        this.setState({
            showImg: false
        })
    }

    //向左预览
    leftshow = () => {
        if (this.state.f == 0) {
            return
            this.setState({ f: this.state.imageSource.length, R: 0, S: 1, i: 0, SS: 1 })
        } else {
            this.setState({ f: this.state.f - 1, R: 0, S: 1, i: 0, SS: 1 })
        }
        this.refs.imgstyle.setAttribute('src', this.state.imageSource[this.state.f])
        this.setState({})
    }

    //向右预览
    rightshow = () => {
        if (this.state.f == this.state.imageSource.length - 1) {
            return
            this.setState({ f: 0, R: 0, S: 1, i: 0, SS: 1 })
        } else {
            this.setState({ f: this.state.f + 1, R: 0, S: 1, i: 0, SS: 1 })
        }
        this.refs.imgstyle.setAttribute('src', this.state.imageSource[this.state.f])
        this.setState({})
    }

    onWheel = () => {
        this.state.SS += event.wheelDelta / 1200;
        if (this.state.SS >= 0.2) {
            this.refs.imgstyle.style.transform = "scale(" + this.state.SS + ")";
        } else {
            this.state.SS = 0.2;
            this.refs.imgstyle.style.transform = "scale(" + this.state.SS + ")";
            return false;
        }
    }

    moveImg = (ev) => {

        const { x, y } = this.state

        ev.preventDefault()

        var disx = ev.pageX - x

        var disy = ev.pageY - y

        document.onmousemove = (ev) => {

            // this.setState({

            //     x: ev.pageX - disx,

            //     y: ev.pageY - disy

            // })
            this.state.x = ev.pageX - disx
            this.state.y = ev.pageY - disy
            this.refs.imgstyle.style.left = ev.pageX - disx + 'px'
            this.refs.imgstyle.style.top = ev.pageY - disy + 'px'

        }

        document.onmouseup = () => {

            document.onmousemove = null

            document.onmousedown = null

        }
    };

    // 一键退号
    oneClickBack = Util.debounce(() => {
        var params = {
            params: [{
                locID: this.state.userData.locID,
                userID: this.state.userData.userID,
                docID: this.state.userData.userID,
                admID: !Util.isEmpty(this.state.record) ? this.state.record.admID : undefined
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050279",
            data: params,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success(res.errorMessage, this.state.userData && this.state.userData.messageTime);
                    this.loadData();
                }
            }
        });
    });

    render() {
        var date = new Date();

        //卡类型
        let cardTypeOption = []
        this.state.cardTypeData && this.state.cardTypeData.map((item, index) => {
            cardTypeOption.push(<Option key={index} value={item.id}>
                <Tooltip title={this.state.userData.language == 'EN' ? item.enDescripts : item.descripts}>
                    {this.state.userData.language == 'EN' ? item.enDescripts : item.descripts}</Tooltip></Option>)
        })

        return <div style={{ background: '#F5F7FE' }} className='outpatient-body'>
            <div>
                {/**读卡 */}
                <ReadCard ref={ref => this.readCard = ref}></ReadCard>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="VideoConsultationTabPane"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.initData}
                />

                {/**拒绝原因 */}
                <ShowRefuseReasonModal isShow={this.state.isShowRefuseReasonModal}
                    onHide={this.hideModal.bind(this, 'isShowRefuseReasonModal')}
                    onSubmit={this.handleRefuseReason.bind(this)}>
                </ShowRefuseReasonModal>
                <div style={{ display: 'flex', background: 'white', height: 40, lineHeight: '40px', borderTop: '1px solid #e8e8e8' }}>
                    <Col span={6} style={{ marginTop: 3, marginLeft: 5 }}>
                        <Input.Group style={{ display: 'flex' }}>
                            <div style={{ width: '37%' }}>
                                <Input className='express-input-disables' style={{ width: '100%' }}
                                    value={'问诊日期：'} disabled />
                            </div>
                            <div>
                                <RangeDatePicker label={''} format='YYYY-MM-DD' width={'100%'}
                                    locale={this.state.userData.language} className='express-select-border'
                                    startDate={moment(moment().subtract(2, 'days')).format(dayFormat)} endDate={moment(date).format(dayFormat)}
                                    startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                            </div>
                        </Input.Group>
                        {/* <RangeDatePicker label={'问诊日期：'} format='YYYY-MM-DD' width={300}
                            locale={this.state.userData.language}
                            startDate={moment(moment().subtract(2, 'days')).format(dayFormat)} endDate={moment(date).format(dayFormat)}
                            startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} /> */}
                    </Col>

                    <Col span={4} style={{ marginLeft: 10 }}>
                        <Button className='register-saveButton' type='primary' onClick={this.loadData.bind(this, 1, '', 'search')}>
                            {this.setMessage('OutPatientPagesearch', 'descripts')}</Button>

                        {/* 一键退号 */}
                        <Button
                            style={{
                                background: !Util.isEmpty(this.state.rowId) ? "#fab926" : '#f5f5f5',
                                color: !Util.isEmpty(this.state.rowId) ? 'white' : "rgba(0, 0, 0, 0.25)",
                                marginLeft: 12
                            }}
                            className="patient-saveButton"
                            onClick={this.oneClickBack}
                            disabled={!Util.isEmpty(this.state.rowId) ? false : true}
                        >
                            一键退号
                        </Button>
                    </Col>
                    <Col span={10}>
                        <Radio.Group onChange={this.commonInputChange.bind(this, 'statusCode')}
                            value={this.state.statusCode}>
                            {this.loadColumnsRadioMsg()}
                        </Radio.Group>
                    </Col>

                    <div>
                        <Button type='primary' disabled={Util.isEmpty(this.state.rowId) || this.state.refuseCode == 'RR'
                            || this.state.refuseCode == 'F'}
                            onClick={this.loadVoiceCall.bind(this)}>开始接诊</Button>
                        <Button style={{ marginLeft: 10 }} type='danger' disabled={Util.isEmpty(this.state.rowId)
                            || this.state.refuseCode == 'RR' || this.state.refuseCode == 'A'
                            || this.state.refuseCode == 'F'}
                            onClick={this.refusesalReceive.bind(this)}>拒绝接诊</Button>
                    </div>
                </div>

                <div style={{ background: 'rgb(241, 241, 241)' }} className='video-card-title'>
                    <div style={{ float: 'left', width: '80%', borderRight: '1px solid #e8e8e8', borderBottom: '1px solid #e8e8e8' }}>
                        <Table columns={this.state.column} style={{ background: 'white', height: store.getState().tableHeight.y - 30 + 'px' }}
                            dataSource={this.state.dataSource}
                            loadData={this.loadData.bind(this)}
                            onRow={this.onClickRow} bordered
                            rowClassName={this.setRowClassName}
                            // title={() => {
                            //     return ()
                            // }}
                            rowKey={(data) => {
                                return data.admID
                            }}
                            // scroll={{ y: store.getState().tableHeight.y + 'px' }}
                            scroll={{ y: store.getState().tableHeight.y - 80 + 'px' }}
                            onHeaderRow={column => {
                                return {
                                    onDoubleClick: () => {
                                        this.columnRef.onOpenModel();
                                    },
                                };
                            }}

                            pagination={false}>
                        </Table>
                        <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total}
                            search={this.state.search} pageSize={true}
                            onShowSizeChange={this.changePageSize.bind(this)} complete={true} dataSource={this.state.dataSource}
                            onChange={this.onChange.bind(this)} />
                    </div>

                    <Card style={{ height: store.getState().tableHeight.y + 9 + 'px', float: 'right', width: '19.9%', overflow: 'auto' }}
                        title={<span style={{ textAlign: 'center' }}>问诊详情</span>}>
                        {
                            this.state.refuseCode == 'RR' ? <div>
                                <div>
                                    <span style={{ color: '#999999' }}>当前状态：</span>
                                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.queueStatus : '--'}</span>
                                </div>
                                <div style={{ marginTop: 10 }}>
                                    <span style={{ color: '#999999' }}>取消原因：</span>
                                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.reasonNote : '--'}</span>
                                </div>
                            </div> : null
                        }
                        {this.state.refuseCode == 'RR' ? null : <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>距离取消：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.countdown : '--'}</span>
                        </div>}
                        <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>预约时间：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? (this.state.detailMessage.admDate + '   ' + this.state.detailMessage.admTime) : '--'}</span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>问诊类型：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.admType : '--'}</span>
                        </div>
                        {/* <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>患病时长：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.illnessTime : '--'}</span>
                        </div> */}
                        <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>病情描述：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.symptom : '--'}</span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>疾病描述：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.DiseaseDesc : '--'}</span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>过敏描述：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.AllergyDesc : '--'}</span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            {/* <img scr={!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.imageAddress : ''} /> */}
                            {this.loadImageMsg()}
                        </div>
                    </Card>
                </div>
            </div>
            {/* </Modal> */}
            <Modal
                visible={this.state.visible}
                title='图片预览' maskClosable={false}
                onCancel={this.handleClose}
                imageSource={this.state.imageSource}
                firstIndex={this.state.firstIndex}
                bodyStyle={{ padding: 5, overflow: 'hidden', maxHeight: '700px', maxWidth: '700px', minHeight: 500 }}
                footer={<div>
                    <Icon type="zoom-in" style={{ fontSize: '24px', cursor: 'pointer' }} onClick={this.showbig} title='放大' />
                    <Icon type="zoom-out" style={{ marginLeft: 10, fontSize: '24px', cursor: 'pointer' }} onClick={this.showmin} title='缩小' />
                    <Icon type='reload' style={{ marginLeft: 10, fontSize: '24px', cursor: 'pointer' }} onClick={this.rotateright} title='旋转' />
                    <a style={{ color: 'inherit' }} href={this.state.imgPath} target="_blank"><Icon type='download' style={{ marginLeft: 10, fontSize: '24px', cursor: 'pointer' }} title='下载' /></a>
                </div>}
                className="crc-modal"
            >
                <div className="crc-m-content" style={{ height: 680 }}>
                    <img onMouseDown={this.moveImg} onWheel={this.onWheel}
                        src={this.state.imageSource[this.state.f]} className="imgstyle" alt="" style={{
                            width: 'auto', cursor: 'pointer', height: 'auto', maxHeight: '100%', maxWidth: '100%',
                            transform: " rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")",
                            left: this.state.x + 'px', top: this.state.y + 'px'
                        }}
                        ref='imgstyle' />
                    <div style={{ position: 'absolute', top: '50%', left: 10, zIndex: 20, cursor: 'pointer' }}
                        onClick={this.leftshow.bind(this)}>
                        <img src={leftImg} />
                    </div>
                    <div style={{ position: 'absolute', top: '50%', right: 10, zIndex: 20, cursor: 'pointer' }}
                        onClick={this.rightshow.bind(this)}>
                        <img src={rightImg} />
                    </div>
                </div>
            </Modal>
        </div>
    }
}

export default Form.create()(GraphicConsultationTabPane);
