import React from 'react';
import {
    Table, Select, Button, Input, InputNumber, Form, message, DatePicker, Pagination, Layout, Row, Col, Modal, Collapse, Tabs, Spin, List
} from 'antd';
import { $http } from '../../containers/config/https';
import './style/FindVisitorInfo.less';
import RowspanTable from './common/RowspanTable'
import moment from 'moment';

class SearchField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchFieldValue: {},
            hospOptions:[],
            locOptions:[],
            medTypeOptions:[],
            admTypeOptions:[]
        }
    }
    getInitData = () => {
        $http.post("urlS", this, {
            code: 'ceshi006',
            data: { params: [{hosp:JSON.parse(window.sessionStorage.userData).hospDr}] },
            success: function (res) {
                //console.log(res);
                let options = [],admTypeOptions=[],ordCatOpt=[];
                if (res.result.hosp) {
                    res.result.hosp.map(function (value, key) {
                        options.push(<Select.Option key={value.id}>{value.desc}</Select.Option>);
                    });
                    //console.log(options);
                }
                if(res.result.ordCat){
                    ordCatOpt.push(<Select.Option key={0} value={0}>{'全部'}</Select.Option>);
                    res.result.ordCat.map(function (value, key) {
                        ordCatOpt.push(<Select.Option key={value.id} value={value.id}>{value.descript}</Select.Option>);
                    });
                }
                if(res.result.admType){
                    res.result.admType.map(function (value, key) {
                        admTypeOptions.push(<Select.Option key={value.id}>{value.desc}</Select.Option>);
                    });
                }
                this.setState({ hospOptions: options,admTypeOptions:admTypeOptions });
                this.props.setOrdCat(ordCatOpt);
            },
            error: function (err) {
                this.setState({ errMsg: "数据加载失败，请重试!" });
            }
        });
    }
    getSelectDataByHospId(hospId){
        $http.post("urlS", this, {
            code: 'ceshi007',
            data: { params: [{hospId:hospId}] },
            success: function (res) {
                let locOptions = [], medTypeOptions=[];
                if(res.result.loc){
                    res.result.loc.map(function (value, key) {
                        locOptions.push(<Select.Option key={value.id}>{value.desc}</Select.Option>);
                    });
                }
                // if(res.result.admType){
                //     res.result.admType.map(function (value, key) {
                //         admTypeOptions.push(<Select.Option key={value.id} value={value.code}>{value.desc}</Select.Option>);
                //     });
                // }
                if (res.result.medType){
                    res.result.medType.map(function (value, key) {
                        medTypeOptions.push(<Select.Option key={value.id}>{value.desc}</Select.Option>);
                    });
                }
                this.setState({ locOptions: locOptions, medTypeOptions:medTypeOptions});
                
            },
            error: function (err) {
                
            }
        });
    }
    getTableData=(params,pagination)=>{
        this.props.setLoading(true);
        if(!pagination||Object.keys(pagination).length==0){
            pagination={current:1,pageSize:10}
        }
        $http.post("urlS", this, {
            code: 'ceshi008',
            data: { params: [params],pagination:[pagination] },
            success: function (res) {
                this.props.setData(res.result,params);
                pagination.total=res.total;
                this.props.setPagination(pagination);
                this.props.setLoading(false);
            },
            error: function (err) {
            }
        });
    }
    onHospChange=(val,opt)=>{
        //console.log(opt);
        this.getSelectDataByHospId(opt.key);
        this.props.form.resetFields(['locSelect','medTypeSelect']);
        //console.log(opt.key);
    }
    componentWillMount(){
        const session=JSON.parse(sessionStorage.userData);
        this.getSelectDataByHospId(session.hospDr);
        this.getInitData();
    }
    onClear=(e)=>{
        this.props.form.resetFields();
    }
    onSearch=(e)=>{
        this.props.form.validateFields((error,values)=>{
            if(error){
                return;
            }
            //console.log(values);
            for (let el in values){
                if (values[el]===undefined){
                    delete values[el];
                }else if(values[el]&&Object.getPrototypeOf(values[el]).constructor.name==='Moment'){
                    values[el]=values[el].format("YYYY-MM-DD");
                }
            }
            this.getTableData(values);
        })
    }
    componentDidMount(){
        //this.props.form.setFieldsValue({hospSelect:"1"});
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        const {hospOptions,locOptions,medTypeOptions,admTypeOptions}=this.state;
        const colStyle = { style: { height: '45px' } };
        const session=JSON.parse(sessionStorage.userData);
        return (
            <Form>
                <Row gutter={16}>
                    <Col span={5} {...colStyle}>
                        <Form.Item label={"医 院"} {...{ labelCol: { span: 6 }, wrapperCol: { span: 18 } }}>
                            {getFieldDecorator('hospSelect',
                                {
                                    rules: [
                                        { required: true, message: '请选择医院' }
                                    ],
                                    initialValue: session.hospDr
                                })(
                                    <Select width={80} placeholder={'请选择医院'} onChange={this.onHospChange}>
                                        {hospOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={5} {...colStyle}>
                        <Form.Item label={"科 室"} {...{ labelCol: { span: 4 }, wrapperCol: { span: 20 } }}>
                            {getFieldDecorator('locSelect',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select width={80} placeholder={'科室'} showSearch allowClear={true} optionFilterProp={'children'}>
                                        {locOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={6} {...colStyle}>
                        <Form.Item label={"身份证号"} {...{ labelCol: { span: 8, pull: 2 }, wrapperCol: { span: 16, pull: 2 }, }}>
                            {getFieldDecorator('IDCardInput',
                                {
                                    rules: [
                                        { message: '身份证格式错误', pattern: /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/ }
                                    ],
                                    //initialValue:
                                })(
                                    <Input allowClear={true} width={80} placeholder={'身份证号'} />
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={4} {...colStyle}>
                        <Form.Item label={"手机号"} {...{ labelCol: { span: 8, pull: 4 }, wrapperCol: { span: 16, pull: 3 }, }}>
                            {getFieldDecorator('phoneInput',
                                {
                                    rules: [
                                        { message: '手机号格式错误', pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ }
                                    ],
                                    //initialValue:
                                })(
                                    <Input allowClear={true} width={80} placeholder={'手机号'} />
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={3} {...colStyle}>
                        <Form.Item>
                            <Button style={{ width: '100px' }} type="primary" onClick={this.onSearch}>
                                查询
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={5} {...colStyle}>
                        <Form.Item label={"医保类型"} {...{ labelCol: { span: 9 }, wrapperCol: { span: 15 }, }}>
                            {getFieldDecorator('medTypeSelect',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select allowClear={true} width={80} placeholder={'医保类型'}>
                                        {medTypeOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={5} {...colStyle}>
                        <Form.Item label={"就诊类型"} {...{ labelCol: { span: 9, pull: 1 }, wrapperCol: { span: 15, pull: 1 } }}>
                            {getFieldDecorator('admTypeSelect',
                                {
                                    rules: [
                                        { required: false, message: '请选择就诊类型' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select allowClear={true} width={80} placeholder={'就诊类型'}>
                                        {admTypeOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={6} {...colStyle}>
                        <Form.Item label={"出院日期"} {...{ labelCol: { span: 8, pull: 2 }, wrapperCol: { span: 16, pull: 2 }, }}>
                            {getFieldDecorator('leaveDatePick',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue: moment(new Date())
                                })(
                                    <DatePicker placeholder={'出院日期'} disabledDate={(curDate)=>{
                                        return curDate && curDate > moment().endOf('day');
                                    }} />
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={4} {...colStyle}>
                        <Form.Item label={"诊断"} {...{ labelCol: { span: 8, pull: 4 }, wrapperCol: { span: 16, pull: 3 } }}>
                            {getFieldDecorator('diagInput',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select allowClear={true} width={80} placeholder={'诊断'}>
                                        {''}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={3} {...colStyle}>
                        <Form.Item>
                            <Button style={{ width: '100px' }} type="primary" onClick={this.onClear}>
                                清空
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        );
    }
}
class VisitorsInfoTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: props.dataSource || [],
            columns: props.tableColumns || [],
            seletedNow: '',
            modalVisible:false,
            modalTitle:'',
            modalData:{},
            modalLoading:false,
        }
    }
    componentWillReceiveProps(props){
        this.setState({dataSource:props.dataSource});
    }
    showModal=(record,index,event)=>{
        const title=record.PatName+'--登记号：'+record.PapmiNo+'：入院详细信息';
        this.setState({ modalVisible: true, modalTitle:title});
        this.getModalData(record.ID);
    }
    getModalData=(adm)=>{
        $http.post("urlS", this, {
            code: 'ceshi009',
            data: { params: [{adm:adm}]},
            success: function (res) {
                this.setState({modalData:res.result});
            },
            error: function (err) {
            }
        });
    }
    setVisible=(bool)=>{
        this.setState({modalVisible:bool});
    }
    handleTableChange = (pagination, filters, sorter) => {
        const pager = { ...this.props.pagination };
        pager.current = pagination.current;
        // this.setState({
        //   pagination: pager,
        // });
        this.props.getTableData(pager);
      }
    render() {
        //const { dataSource, columns } = this.state;
        const columns = [{
            title: '序号',
            dataIndex: '',
            key: 'Index',
            width: 65,
            align: 'center',
            //fixed:true
            //editable: true
            render: (text, record, index) => {
                return index + 1;
            }
        }, {
            title: '科室',
            dataIndex: 'Loc',
            key: 'Loc',
            width: 177,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '医生',
            dataIndex: 'Doctor',
            key: 'Doctor',
            width: 67,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '姓名',
            dataIndex: 'PatName',
            key: 'PatName',
            width: 69,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '登记号',
            dataIndex: 'PapmiNo',
            key: 'PapmiNo',
            width: 108,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '性别',
            dataIndex: 'Sex',
            key: 'Sex',
            width: 50,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '证件号码',
            dataIndex: 'IDCard',
            key: 'IDCard',
            width: 165,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '手机号',
            dataIndex: 'Phone',
            key: 'Phone',
            width: 139,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '地址',
            dataIndex: 'Address',
            key: 'Address',
            width: 157,
            align: 'center',
            //fixed:true
            //editable: true
        }, {
            title: '医保',
            dataIndex: 'MedIns',
            key: 'MedIns',
            align: 'center'
            //width:83,
            //fixed:true
            //editable: true
        }];
        //const dataSource = [{ID:1, Loc: '康复科', MedIns: '医保', Address: '深圳宝安', Phone: '1111111111', IDCard: '22222222222', Sex: '未知', PapmiNo: '333333333', Doctor: '123', PatName: '321' }];
        const {modalTitle,modalVisible,dataSource}=this.state;
        return (
            <div>
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    rowKey={(record) =>record.ID}
                    bordered
                    rowClassName={(record, index) => {
                        //index % 2 === 0 ? styles.bgRed : styles.bgGreen;
                        if (index % 2===0){
                            return "bg2";
                        }
                    }}
                    pagination={this.props.pagination}
                    onChange={this.handleTableChange}
                    loading={this.props.loading}
                    onRow={(record, index) => ({ onDoubleClick: (event) => { this.showModal(record,index,event) } })}
                />
                <InfoModal ordCatOpt={this.props.ordCatOpt} modalData={this.state.modalData} modalLoading={this.state.modalLoading} setVisible={this.setVisible} modalVisible={modalVisible} title={modalTitle} />
            </div>
        );

    }
}
class Diagnose extends React.Component{
    constructor(props){
        super(props);
        this.state={

        }
    }
    render(){
        const {dataSource}=this.props;
        let newDataSource=[];
        for (let key in dataSource){
            let statusArr=[];
            for (let key1 in dataSource[key]){
                statusArr.push({diagStatusDesc:key1,ICDDescList: dataSource[key][key1]});
            }
            newDataSource.push({diagTypeDesc:key,statusArr:statusArr});
        }
        return (
            // <div>
            //     初步诊断:<TextArea ></TextArea>
            //     出院诊断:<TextArea ></TextArea>
            // </div>
            <List
                itemLayout="horizontal"
                dataSource={newDataSource}
                size={'small'}
                renderItem={item => (
                <List.Item>
                    <List.Item.Meta
                    //avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                    title={<div>{item.diagTypeDesc}</div>}
                    description={item.statusArr.map((value,index)=>{
                        return <div><span style={{fontWeight:'bolder'}}>{value.diagStatusDesc+":"}</span>{value.ICDDescList.toString()}</div>;
                    })}
                    />
                </List.Item>
                )}
            />
        );
    }
}
class Order extends React.Component{
    constructor(props){
        super(props);
        this.state={

        }
        this.columns=[{
                title:"开单医生",
                dataIndex:"doctor",
                key:'doctor',
                align:'center',
                width:100,
                mergeAbove:true
            },{
                title:"日期",
                dataIndex:"date",
                key:'date',
                align:'center',
                width:80
            },{
                title:"时间",
                dataIndex:"time",
                key:'time',
                align:'center',
                width:80
            },{
                title:"医嘱内容",
                dataIndex:"medItemDesc",
                key:'medItemDesc',
                align:'center',
                width:300
            },{
                title:"用法用量",
                dataIndex:"usage",
                key:'usage',
                align:'center',
                width:200
            },{
                title:"类别",
                dataIndex:"ordCatDesc",
                key:'ordCatDesc',
                align:'center',
            }
        ];
    }

    render(){
        const {orders,ordCat}=this.props;
        let longOrd=[], shortOrd=[];
        if (ordCat){
            orders.longOrd.map((value,index)=>{
                if(ordCat==value.ordCatID){
                    longOrd.push(value);
                }
            });
            orders.shortOrd.map((value,index)=>{
                if(ordCat==value.ordCatID){
                    shortOrd.push(value);
                }
            });
        }else{
            longOrd=orders.longOrd;
            shortOrd=orders.shortOrd;
        }
        return (
            <Tabs activeKey={this.props.activePanel} renderTabBar={()=><div></div>}>
                <Tabs.TabPane key="1">
                    <RowspanTable
                    columns={this.columns}
                    dataSource={longOrd}
                    //onChange={()=>this.nowDoc=""}
                    pagination={{
                        pageSize:10
                    }}
                    rowKey={record=>record.id}
                    bordered
                    style={{height:'500px'}}
                    />
                </Tabs.TabPane>
                <Tabs.TabPane key="2">
                    <RowspanTable
                    columns={this.columns}
                    dataSource={shortOrd}
                    //onChange={()=>this.nowDoc=""}
                    pagination={{
                        pageSize:10
                    }}
                    rowKey={record=>record.id}
                    bordered
                    style={{height:'500px'}}
                    />
                </Tabs.TabPane>
            </Tabs>
            
        );
    }
}
class ExamOrd extends React.Component{
    constructor(props){
        super(props);
        this.state={

        };
        this.columns=[{
            title:"开单医生",
            dataIndex:"doctor",
            key:'doctor',
            width:80,
            mergeAbove:true
        },{
            title:"日期",
            dataIndex:"date",
            key:'date',
            width:80
        },{
            title:"时间",
            dataIndex:"time",
            key:'time',
            width:80
        },{
            title:"医嘱内容",
            dataIndex:"medItemDesc",
            key:'medItemDesc',
            width:80
        },{
            title:"类别",
            dataIndex:"ordCatDesc",
            key:'ordCatDesc',
            width:80
        }];
    }
    render(){
        const {dataSource}=this.props;
        return(
            <RowspanTable
                columns={this.columns}
                dataSource={dataSource}
                pagination={{
                    pageSize:10
                }}
                bordered
                style={{height:'500px'}}
            />
        );
    }
}
class InHospRecord extends React.Component{
    constructor(props){
        super(props);
        this.state={

        }
        this.columns=[{
            title:'入院日期',
            dataIndex:'admDate',
            key:'date',
            width:80,
            align:'center'
        },{
            title:'入院时间',
            dataIndex:'admTime',
            key:'time',
            width:80,
            align:'center'
        },{
            title:'状态',
            dataIndex:'status',
            key:'status',
            width:80,
            align:'center'
        },{
            title:'出院日期',
            dataIndex:'outDate',
            key:'outDate',
            width:80,
            align:'center'
        },]
    }
    render(){
        const {dataSource}=this.props;
        return(
            <Table
                columns={this.columns}
                dataSource={dataSource}
                rowKey={(record)=>record.id}
                bordered
                style={{height:'500px'}}
            />
        );
    }
}
class InfoModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: props.modalVisible||false,
            title:props.title||'',
            activePanel:'1',
            activeKey:[],
            orders:{},
            diagnose:[],
            examOrd:[],
            inspOrd:[],
            inHosp:[],
            ordCat:0
        }
    }
    componentWillReceiveProps(nextProps){
        //console.log(nextProps);
        this.setState({visible:nextProps.modalVisible,title:nextProps.title});
        if ('modalData' in nextProps){
            this.formatData(nextProps.modalData);
        }
    }
    onCancel=(e)=>{
        this.props.setVisible(false);
    }
    onLongOrder=(e)=>{
        this.setState({activePanel:"1"});
        e.stopPropagation();
    }
    onShortOrder=(e)=>{
        this.setState({activePanel:"2"});
        e.stopPropagation();
    }
    ordCatChange=(val,opt)=>{
        this.setState({ordCat:val});
    }
    formatData=(data)=>{
        const {diagnose,ordDetails,inHosp}=data;
        let longOrd=[],shortOrd=[],orders={},
            examOrd=[],inspOrd=[]
        if (typeof diagnose !=='undefined'){

        }
        if (typeof ordDetails !=='undefined'){
            ordDetails.forEach((value,key)=>{
                if (value.priority=='临时医嘱'){
                    shortOrd.push(value);
                }else if(value.priority=='长期医嘱'){
                    longOrd.push(value);
                }
                if (value.ordCatDesc=='检验'){
                    examOrd.push(value);
                }
                if (value.ordCatDesc=='检查'){
                    inspOrd.push(value);
                }
            });
            orders.longOrd=longOrd;
            orders.shortOrd=shortOrd;
        }
        this.setState({orders:orders,examOrd:examOrd,inspOrd:inspOrd,diagnose:diagnose,inHosp:inHosp});
    }
    componentDidUpdate(){
        //console.log(this.state);
    }
    render() {
        const {title,activePanel,orders,examOrd,inspOrd,inHosp,diagnose} =this.state;
        const modalTitle = <div style={{fontFamily:['Arial Negreta', 'Arial Normal', 'Arial'],
        fontWeight: 700,
        fontStyle: 'normal',
        fontSize: '16px',
        color: '#FFFFFF'}}>{title}</div>;
        const ordType=<span style={{margin:'0px 0px 0px 20px'}} onClick={(e)=>e.stopPropagation()}>医嘱类别:<Select onChange={this.ordCatChange} value={this.state.ordCat} style={{width:'200px'}}>{this.props.ordCatOpt}</Select></span>
        return (
            <Spin spinning={false} >
            <Modal
                visible={this.state.visible}
                footer={null}
                mask={false}
                title={modalTitle}
                onCancel={this.onCancel}
                style={{position:'absolute',top:'34%',left:'264px'}}
                bodyStyle={{padding:'0px 0px 0px 0px'}}
                width={1045}
                //className={'FindVisitorInfo'}
            >
                <Collapse activeKey={this.state.activeKey} onChange={(key)=>{key[1]?this.setState({activeKey:[key[1]]}):this.setState({activeKey:[key[0]]})}}>
                    <Collapse.Panel style={{backgroundColor:'rgb(186, 213, 247)'}} header={<span><img src='data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALDSURBVEhLvZZNaFNBEIBn9j2aoh68xDb4V0Gx
rblZMYJCC4IKihQ9COIhLcVLDwrtoQeR4FXowZ5EEwVBQY8eKlYsWDEehIKlDVJoK6V5NR5yKJo0
eTvOTrZiaE0LSfrBy87P8iZvdnZ2EbbAnsR0xNFqmMWJBhW4sxA9lBPH3fdu6EDTAKC6oknHlnvb
X4u9AlsKGHqc+sQzI0YmoAksYHexUMy5O9wEm64aOzu8dG9rSOQKbBowmJhqdslNW1UgohQCZtf+
xBo+6lM/ou1Jq25IWcCmR9NhRHzJL9sNSGNawztUsI/1e3ZKRYhgRJH+SEqd4y/uNDYEv2+p99iY
TGDKAobi0/0A6oFVawPBfU71oNVA2VFwfD1qxZrBX/jGisK6NWyOz3zgFJ62alVwgS16PW37rSpI
wODI1C610+lQmiJc4tfZFDb2qiGY55+npDEZcANJ3k5Z5JK/xWHNHqs/vJ6Kq/G4VesOIUUUFPC2
2czWVjfM3iWEGyp9s/Wnt+B1semZ9dUcAhjzf/snlqNt86VtEesq8vfyAtcHrszFTCYj/RcPJuYa
85RPsPGaeOvHeAMGutUq5Ye3IZihc5VyzxWZJrxNmFiy8U3T5ux2KIUn2Xqek94iM6qFjyx+1yhp
+qwclVyKHp2UgP/SHE+9ZeNZq1YFV+es19N6xKpCWfPe+/AbH0WlY6UW8LsOm9uCVYWygL7yL/Lg
lrTaoMi5bEWhLKB2aJKHFX6K0n2IYuZQFecW4BS+ANJDLI5zZ8mZh/UvJW+JdWtoLkbBYLAx0x82
gaEpMdOiCOfEtwYXA7epFZMyaxE0Uhd3k3Ejm/1txr8XLsv6gBsQiqe+8iBHlumJrvYv5V1Yccgx
1xE5OzkTWe97OihdqwJlKf0ffAUckhIHeIVFPLPYF57NRMOe/8u/wLYnJnWIenCzYAAAfwB7bgy1
G3s1mwAAAABJRU5ErkJggg=='/>诊断信息</span>} key="1">
                        <Diagnose dataSource={diagnose} />
                    </Collapse.Panel>
                    <Collapse.Panel style={{backgroundColor:'rgb(186, 213, 247)'}} header={<div><span><img src='data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADgSURBVEhL3dYhDsJAEAXQmS0CiSih9QgEkkNw
HA6A4wBYSEp7gR4AyQFwJXQJBolAIEggATLsZOcKM4KXNPmz5qdNd1vMytMSgWZgo8a89O8QOnHW
58JlVsYcEFwkW3jgoDiOAXAiC6ooIS/RUL72qUR13BW2hT8jwFDWVBHB3VmVMUTo8bb4xNEGFxYx
WqCthD8W3tJ2joALmbWtMNu0T0TsyoI6Z1nG+PC+SlZHRC/IKz+SWV38UBjDfnXI3DeZyqwrgR3/
YjQhmtwqAd34aDN7rmG/p1xoigvrGC3A/gcAGDSki46rlAAAAABJRU5ErkJggg=='/>医嘱信息</span><span onClick={e=>e.stopPropagation()} style={{margin:'0px 0px 0px 40px',padding:'12px 0px'}} ><Button style={{background:this.state.activePanel=="1"?"#6dafec":''}} type={'primary'} onClick={this.onLongOrder}>长期医嘱</Button><Button style={{margin:'0px 0px 0px 20px',background:this.state.activePanel=="2"?"#6dafec":''}} type={'primary'} onClick={this.onShortOrder}>临时医嘱</Button>{ordType}</span></div>} key="2">
                        <Order ordCat={this.state.ordCat} orders={orders} activePanel={activePanel} />
                    </Collapse.Panel>
                    <Collapse.Panel style={{backgroundColor:'rgb(186, 213, 247)'}} header={<span><img src='data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIPSURBVEhL3Za/SyNBFMffmwTd8irdFU4jiChY
CFpYCKdor90Vd00sxEJBCwuLQ8XCIsIVZ2vyFwRSKgimELQUPM7AHfgDJQgWlquYeffe7BA2Gk3M
XQL6gZk3783Mvrzvzu4GoQxe8tcsAX5GwGEiOAKkdDM6G+fxTt8uKWV5L+p2uPM8mjB7gPaRMJ2/
yG/C6uhDsChAWVtEknH4BxD2sZvlX+TyRdbu9d1MsOIprR/dr7wmwcMebllO1gUI3712b90sCPEk
IYcGpOdEm/mpnlFNtGTCCBPGlgEVfjEWaEn2AOpvwQQMGhsiKnK0tbeMEKhhCbCE/WiEpoL0RQhi
3tbJivVKIZCKQGs08olVUkp4D+FRU6R5m7VvS7Dmor+h7E0VEGLcLVuvOsJ7+MJ3dJ9RLAPfs8bA
uSbRS+bI+o/5yfqmAfETj0eCUAUIDrnbIYQxOa02WsJLCetCmVNaX4oVaqTO63jvmYn+Z1pTJzFF
eCrjhldYU0JvK3fAyhx3pE4/2FDV1FYhwhD3fT74DUr4D1Q8NCKbX/AnrWtQClNi+Q21SBpuTJCJ
6sju1XT3pXWLvOrQSDJJEG52ipXFRDj+oArjdupZKiZ0Ik5Ga4qHm50yFYbjUqGdepaansPX7nl7
zyGLuc1d1gHnNvCr5/2/2tBN5n7zx7jL+nWF/77cKiK9wJr+sbG6EeSAub+7GeCStZogaQAAAABJ
RU5ErkJggg=='/>入院记录</span>} key="3">
                        <InHospRecord dataSource={inHosp} />
                    </Collapse.Panel>
                    <Collapse.Panel style={{backgroundColor:'rgb(186, 213, 247)'}} header={<span><img src='data:img/jpg;base64,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'/>检查项目</span>} key="4">
                        <ExamOrd dataSource={inspOrd} />
                    </Collapse.Panel>
                    <Collapse.Panel style={{backgroundColor:'rgb(186, 213, 247)'}} header={<span><img src='data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAL8SURBVEhL7VYxTFNRFL3v/RIYHTC02CgmRFE7
MDgyYOJAAkmbyICJg1U0mmAYiGE0JC4MDsRJLXQh0QGS36QMRhJJZGCTAaEaEhBqC+hIpOj/73re
/7+ktE0poTp5kqb3nf/+O/fe9+99T1C1ePLe19Ti7xAsw8SqyyXlPCmervfVz32Nns+5XGVUFDwX
X2v4Ze93kaQwE/cIEo3eo2LsMlGSmGbsPcv8PhDa9fgSlAgGXqQalYHFpRuJEKLBe2Rh0TlBKiEt
n6lY5ahORZiM7nLzdOSGMpLf7l9Ie7wDR/DMyy9BZahejMIYduDn0zwAT9lkFm8reZ7PBAvRTUJF
DmWCaYEFz/hs+036XmhVBCaW+7Hg87yHSF2aWJiS7ERmY2eORq5ZzovHQGA81eGIE/ciolaPRuQ8
IvwTK5vwKMjMKUnqUebulVlvQk3QHP/crhTHhaB2aOQQYQopP4COZh5hJpRkczt6ad2lj4fT8SW/
j2UPduwGM3UW7C8VCx4CJi+S4GkpZDITvbjo0WURfLXUahlGBGYYGdPfgQOk8QfGCzDhwBGChcCk
VUxPCubp7EZ2Qe+tP7ZyFd6H8bFpoZA7E2Baxx6akq0Z/R2gfoOSxZp+VLVgIbTX+MvpvXcZNxuC
OIFyMouz0RRfaTmRYB54cVag2KUtp4rrrRA1E8zeaauqNRYKSof5h/gvWHNI3W48+68BZeT3TB2h
nPTsmkP3Uf9E6rXB8oNHJeXWRuYhPHgMN7Y88sRoHv90HULvkL2PqJs+NIVddIYR66d186CO9JmW
s3N96OrDaFdtHl0Rh+oQVxD/2UAfrCF9MmgKgaQFi2fWnhXLn6VlCzcQS0VY8lBhEy4HLegcvmr/
AYaDWK1F87rNIbqx7c2tyeLztGKnQIfoxKVpED1SN+dSMD1FmxpARKc8BlcLGsv2t5neuAQVBfNo
ii2HpJRDMG/hl79+HIBJmErYozvRy/oYqoiqBPPQB6vBdcPI2W2XEVM+9XtU31Xc8VEg+gM0016b
zH50+AAAAABJRU5ErkJggg=='/>检验项目</span>} key="5">
                        <ExamOrd dataSource={examOrd} />
                    </Collapse.Panel>
                </Collapse>
            </Modal>
            </Spin>
            );
    }

}
const SearchFieldForm = Form.create()(SearchField);
class MainView extends React.Component {
    constructor(props){
        super(props);
        this.state={
            tableDataSource:[],
            pagination:{
                showQuickJumper:1,
                current:1,
                pageSize:10,
            },
            ordCatOptions:[],
            loading:false
        }
    }
    setTableDataSource=(source,params)=>{
        if (params){
            this.params=params;
        }
        this.setState({tableDataSource:source});
    }
    setLoading=(loading)=>{
        this.setState({loading:loading});
    }
    setOrdCat=(ordCatOpt)=>{
        this.setState({ordCatOptions:ordCatOpt});
    }
    setPagination=(pagination)=>{
        const pager={...this.state.pagination};
        pager.current=pagination.current;
        pager.pageSize=pagination.pageSize;
        pager.total=pagination.total;
        this.setState({pagination:pager});
    }
    getTableData=(pagination)=>{
        this.form.getTableData(this.params,pagination);
    }   
    render() {
        return (<Layout className={'FindVisitorInfo'} style={{ backgroundColor: 'rgb(186, 213, 247)' }}>
            <div id={'infoSearch'}>患者信息查询</div>
            <Layout.Header style={{ backgroundColor: 'white', height: '90px', padding: '0px 0px 0px 10px' }}>
                <SearchFieldForm setOrdCat={this.setOrdCat} setPagination={this.setPagination} wrappedComponentRef={(form)=>this.form=form} setData={this.setTableDataSource} setLoading={this.setLoading} />
            </Layout.Header>
            <div id={'infoList'}>患者信息列表</div>
            <Layout.Content style={{ height: '500px', backgroundColor: 'white' }}>
                <VisitorsInfoTable ordCatOpt={this.state.ordCatOptions} getTableData={this.getTableData} pagination={this.state.pagination} dataSource={this.state.tableDataSource} loading={this.state.loading} />
            </Layout.Content>
        </Layout>);
    }
}
export default MainView;