import React from 'react';
import {
    Table, Select, Button, Form, DatePicker, Layout, Row, Col, Modal, Collapse, Checkbox, Tabs, List
} from 'antd';
import { $http } from '../../containers/config/https';
import moment from 'moment';
import './style/VisitorSum.less';


class SearchField1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchFieldValue: {},
            tableDataSource: [],
            tableColumns: [],
            hospOptions: this.props.hospOptions || [],
            comHealthOptions: [],
            rangeDatedisabled: false,
            hospId: ''
        }
    }
    onSumCheck = (checkedVal) => {
        this.setState({ rangeDatedisabled: checkedVal.target.checked });
    }
    onHospChange = (val, opt) => {
        this.setState({ hospId: opt.key });
        this.getComHealthOptions(opt.key);
    }
    getComHealthOptions = (hospId) => {
        $http.post("urlS", this, {
            code: 'ceshi008',   //获取社康
            data: { params: [{ hospId: hospId }] },
            success: function (res) {
                //console.log(res);
                if (res.result.length > 0) {
                    let options = [];
                    res.result.map(function (value, key) {
                        options.push(<Select.Option key={value.id} value={value.code}>{value.desc}</Select.Option>);
                    });
                    //console.log(options);
                    this.setState({ comHealthOptions: options });
                }
            },
            error: function (err) {
                this.setState({ errMsg: "数据加载失败，请重试!" });
            }
        });
    }
    componentWillReceiveProps(nextprops) {
        this.setState({ hospOptions: nextprops.hospOptions });
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        const colStyle = { style: { height: '45px' } };
        const { hospOptions, comHealthOptions, rangeDatedisabled } = this.state;
        return (
            <Form>
                <Row gutter={16}>
                    <Col span={7} {...colStyle}>
                        <Form.Item label={"医 院"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 16 } }}>
                            {getFieldDecorator('hospSelect',
                                {
                                    rules: [
                                        { required: true, message: '请选择医院' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select width={80} placeholder={'请选择医院'} onChange={this.onHospChange}>
                                        {hospOptions}
                                    </Select>
                                )}
                        </Form.Item>

                    </Col>
                    <Col span={8} {...colStyle}>
                        <Form.Item label={"社 康"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 16 } }}>
                            {getFieldDecorator('comHealthSelect',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select width={80} placeholder={'社 康'}>
                                        {comHealthOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={4} {...colStyle}>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={7} {...colStyle}>
                        <Form.Item label={"统计日期"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 16 } }}>
                            {getFieldDecorator('rangeDate',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <DatePicker.RangePicker disabled={rangeDatedisabled} style={{ width: '280px' }} disabledDate={(curDate) => {
                                        return curDate && curDate > moment().endOf('day');
                                    }} />
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={8} {...colStyle}>
                        <Form.Item  {...{ wrapperCol: { span: 16, push: 6 } }}>
                            {getFieldDecorator('sumCheck',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Checkbox onChange={this.onSumCheck}>{'统计总人数(不区分时间段)'}</Checkbox>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={4} {...colStyle}>
                        <Form.Item  {...{ wrapperCol: { span: 16, push: 6 } }}>
                            <Button style={{ width: '100px' }} type="primary" htmlType="submit">查询</Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        );
    }
}
class SearchField2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchFieldValue: {},
            tableDataSource: [],
            tableColumns: [],
            hospOptions: props.hospOptions || [],
            medTypeOptions: [],
            locOptions: []
        }
    }
    search = () => {
        this.props.form.validateFields((error, values) => {
            if (error) {

            }
            console.log(values);
            this.props.search(values, "");
        });
    }
    onHospChange = (val, opt) => {
        this.getSelectDataByHospId(val);
    }
    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.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) {

            }
        });
    }
    componentWillMount() {
        const session = JSON.parse(sessionStorage.userData);
        const hospDr = session.hospDr;
        this.getSelectDataByHospId(hospDr);
    }
    render() {
        const colStyle = { style: { height: '45px' } };
        const { getFieldDecorator } = this.props.form;
        const { hospOptions, locOptions, medTypeOptions } = this.state;
        const session = JSON.parse(sessionStorage.userData);
        const hospDr = session.hospDr;
        return (
            <Form>
                <Row gutter={16}>
                    <Col span={7} {...colStyle}>
                        <Form.Item label={"医 院"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 16 } }}>
                            {getFieldDecorator('hospSelect',
                                {
                                    rules: [
                                        { required: true, message: '请选择医院' }
                                    ],
                                    initialValue: hospDr
                                })(
                                    <Select width={80} placeholder={'请选择医院'} onChange={this.onHospChange}>
                                        {hospOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    {/* <Col span={7} {...colStyle}>
                        <Form.Item label={"科 室"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 16 } }}>
                            {getFieldDecorator('loc',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select width={80} placeholder={'科 室'}>
                                        {locOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col> */}
                    <Col span={7} {...colStyle}>
                        <Form.Item label={"出院科室"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 16 } }}>
                            {getFieldDecorator('locSelect',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select allowClear width={80} placeholder={'出院科室'}>
                                        {locOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={7} {...colStyle}>
                        <Form.Item label={"医保等级"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 19 } }}>
                            {getFieldDecorator('medTypeSelect',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <Select allowClear width={80} placeholder={'医保等级'}>
                                        {medTypeOptions}
                                    </Select>
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={7} {...colStyle}>
                        <Form.Item label={"统计日期"} {...{ labelCol: { span: 5 }, wrapperCol: { span: 19 } }}>
                            {getFieldDecorator('rangeDate',
                                {
                                    rules: [
                                        { required: false, message: '' }
                                    ],
                                    //initialValue:
                                })(
                                    <DatePicker.RangePicker style={{ width: '280px' }} disabledDate={(curDate) => {
                                        return curDate && curDate > moment().endOf('day');
                                    }} />
                                )}
                        </Form.Item>
                    </Col>
                    <Col span={5} {...colStyle}>
                        <Form.Item  {...{ wrapperCol: { span: 5, push: 15 } }}>
                            <Button style={{ width: '100px' }} type="primary" htmlType="submit" onClick={this.search}>查询</Button>
                        </Form.Item>
                    </Col>
                </Row>
                <div><span style={{ marginLeft: '100px' }}>说明:若在医院和社康均有诊疗记录,则医院,社康诊疗记录均需要显示</span></div>
            </Form>
        );
    }
}
class AssignVisitorsTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: this.props.tableDataSource || [],
            columns: this.props.tableColumns || [],
        }
    }
    render() {
        const { dataSource } = this.state;
        const columns = [{
            title: '医院',
            dataIndex: 'Hosp',
            key: 'Hosp',
            width: 150,
            fixed: 'left'
        }, {
            title: '社康',
            dataIndex: 'SocialHealth',
            key: 'SocialHealth',
            width: 150,
            fixed: 'left'
        }, {
            title: '签约医生',
            dataIndex: 'AssignDoc',
            key: 'AssignDoc',
            width: 150,
            fixed: 'left'
        }, {
            title: '签约人数',
            dataIndex: 'AssignSum',
            key: 'AssignSum',
            width: 150,
            fixed: 'left'
        }, {
            title: '状态',
            dataIndex: 'Status',
            key: 'Status',
            width: 150,
            fixed: 'left',
            children: [{
                title: '审核中',
                dataIndex: 'Auditing',
                key: 'Auditing',
                width: 150,
                fixed: 'left'
            }, {
                title: '审核通过',
                dataIndex: 'Audited',
                key: 'Audited',
                width: 150,
                fixed: 'left'
            }, {
                title: '审核不通过',
                dataIndex: 'UnAudit',
                key: 'UnAudit',
                width: 150,
                fixed: 'left'
            }]
        }];
        return (
            <Table
                dataSource={dataSource}
                columns={columns}
                bordered
                scroll={{ x: '100', y: '130%' }}
                bodyStyle={{ height: '300px' }}
                rowClassName={(record, index) => {
                    //index % 2 === 0 ? styles.bgRed : styles.bgGreen;
                }}
            />
        );

    }
}
class InfoModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    onCancel = () => {
        this.props.setVisible(false);
    }
    render() {
        const { visible, record } = this.props;
        const colStyle = { style: { height: '50px', lineHeight: '50px' } };
        return (
            <Modal
                visible={visible}
                onCancel={this.onCancel}
                footer={null}
                mask={false}
                style={{ position: 'absolute', top: '34%', left: '264px' }}
                bodyStyle={{ padding: '0px 0px 0px 0px' }}
                width={1045}
                className={'VisitorSum'}
            >
                <Layout>
                    <Layout.Header style={{ background: 'white', padding: '0px 20px 0px 50px', lineHeight: 'normal', height: '170px' }}>
                        <Row>
                            <Col span={4} {...colStyle}>{'病人ID: ' + record.PatNo}</Col>
                            <Col span={4} {...colStyle}>{'姓名: ' + record.PatName}</Col>
                            <Col span={4} {...colStyle}>{'性别: ' + record.Sex}</Col>
                            <Col span={4} {...colStyle}>{'出生日期: ' + record.Birth}</Col>
                            <Col span={4} {...colStyle}>{'医保等级: ' + record.MedLevel}</Col>
                            <Col span={4} {...colStyle}>{'总费用: ' + record.PaySum}</Col>
                        </Row>
                        <Row>
                            <Col span={4} {...colStyle}>{'手机: ' + record.Mobile}</Col>
                            <Col span={4} {...colStyle}>{'QQ: ' + record.QQ}</Col>
                            <Col span={4} {...colStyle}>{'邮箱: ' + record.Mail}</Col>
                            <Col span={4} {...colStyle}>{'微信: ' + record.WeChat}</Col>
                            <Col span={4} {...colStyle}>{'联系人: ' + record.Contacts}</Col>
                            <Col span={4} {...colStyle}>{'联系人手机: ' + record.ContactMobile}</Col>
                        </Row>
                        <Row>
                            <Col span={4} {...colStyle}>{'社康: ' + record.Org}</Col>
                            <Col span={4} {...colStyle}>{'签约日期: ' + record.AssignDate}</Col>
                            <Col span={4} {...colStyle}>{'签约医师: ' + record.Assign}</Col>
                            <Col span={8} {...colStyle}>{'出院科室: ' + record.LocDesc}</Col>
                            <Col span={4} {...colStyle}>{'出院日期: ' + record.NurseChargeDate}</Col>
                        </Row>
                    </Layout.Header>
                    <Layout.Content style={{ height: '500px' }}>
                        <Tabs defaultActiveKey={"1"} tabBarGutter={0} tabPosition={'left'}>
                            <Tabs.TabPane tab={<div style={{ textAlign: 'center', width: '100%', height: '100%' }}>病历记录</div>} key="1">{1}</Tabs.TabPane>
                            <Tabs.TabPane tab={<div style={{ textAlign: 'center', width: '100%', height: '100%' }}>医嘱清单</div>} key="2">
                                <List
                                    itemLayout='horizontal'
                                    dataSource={this.props.ordList}
                                    pagination={{
                                        pageSize:10,
                                    }}
                                    size={'small'}
                                    renderItem={(item,index) => (
                                        <List.Item>
                                            <List.Item.Meta
                                                //avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                                //title={<div>{index+"."+item.medItemDesc}</div>}
                                                description={(index+1)+"."+item.medItemDesc}
                                            />
                                        </List.Item>
                                    )}
                                />
                            </Tabs.TabPane>
                        </Tabs>
                    </Layout.Content>
                </Layout>
            </Modal>
        );
    }
}
class VisitorsInfoTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //dataSource: props.tableDataSource || [],
            columns: props.tableColumns || [],
            modalVisible: false,
            record: [],
            ordList:[]
        }
    }
    showModal = (record, index, event) => {
        $http.post("urlS", this, {
            code: 'ceshi011',
            data: { params: [{adm:record.ID}] },
            success: function (res) {
                if (res.errorCode == 0) {
                    this.setState({ordList:res.result});
                }
                //this.setState({pagination:pager});
            },
            error: function (err) {

            }
        });
        this.setState({ modalVisible: true, record: record });
    }
    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(pagination);
    }
    render() {
        const { modalVisible, record, ordList } = this.state;
        const columns = [{
            title: '机构',
            dataIndex: 'Org',
            key: 'Org',
            width: 100,
            align: 'center'
        }, {
            title: '出院科室',
            dataIndex: 'LocDesc',
            key: 'LocDesc',
            width: 100,
            align: 'center'
        }, {
            title: '病人ID',
            dataIndex: 'PatNo',
            key: 'PatNo',
            width: 100,
            align: 'center'
        }, {
            title: '姓名',
            dataIndex: 'PatName',
            key: 'PatName',
            width: 100,
            align: 'center'
        }, {
            title: '医保等级',
            dataIndex: 'MedLevel',
            key: 'MedLevel',
            width: 100,
            align: 'center'
        }, {
            title: '总费用',
            dataIndex: 'PaySum',
            key: 'PaySum',
            width: 100,
            align: 'center'
        }, {
            title: '签约日期',
            dataIndex: 'AssignDate',
            key: 'AssignDate',
            width: 100,
            align: 'center'
        }, {
            title: '签约人',
            dataIndex: 'Assign',
            key: 'Assign',
            width: 100,
            align: 'center'
        }, {
            title: '审核日期',
            dataIndex: 'AuditDate',
            key: 'AuditDate',
            width: 100,
            align: 'center'
        }, {
            title: '主管医师',
            dataIndex: 'DirectDoc',
            key: 'DirectDoc',
            width: 100,
            align: 'center'
        }, {
            title: '主管护士',
            dataIndex: 'DirectNurse',
            key: 'DirectNurse',
            width: 100,
            align: 'center'
        }, {
            title: '手机',
            dataIndex: 'Mobile',
            key: 'Mobile',
            width: 100,
            align: 'center'
        }, {
            title: '邮箱',
            dataIndex: 'Mail',
            key: 'Mail',
            width: 100,
            align: 'center'
        }, {
            title: 'QQ',
            dataIndex: 'QQ',
            key: 'QQ',
            width: 100,
            align: 'center'
        }, {
            title: '微信',
            dataIndex: 'WeChat',
            key: 'WeChat',
            width: 100,
            align: 'center'
        }, {
            title: '联系人',
            dataIndex: 'Contacts',
            key: 'Contacts',
            width: 100,
            align: 'center'
        }, {
            title: '联系人手机',
            dataIndex: 'ContactMobile',
            key: 'ContactMobile',
            align: 'center'
        }];
        return (
            <div>
                <Table
                    dataSource={this.props.dataSource}
                    pagination={this.props.pagination}
                    columns={columns}
                    bordered
                    scroll={{ x: '170%', y: '130%' }}
                    bodyStyle={{ height: '100%' }}
                    rowKey={(record) => record.ID}
                    onChange={this.handleTableChange}
                    loading={this.props.loading}
                    onRow={(record, index) => ({ onClick: (event) => { this.showModal(record, index, event) } })}
                />
                <InfoModal setVisible={this.setVisible} visible={modalVisible} record={record} ordList={ordList} />
            </div>

        );
    }
}
const SearchFieldForm1 = Form.create()(SearchField1);
const SearchFieldForm2 = Form.create()(SearchField2);
class MainView1 extends React.Component {
    render() {
        return (<Layout style={{ backgroundColor: 'rgb(186, 213, 247)' }}>
            <Layout.Header style={{ backgroundColor: 'white', height: '100px', padding: '0px 0px 0px 10px' }}>
                <SearchFieldForm1 hospOptions={this.props.hospOptions} />
            </Layout.Header>
            <Layout.Content style={{ height: '500px', backgroundColor: 'rgb(186, 213, 247)' }}>
                <div><span style={{ marginLeft: '10px' }}>统计列表</span></div>
                <AssignVisitorsTable />
            </Layout.Content>
        </Layout>);
    }
}
class MainView2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pagination: {
                showQuickJumper: 1
            },
            tableDataSource: [],
            loading: false
        }
        this.params = null;
    }
    search = (params, pagination) => {
        if (!pagination || Object.keys(pagination).length == 0) {
            pagination = {
                current: 1,
                pageSize: 10
            }
        }
        if (!params) {
            params = this.params;
        } else {
            this.params = params;
        }
        this.setState({ loading: true });
        $http.post("urlS", this, {
            code: 'ceshi010',
            data: { params: [params], pagination: [pagination] },
            success: function (res) {
                if (res.errorCode == 0) {
                    const pager = { ...this.state.pagination };
                    pager.total = res.total;
                    this.setState({ tableDataSource: res.result, pagination: pager, loading: false });
                }
                //this.setState({pagination:pager});
            },
            error: function (err) {

            }
        });
    }
    getTableData = (pagination) => {
        //this.setState({pagination:pagination});
        this.search("", pagination);
    }
    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.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) {

            }
        });
    }
    render() {
        return (<Layout style={{ backgroundColor: 'rgb(186, 213, 247)' }}>
            <Layout.Header style={{ backgroundColor: 'white', height: '120px', padding: '0px 0px 0px 10px' }}>
                <SearchFieldForm2 search={this.search} hospOptions={this.props.options.hospOptions} admTypeOptions={this.props.options.admTypeOptions} />
            </Layout.Header>
            <Layout.Content style={{ height: '60%', backgroundColor: 'rgb(186, 213, 247)' }}>
                <div><span style={{ marginLeft: '10px' }}>统计列表</span></div>
                <VisitorsInfoTable loading={this.state.loading} getTableData={this.getTableData} dataSource={this.state.tableDataSource} pagination={this.state.pagination} />
            </Layout.Content>
        </Layout>);
    }
}
class TabPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hospOptions: [],
            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 = [];
                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.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 });
            },
            error: function (err) {
                this.setState({ errMsg: "数据加载失败，请重试!" });
            }
        });
    }
    componentWillMount() {
        this.getInitData();
    }
    render() {
        const { hospOptions, admTypeOptions } = this.state;
        return (
            <Tabs className={'VisitorSum'} defaultActiveKey="1">
                <Tabs.TabPane tab="签约病人统计" key="1">{<MainView1 hospOptions={this.state.hospOptions} />}</Tabs.TabPane>
                <Tabs.TabPane tab="出院病人统计" key="2">{<MainView2 options={{ hospOptions: hospOptions, admTypeOptions: admTypeOptions }} />}</Tabs.TabPane>
            </Tabs>
        );
    }
}
export default TabPanel;