/**
 * 挂号查询
 *
 */

import React from 'react';
import { Card, Input, Select, Row, Col, Checkbox, Button, message, Switch, Tooltip, DatePicker } from 'antd';
import { Util, dateFormat, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import RangeDatePicker from 'components/rangePicker/index';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
// import { handleExcel } from 'tools/handleExcel.js';
import ReadCard from 'components/readcard/ReadCard';
import ShowReceptionModal from './component/ShowReceptionModal';
import { PAGE_NUM_MORE_STATUS } from 'tools/statusConstants';
import ShowBackNumModal from './component/ShowBackNumModal';
import store from 'store';
import moment from 'moment';
import './style/index.less';

// const { RangePicker } = DatePicker;
// const InputGroup = Input.Group;
const Option = Select.Option;
const Search = Input.Search;
class QueryRegistrationPage extends React.Component {
    constructor(props) {
        var userData = React.$getSessionData();
        super(props)
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 20,
            size: 'small',
            userData: userData,
            exportData: [],
            exportLoading: false,
            column: [],
            widthTotal: 0,
            isTime: true,
            // isAdm: true,
            searchID: "reg",
            regDis: false,
            bookDis: true,
            regDateFrom: undefined,
            regDateTo: undefined,
            locId: "",
            isShowBackNumModal: false,
            reAdmList: [], // 初复诊
            reAdm: undefined,
        }
    }

    componentDidMount() {
        this.initData();
        this.loadCardType();
        this.loadMethodData();//获取预约方式
        this.loadRegistrWay();//挂号类型
        this.loadRegistrStatus();//挂号状态
        this.loadDepartMent()
        this.loadPayWay()
        this.loadUnawares()//获取接待人数据
        this.loadResTypeCodeList()
        this.getOrderTimeDay()
        this.loadDoctorId()
        this.loadSourceID()
        this.loadConfigFee()
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 85 + 'px';
        // document.querySelector('.registr-select-body .ant-card-body').style.padding = "8px 24px 8px";
        var date = new Date();
        this.setState({
            regDateFrom: moment(date).startOf('day').format(dateFormat),
            regDateTo: moment(date).format(dayFormat) + ' 23:59:59',
        }, () => {
            this.loadData();
        })
    }

    //获取接待人
    loadUnawares() {
        var params = {
            params: [{}]
        }
        $http.post('urlDeault', this, {
            code: "03040036",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        unawaresList: res.result,
                    })
                }
            }
        });
    }

    //获取服务类型
    loadResTypeCodeList() {
        var params = {
            params: [{
                hospID: React.$getSessionData()?.hospID || '',
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100079",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        resTypeCodeList: res.result,
                    })
                }
            }
        });
    }

    loadDepartMent() {
        var params = {
            params: [{
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040005",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        departMentData: res.result.Data
                    })
                }
            }
        });
    }

    //获取挂号医生信息
    loadDoctorId() {
        var params = {
            params: [{
                locID: this.state.locId ? this.state.locId : this.state.userData.locID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03020058",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        depDoctorData: res.Data
                    })
                }
            }
        });
    }
    //获取渠道来源
    loadSourceID() {
        var params = {
            params: [{
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050175",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        sourceData: res.result.data
                    })
                }
            }
        });
    }


    initData = () => {
        let data = {
            params: [{
                compontName: "QueryRegistrationPage",
                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 == 'Receptionist') {
                            dynColumns.push({
                                title: columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: columns[i].width || 100,
                                align: columns[i].align || 'center',
                                render: (text, data) => {
                                    return (
                                        <Tooltip title={text}>
                                            <span
                                                className='ellipsis'
                                                style={{ color: '#1890ff', cursor: 'pointer', width: '100%', display: 'inline-block' }}
                                                onClick={this.showReceptionModal.bind(this, data)}
                                            >
                                                {data.Receptionist}
                                            </span>
                                        </Tooltip>
                                    )
                                }
                            })
                        } else if (columns[i].dataIndex == 'retNmb') {
                            dynColumns.push({
                                title: columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: columns[i].width || 100,
                                align: columns[i].align || 'center',
                                render: (text, data) => {
                                    return (
                                        <Tooltip title={text}>
                                            <span
                                                className='ellipsis'
                                                style={{ color: data.retNumObj && data.retNumObj.cancleRegFlag == 'Y' ? '#1890ff' : '#999999', cursor: 'pointer', width: '100%', display: 'inline-block' }}
                                                onClick={data.retNumObj && data.retNumObj.cancleRegFlag == 'Y' ? this.showBackNumModal.bind(this, data.retNumObj) : null}
                                            >
                                                退号
                                            </span>
                                        </Tooltip>
                                    )
                                }
                            })
                        } else if (columns[i].dataIndex == 'admFlag') {
                            dynColumns.push({
                                title: columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: columns[i].width || 100,
                                align: columns[i].align || 'center',
                                render: (text, data) => {
                                    return (
                                        <Tooltip title={text}>
                                            <span className='ellipsis' style={{ color: this.colorSwitch(data.admFlag), width: '100%', display: 'block' }}>{text}</span>
                                        </Tooltip>
                                    )
                                }
                            })
                        } else {
                            dynColumns.push({
                                title: columns[i].title,
                                dataIndex: columns[i].dataIndex,
                                width: columns[i].width || 100,
                                align: columns[i].align || 'center',
                                sorter: columns[i].dataIndex == 'dateTime' ? true : false,
                                render: (text, record) => {
                                    return (
                                        <Tooltip title={text}>
                                            <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                                        </Tooltip>
                                    );
                                },
                            })
                        }
                    }
                    this.setState({
                        column: dynColumns,
                        widthTotal: res.totalWidth
                    })
                    this.props.hanlderThis && this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })
    }

    //配置收费
    loadConfigFee() {
        var params = {
            params: [{
                logonHospID: this.state.userData.hospID,
                logonGroupID: this.state.userData.groupID,
                logonUserID: this.state.userData.userID,
                invTypeCode: 'R',
                menuType: this.state.userData.defaultMenuType
            }]
        }
        $http.post('urlDeault', this, {
            code: "05210001",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.state.groupConfig = res.groupConfig
                    this.state.sysConfig = res.sysConfig
                    this.state.currentInvNoInfo = res.currentInvNoInfo
                    this.state.registerInfo = res.registerInfo
                    this.state.newPayWay = res.groupConfig.HBOPConfigPaymode[0].Reg
                }
            }
        });
    }

    //退号
    showBackNumModal(data) {
        console.log("data", data)
        if (this.state.groupConfig) {
            if (this.state.groupConfig.IfAbortFlag !== 'Y' && data.SFlag !== 'A') {
                message.error('暂无作废权限，无法进行退号')
                return
            } else if (this.state.groupConfig.IfStrikeFlag !== 'Y' && data.SFlag !== 'S') {
                message.error('暂无红冲权限，无法进行退号')
                return
            }
        }

        if (!Util.isEmpty(this.state.registerInfo) && this.state.registerInfo.noChargeFlag == 'Y') {
            this.setState({
                recordData: data
            }, () => {
                this.registrBackNum()
            })
        } else {
            var params = {
                params: [{
                    recodeIDStr: data.recordID
                }]
            }
            $http.post('urlDeault', this, {
                code: "05210008",
                data: params,
                success: function (res) {
                    if (res.errorCode === '0') {
                        this.setState({
                            registrFee: res.chargeAmtInfo[0]
                        })
                    }
                }
            });
            this.setState({
                recordData: data
            }, () => {
                this.setState({
                    isShowBackNumModal: true
                })
            })

        }
    }

    //退号
    registrBackNum = (id) => {
        let { recordData } = this.state
        var params = {
            params: [{
                admID: recordData.admID || '',
                repaywID: id,
                pcFlag: "Y"
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040016",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    message.success('退号成功！')
                    this.hideModal('isShowBackNumModal')
                    this.loadData();
                    this.setState({
                        recordData: {}
                    })
                }
            }
        });
    }

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

    showReceptionModal(data) {
        console.log("data", data)
        this.setState({
            isShowReceptionModal: true,
            ReceptionistID: data.ReceptionistID,
            admID: data.admID
        })
    }

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

    loadData(page = 1, pageSize, e) {
        const { reAdm } = this.state;
        this.setState({ loading: true })
        var params = {
            params: [{
                searchType: this.state.searchID,//查询类型
                cardTypeID: this.state.carTypeDr ? this.state.carTypeDr : (this.state.cardStatus),//卡类型
                cardNo: this.state.cardNo,//卡号
                number: this.state.number,//卡号/手机号
                regDateFrom: this.state.regDateFrom,//开始日期
                regDateTo: this.state.regDateTo,//结束日期
                // statusID: this.state.status,//挂号状态
                // admFlag: this.state.isAdm ? "Y" : "N",//是否就诊
                admStatus: this.state.status, // 就诊状态，替代挂号状态和是否就诊标志
                bookMethodID: this.state.bookmethodDr,//预约方式
                regTitleID: this.state.regTitle,
                timeRangeID: this.state.orderTimeDayId,//预约时段
                bookDateFlag: this.state.isTime ? "Y" : "N",//是否按预约时间
                bookFlag: this.state.checked ? 'Y' : 'N',
                patTypeID: this.state.patTypeID,//病人类型
                locID: this.state.locId,
                docID: this.state.depDoctorId,
                userID: this.state.selectID,
                payMethodID: this.state.payMethodID,
                deskClerk: this.state.deskClerk,
                resTypeCode: this.state.resTypeCode,
                regWay: this.state.regDis === false ? this.state.regWay : '', // 挂号方式
                reAdm, // 初复诊
                // patSourceID:this.state.sourceID
            }],
            pagination: [{
                pageSize: this.state.size == 'small' ? this.state.pageSize : PAGE_NUM_MORE_STATUS[0].code,
                currentPage: page,
                sortColumn: this.state.sortColumn,
                sortOrder: this.state.sortOrder
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050164",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        dataSource: res.result && res.result.data ? Util.addKeyValueToDataSource(res.result.data) : [],
                        bookCount: res.result.bookCount,
                        cancelCount: res.result.cancelCount,
                        totalCount: res.result.totalCount,
                        windowCount: res.result.windowCount,
                        total: res.result.totalCount,
                        search: e,
                        page: page,
                        loading: false
                    })
                }
            }
        });
    }

    loadExportMsg() {
        var params = {
            params: [{
                cardTypeID: this.state.carTypeDr ? this.state.carTypeDr : (this.state.cardStatus),//卡类型
                cardNo: this.state.cardNo,//卡号
                number: this.state.number,//卡号/手机号
                regDateFrom: this.state.regDateFrom,//开始日期
                regDateTo: this.state.regDateTo,//结束日期
                // statusID: this.state.status,//挂号状态
                admStatus: this.state.status, // 就诊状态，替代挂号状态和是否就诊标志
                bookMethodID: this.state.bookmethodDr,//预约方式
                regTitleID: this.state.regTitle,
                bookFlag: this.state.checked ? 'Y' : 'N',
                locID: this.state.locId,
                docID: this.state.depDoctorId,
                userID: this.state.selectID,
                payMethodID: this.state.payMethodID,
                deskClerk: this.state.deskClerk,
                resTypeCode: this.state.resTypeCode,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040045",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        exportData: res.FileURL,
                        exportLoading: false,
                    }, () => {
                        // handleExcel.exportExcel(this.state.column, this.state.exportData, '挂号查询表格')
                        this.downloadFile()
                        message.success('导出成功！')
                    })
                } else {
                    this.setState({
                        exportLoading: false
                    })
                }
            }
        });
    }

    downloadFile() {
        let windowHost = window.location && window.location.origin ? window.location.origin : (window.location && window.location.protocol ? (window.location.protocol + '//' + window.location.hostname) : "");
        try {
            var elemIF = document.createElement('iframe');

            elemIF.src = windowHost + this.state.exportData;

            elemIF.style.display = 'none';

            document.body.appendChild(elemIF);

            // 防止下载两次

            setTimeout(function () {

                document.body.removeChild(elemIF)

            }, 1000);

        } catch (e) {

            console.log(e);

        }
    }

    onExportData() {
        this.setState({
            exportLoading: true,
        }, () => {
            this.loadExportMsg()
        })
    }

    //获取卡类型
    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({
                        reAdmList: res?.reAdm || [],
                        cardTypeData: res.cardType,
                        credTypeData: res.credType,
                        patTypeData: res.patType,
                        sexData: res.sex,
                        socialStatusData: res.patSocialStatusDesc,
                        cardStatus: cardStatus,
                        readMode: readMode,
                        cardLength: cardLength,
                        replaceZero: replaceZero,
                    })
                }
            }
        });
    }

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

    loadEnterData(page, e) {
        if (e.keyCode == '13') {
            this.setState({//自动补0，渲染到组件中
                cardNo: this.state.replaceZero == 'Y' ? (Array(parseInt(this.state.cardLength)).join(0) + this.state.cardNo).slice(-parseInt(this.state.cardLength)) : this.state.cardNo
            })
            var params = {
                params: [{
                    cardTypeID: this.state.carTypeDr ? this.state.carTypeDr : this.state.cardStatus,//卡类型
                    cardNo: this.state.replaceZero == 'Y' ? (Array(parseInt(this.state.cardLength)).join(0) + this.state.cardNo).slice(-parseInt(this.state.cardLength)) : this.state.cardNo,//卡号
                    number: this.state.number,//卡号/手机号
                    regDateFrom: this.state.regDateFrom,//开始日期
                    regDateTo: this.state.regDateTo,//结束日期
                    // statusID: this.state.status,//挂号状态
                    admStatus: this.state.status, // 就诊状态，替代挂号状态和是否就诊标志
                    bookMethodID: this.state.bookmethodDr,//预约方式
                    regTitleID: this.state.regTitle,
                    bookFlag: this.state.checked ? 'Y' : 'N'
                }],
                pagination: [{
                    pageSize: this.state.pageSize,
                    currentPage: page
                }]
            }
            $http.post('urlDeault', this, {
                code: "03040010",
                data: params,
                success: function (res) {
                    if (res.errorCode === '0') {
                        this.setState({
                            dataSource: res.result && res.result.data ? Util.addKeyValueToDataSource(res.result.data) : [],
                            bookCount: res.result.bookCount,
                            cancelCount: res.result.cancelCount,
                            totalCount: res.result.totalCount,
                            windowCount: res.result.windowCount,
                            total: res.result.totalCount,
                        })
                    }
                }
            });
        }
    }

    //获取预约方式
    loadMethodData() {
        var params = {
            params: []
        }
        $http.post('urlDeault', this, {
            code: "01040033",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        methodData: res.method
                    })
                }
            }
        });
    }

    //获取挂号类型
    loadRegistrWay() {
        var params = {
            params: [{
                activeFlag: '1'
            }]
        }
        $http.post('urlDeault', this, {
            code: "03020004",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        registrWayData: res.result.Data
                    })
                }
            }
        });
    }
    //获取预约时段
    getOrderTimeDay() {
        var params = {
            params: [{
                hospID: React.$getSessionData()?.hospID || '', // hospId--> hospID
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040010",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        orderTimeDayArr: res.timeRange
                    })
                }
            }
        });
    }
    //挂号状态
    loadRegistrStatus() {
        var params = {
            params: []
        }
        $http.post('urlDeault', this, {
            code: "01040061",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        // registrStatus: res.status
                        registrStatus: res?.admFlag || ''
                    })
                }
            }
        });
    }

    //挂号时间选择
    changeRegistrTime = (date, dateStr) => {
        this.setState({
            regDateFrom: dateStr[0],
            regDateTo: dateStr[1]
        })
    }

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

    //公共下拉框选择
    handleSelectChange(name, e) {
        var id = '';
        if (e) {
            id = e.substring(e.indexOf('^') + 1)
        }
        this.setState({
            [name]: id
        })
    }

    changeDepartMent(e) {
        var id = '';
        // if (e) {
        //     id = e.substring(e.indexOf('^') + 1)
        // }
        this.setState({
            locId: e,
        }, () => {
            this.loadDoctorId();
        })
    }

    changeDepDoctor(e) {
        var id = '';
        if (e) {
            id = e.substring(e.indexOf('*') + 1);
        }
        this.setState({
            depDoctorId: id,
        })
    }

    handleChange = (pagination, filters, sorter) => {
        if (!Util.isEmpty(sorter)) {
            this.setState({
                sortOrder: sorter.order == 'descend' ? 'desc' : 'asc',
                sortColumn: sorter.columnKey,
                page: 1
            }, () => {
                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
                })
            }
        }
    }

    loadPayWay() {
        var params = {
            params: []
        }
        $http.post('urlDeault', this, {
            code: "05100033",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        payWay: res.payMode
                    })
                }
            }
        });
    }

    loadScheduling(value) {
        var params = {
            params: [{
                userActive: 'Y',
                searchCode: value
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040015",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        selectData: res.result.Data
                    })
                }
            }
        });
    }

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

    changeScheduling(e) {
        this.setState({
            selectID: e
        }, () => {
            this.loadData()
        })
    }

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

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

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

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

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

    onSubmit(id) {
        var params = {
            params: [{
                userID: this.state.userData.userID,
                admID: this.state.admID,
                deskClerkID: id
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040037",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('修改成功！')
                    this.hideModal('isShowReceptionModal')
                    this.loadData(1, '', 'search')
                }
            }
        });
    }
    handleSwithChange = (v, t) => {
        if (t == "isTime") {
            this.setState({
                isTime: v
            })
        }
        if (t == "isAdm") {
            this.setState({
                isAdm: v
            })
        }
    }
    //q切换查询类型
    handleSearchType = (type) => {
        const { pageSize } = this.state
        var date = new Date();
        let typeObj = {
            "reg": () => this.setState({ searchID: type, bookDis: true, regDis: false, regDateTo: moment(date).format(dateFormat) }, () => { this.loadData(1, pageSize, 'search') }),
            "book": () => this.setState({ searchID: type, bookDis: false, regDis: true, regDateTo: moment().add(7, 'days').format(dateFormat) }, () => { this.loadData(1, pageSize, 'search') }),
        }
        if (typeObj[type]) {
            typeObj[type]()
        }
    }
    // 颜色选择
    colorSwitch = (record) => {
        if (record === "已就诊") {
            return '#73d13d'
        }
        if (record === "已退号") {
            return 'red'
        }
        return ''
    }

    // 选中行操作
    setRowClassNamePublic = (record) => {
        return record?.admFlag === '未就诊' ? 'optometry-add-row-color' : (record?.admFlag === '已退号' ? 'common-row-color-ff868c' : '');
    }

    render() {
        const { page, total, dataSource, column, widthTotal, loading, reAdmList } = this.state;
        // let searchColConfig = {
        //     xs: { span: 24 },
        //     sm: { span: 12 },
        //     md: { span: 10 },
        //     lg: { span: 4 }
        // }
        // let searchColConfigTime = {
        //     xs: { span: 24 },
        //     sm: { span: 12 },
        //     md: { span: 10 },
        //     lg: { span: 3 }
        // }

        // let searchOtherColConfig = {
        //     xs: { span: 24 },
        //     sm: { span: 12 },
        //     md: { span: 10 },
        //     lg: { span: 3 }
        // }
        //卡类型
        let cardTypeOption = []
        this.state.cardTypeData && this.state.cardTypeData.map((item, index) => {
            cardTypeOption.push(<Option key={index} value={item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //预约方式 / 挂号方式
        let methodDataOption = []
        this.state.methodData && this.state.methodData.map((item, index) => {
            methodDataOption.push(<Option key={index} value={item.descripts + '^' + item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //挂号类型
        let registrWayDataOption = []
        this.state.registrWayData && this.state.registrWayData.map((item, index) => {
            registrWayDataOption.push(<Option key={index} value={item.descripts + '^' + item.id} name={item.descripts} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        // 就诊状态
        let registrStatusOption = []
        this.state.registrStatus && this.state.registrStatus.map((item, index) => {
            registrStatusOption.push(<Option key={index} value={item.descripts + '^' + item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //获取科室信息
        let departMentOption = []
        this.state.departMentData && this.state.departMentData.map((item, index) => {
            departMentOption.push(<Option key={index} value={item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //获取科室医生信息
        let depDoctorOption = []
        this.state.depDoctorData && this.state.depDoctorData.map((item, index) => {
            depDoctorOption.push(<Option key={index} value={item.descripts + '-' + item.code + item.descriptsSPCode + '*' + item.doctorID + ''} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

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

        //操作人员
        var selectDataOption = []
        this.state.selectData && this.state.selectData.map((item, index) => {
            selectDataOption.push(<Option key={index} value={item.userID} >{item.userDesc}</Option>)
        })

        //支付方式
        var payWayOption = []
        this.state.payWay && this.state.payWay.map((item, index) => {
            payWayOption.push(<Option key={index} value={item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //预约时段
        let orderTimeDayOp = []
        this.state.orderTimeDayArr && this.state.orderTimeDayArr.map(item => {
            orderTimeDayOp.push(<Option key={item.id} value={item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //病人类型
        let patTypeOp = []
        this.state.patTypeData && this.state.patTypeData.map((item, index) => {
            patTypeOp.push(<Option key={index} value={item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //渠道来源
        let sourceOp = []
        this.state.sourceData && this.state.sourceData.map((item, index) => {
            sourceOp.push(<Option key={index} value={item.id} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //服务类型
        let resTypeCodeOption = []
        this.state.resTypeCodeList && this.state.resTypeCodeList.map((item, index) => {
            resTypeCodeOption.push(<Option key={index} value={item.code} code={item.descripts} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //查询类型 searchArr
        let searchArr = [
            {
                id: "reg",
                descripts: "挂号查询",
                descriptsSPCode: "01",
            }, {
                id: "book",
                descripts: "预约查询",
                descriptsSPCode: "02",
            },
        ]
        //查询类型
        let searchOp = []
        searchArr && searchArr.map(item => {
            searchOp.push(<Option key={item.id} onClick={() => this.handleSearchType(item.id)} value={item.id}>{item.descripts}</Option>)
        })

        /**
         * @shizi: 新增入库过滤条件menuFlag
         * Create 2021-05-12
         */
        let param = {
            // 表头配置
            columns: column,
            // 表格数据
            data: dataSource,
            // 数据总条数
            total,
            // 当前页数
            page,
            pageSize: "20",
            loading,
            isOnHeadRow: true,
            // 表格的宽度
            x: widthTotal,
            y: store.getState().tableHeight.y + 62,
            height: store.getState().tableHeight.y + 107 + 'px'
        }

        return (<div style={{ background: '#F5F7FE', width: '100%' }} className='registr-select-body'>
            <ReadCard ref={ref => this.readCard = ref}></ReadCard>
            <ColumnAuthoritysModel
                clientWidth='800px'
                compontName="QueryRegistrationPage"
                configType="C"
                onRef={this.onColumnRef}
                reloadData={this.initData}
            />
            {/**接待人弹框 */}
            <ShowReceptionModal isShow={this.state.isShowReceptionModal}
                onSubmit={this.onSubmit.bind(this)}
                ReceptionistID={this.state.ReceptionistID}
                onHide={this.hideModal.bind(this, 'isShowReceptionModal')}>
            </ShowReceptionModal>
            <Card style={{ float: 'left', width: '20%', height: store.getState().tableHeight.y + 242 }}>
                <Row gutter={15}>
                    {/* <Col {...searchColConfig}>
                        查询类型：<Select style={{ width: '180px' }} placeholder='请选择查询类型'
                            filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            defaultValue="reg"
                            getPopupContainer={triggerNode => triggerNode.parentNode}
                            onChange={Util.handleSelectChange.bind(this, 'searchID')}>
                            {searchOp}
                        </Select>
                    </Col> */}
                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'查询类型：'} disabled />
                            <Select style={{ width: '69.9%' }} placeholder='请选择查询类型' className='express-select-border'
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                defaultValue="reg"
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                onChange={Util.handleSelectChange.bind(this, 'searchID')}>
                                {searchOp}
                            </Select>
                        </Input.Group>
                    </Col>
                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'卡类型：'} disabled />
                            <Select style={{ width: '69.9%' }} placeholder='请选择卡类型' className='express-select-border'
                                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>
                        </Input.Group>
                    </Col>
                    <Col span={24}>
                        <Search className={this.state.readMode == 'R' ? 'disable-input-title' : ''}
                            placeholder={'请输入卡号或读卡'} style={{ width: '100%' }}
                            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={24}>
                        <Input.Group>
                            <RangeDatePicker
                                showTime={true}
                                isChange={true}
                                format="YYYY-MM-DD HH:mm:ss"
                                width="100%"
                                minWidth="150px"
                                className='express-select-border'
                                startDate={this.state.regDateFrom}
                                endDate={this.state.regDateTo}
                                startChange={this.startChange.bind(this)}
                                endChange={this.endChange.bind(this)}
                            />
                            {/* <RangePicker
                                style={{ width: '100%' }}
                                showTime={{ format: 'HH:mm:ss' }}
                                format="YYYY-MM-DD HH:mm:ss"
                                placeholder={['开始时间', '结束时间']}
                                value={[moment(this.state.regDateFrom, dateFormat), moment(this.state.regDateTo, dateFormat)]}
                                onChange={this.changeRegistrTime} /> */}
                        </Input.Group>
                    </Col>
                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'人员标识：'} disabled />
                            <Input onChange={Util.commonInputChange.bind(this, 'number')} allowClear={true}
                                onKeyDown={this.searchPatientMsg.bind(this)}
                                placeholder='病人ID/姓名/身份证号码/手机号码' style={{ width: '69.9%' }} />
                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'状态：'} disabled />
                            <Select style={{ width: '69.9%' }} placeholder='请选择状态' className='express-select-border'
                                allowClear
                                showSearch
                                disabled={this.state.regDis}
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                onChange={this.handleSelectChange.bind(this, 'status')}>
                                {registrStatusOption}
                            </Select>
                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'类型：'} disabled />
                            <Select style={{ width: '69.9%' }} placeholder='请选择挂号/预约类型' className='express-select-border'
                                allowClear
                                showSearch
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                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
                                }
                                onChange={this.handleSelectChange.bind(this, 'regTitle')}>
                                {registrWayDataOption}
                            </Select>
                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'科室：'} disabled />
                            <Select placeholder='挂号/预约科室' style={{ width: '69.9%' }} className='express-select-border'
                                onChange={this.changeDepartMent.bind(this)} showSearch={true}
                                ref={this.textInput}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                allowClear={true} getPopupContainer={triggerNode => triggerNode.parentNode}>
                                {departMentOption}
                            </Select>
                        </Input.Group>
                    </Col>
                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'医生：'} disabled />
                            <Select placeholder='挂号/预约医生' style={{ width: '69.9%' }} className='express-select-border'
                                onChange={this.changeDepDoctor.bind(this)} showSearch={true}
                                ref={this.textSelect}
                                allowClear={true} getPopupContainer={triggerNode => triggerNode.parentNode}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {depDoctorOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'操作人员：'} disabled />
                            <Select placeholder='请输入工号/姓名/拼音查询' style={{ width: '69.9%' }} showSearch
                                onSearch={this.handleSearch.bind(this)} allowClear className='express-select-border'
                                defaultActiveFirstOption={false}
                                showArrow={false}
                                filterOption={false}
                                disabled={this.state.regDis}
                                onChange={this.changeScheduling.bind(this)}>{selectDataOption}</Select>

                        </Input.Group>
                    </Col>


                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'支付方式：'} disabled />
                            <Select style={{ width: '69.9%' }} className='express-select-border' placeholder='请选择支付方式'
                                allowClear showSearch
                                disabled={this.state.regDis}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                onChange={Util.handleSelectChange.bind(this, 'payMethodID')}>
                                {payWayOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'挂号方式：'} disabled />
                            <Select style={{ width: '69.9%' }} className='express-select-border' placeholder='请选择挂号方式'
                                allowClear showSearch
                                disabled={this.state.regDis}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                onChange={Util.handleSelectChange.bind(this, 'regWay')}>
                                {methodDataOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input style={{ width: '30%', textAlign: 'right' }} className='express-input-disable-other' value={'预约方式：'} disabled />
                            <Checkbox onChange={Util.commonCheckbox.bind(this, 'checked')} style={{ marginLeft: 5 }} />
                            <Select style={{ width: '62%', marginLeft: 5 }} placeholder='请选择预约方式'
                                allowClear
                                showSearch
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                onChange={this.handleSelectChange.bind(this, 'bookmethodDr')}>
                                {methodDataOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'病人类型：'} disabled />
                            <Select style={{ width: '69.9%' }} className='express-select-border' placeholder='请选择病人类型'
                                allowClear showSearch
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                onChange={Util.handleSelectChange.bind(this, 'patTypeID')}>
                                {patTypeOp}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'时段：'} disabled />
                            <Select style={{ width: '69.9%' }} className='express-select-border' placeholder='请选择时段'
                                allowClear showSearch
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                onChange={Util.handleSelectChange.bind(this, 'orderTimeDayId')}>
                                {orderTimeDayOp}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'接待人员：'} disabled />
                            <Select style={{ width: '69.9%' }} className='express-select-border' getPopupContainer={triggerNode => triggerNode.parentNode}
                                placeholder='请选择接待人员' allowClear showSearch
                                disabled={this.state.regDis}
                                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.deskClerk}
                                onChange={Util.handleSelectChange.bind(this, 'deskClerk')}>
                                {unawaresListOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'服务类型：'} disabled />
                            <Select style={{ width: '69.9%' }} className='express-select-border' placeholder='请选择服务类型'
                                allowClear showSearch
                                // disabled={this.state.regDis}
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                value={this.state.resTypeCode}
                                onChange={Util.handleSelectChange.bind(this, 'resTypeCode')}>
                                {resTypeCodeOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'初复诊：'} disabled />
                            <Select
                                style={{ width: '69.9%' }}
                                className='express-select-border'
                                placeholder='请选择'
                                allowClear
                                showSearch
                                value={this.state.reAdm}
                                onChange={Util.handleSelectChange.bind(this, 'reAdm')}
                            >
                                {React.$SelectOptions(reAdmList)}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={24}>
                        按预约时间查询：<Switch style={{ marginRight: 20 }} disabled={this.state.bookDis} checkedChildren="是" unCheckedChildren="否" checked={this.state.isTime} onChange={(val) => this.handleSwithChange(val, 'isTime')} />
                        {/* 状态中已经包含是否就诊帅选，这个不要了 */}
                        {/* 是否就诊：<Switch checkedChildren="是" unCheckedChildren="否" checked={this.state.isAdm} onChange={(val) => this.handleSwithChange(val, 'isAdm')} /> */}
                    </Col>
                    {/* <Col {...searchColConfig}>
                        渠道来源：<Select style={{ width: 180 }} getPopupContainer={triggerNode => triggerNode.parentNode}
                             allowClear showSearch
                            filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            onChange={Util.handleSelectChange.bind(this, 'sourceID')}>
                            {sourceOp}
                        </Select>
                    </Col> */}

                    <Col span={24}>
                        <Button type='primary' style={{ width: '46%' }}
                            onClick={this.loadData.bind(this, 1, '', 'search')}>查询</Button>
                        <Button style={{ width: '46%', marginLeft: 10 }} loading={this.state.exportLoading}
                            onClick={this.onExportData.bind(this)}>导出</Button>
                    </Col>
                </Row>
            </Card>
            <Card style={{ float: 'right', width: '79.7%', height: store.getState().tableHeight.y + 242 }}>
                <div className="flex-between-center">
                    <div className="registr-select-title">
                        {this.state.bookDis ? (<>
                            <span>当前日期范围：<span>{this.state.regDateFrom + " - " + this.state.regDateTo}</span></span>
                            <div>总人数：<span style={{ color: '#007AFF' }}>{this.state.totalCount ? this.state.totalCount : 0}</span></div>
                            <div>预约取号：<span style={{ color: '#00C197' }}>{this.state.bookCount ? this.state.bookCount : 0}</span></div>
                            <div>当日取号：<span style={{ color: '#F9B122' }}>{this.state.windowCount ? this.state.windowCount : 0}</span></div>
                            <div>今日退号：<span style={{ color: '#FF0000' }}>{this.state.cancelCount ? this.state.cancelCount : 0}</span></div>
                        </>) : ''}
                    </div>
                    <div style={{ paddingRight: '12px', color: '#999', fontWeight: 'normal' }} className="flex-align-items">
                        <span className="common-record-color-notes" style={{ background: '#b9eddf' }}></span>未就诊
                        <span className="common-record-color-notes" style={{ background: '#ff868c', marginLeft: '12px' }}></span>已退号
                    </div>
                </div>

                <PubilcTablePagination
                    param={param}
                    compilePage={this.changePageSize}
                    onClickHeadRowPublic={() => {
                        return {
                            onDoubleClick: () => {
                                this.columnRef.onOpenModel();
                            },
                        };
                    }}
                    setRowClassNamePublic={this.setRowClassNamePublic}
                />
            </Card>
            {/**退号 */}
            <ShowBackNumModal isShow={this.state.isShowBackNumModal}
                registrFee={this.state.registrFee}
                recordData={this.state.recordData}
                onSubmit={this.registrBackNum.bind(this)}
                onHide={this.hideModal.bind(this, 'isShowBackNumModal')}>
            </ShowBackNumModal>
        </div>)

    }
}

export default QueryRegistrationPage;
