/**
 * 公共组件弹框
 */
import React from 'react';
import { Modal, Table } from 'antd';
import { Util, } from 'tools/index';
import asyncComponent from '../../../routers/AsyncComponent.js';
import CommonPagination from 'components/pagination/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import store from 'store';
import '../style/index.less';

class ShowComponentModal extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            userData: userData,
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            this.setState({
                component: nextProp.component,
                dataSource: nextProp.dataSource,
                columns: nextProp.columns,
                patEventDesc:nextProp.patEventDesc
            })
        } else if (this.props.isShow === false) {

        }
    }


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

    onShowSizeChange() {

    }

    onChange() {

    }

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

    render() {
        const Component = asyncComponent(() => import('../../' + this.state.component));
        // modal 是否弹框标记
        return <div>
            <ColumnAuthoritysModel
                clientWidth='800px'
                compontName={this.state.colunmsCode}
                configType="C"
                onRef={this.onColumnRef}
            />
            <Modal className='hospital-component-modal'
                title={this.state.patEventDesc}
                maskClosable={false}
                visible={this.props.isShow}
                onCancel={this.closeModal.bind(this)}
                footer={null}>
                {!Util.isEmpty(this.state.component) ? <Component modal="1" /> :
                    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
                        <div style={{ width: '100%', height: 'calc(100% - 45px)', overflow: 'hidden' }} className='coursetable'>
                            <Table
                                style={{ width: '100%', "padding": "5px" }}
                                dataSource={this.state.dataSource}
                                className='hospital-component-table'
                                columns={this.state.columns}
                                rowClassName="editable-row"
                                bordered
                                pagination={false}
                                onHeaderRow={column => {
                                    return {
                                        onDoubleClick: () => {
                                            this.columnRef.onOpenModel();
                                        }
                                    };
                                }
                                }
                                scroll={{ y: store.getState().tableHeight.y, x: this.state.tableWidth }}
                            />
                        </div>
                        {/* <div style={{ width: '100%', height: '45px', overflow: 'hidden' }}>
                            <CommonPagination
                                size='small'
                                current={this.state.page}
                                total={this.state.total}
                                search='search'
                                onShowSizeChange={this.onShowSizeChange.bind(this)}
                                complete={true}
                                dataSource={this.state.data}
                                onChange={this.onChange.bind(this)}
                            />
                        </div> */}
                    </div>}
            </Modal></div>
    }
}

export default ShowComponentModal;
