import React from 'react';
import { Modal, Table, Button } from 'antd';
import './style/index.less';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';
/* 
需要传入一个名为 param 的对象，对象包含的参数如下：
    1、width --- 模态框的宽度,默认为600px。如果存在分页最好宽度大于或等于540
    2、top、left --- 模态框的位置, 默认为当前40%，(top、left可以根据可视区的大小减去当前输入框的所在的位置)例：document.getElementById('id').getBoundingClientRect().top - 当前输入框的大小
    3、columns --- table的表头
    4、data --- table表格数据
    5、isOnRow --- 是否可以操作行 true||false 可以操作即需要传入，且需要提供相对应得方法(onClickRowPublic); 不可以操作即不需要传
    6、showPagination --- 是否需要显示分页，默认不显示
    7、total --- 列表数据总条数，默认为0，需要分页则传，不需要则不传
    8、page --- 当前得页数，默认为第一页
    10、rowClassName --- 操作行之后是否需要给当前选中的那条数据加上背景颜色，需要的话即需提供 setRowClassNamePublic 方法
    11、okText --- 确认按钮文字，默认为确定。需提供方法名为 handleOk
    12、isFooter --- 底部内容，默认为false
    13、title --- 标题文字，默认为空
    14、ModalClassName ---- 弹框class名
    15、TableClassName --- 表格class名
    16、pageSize --- 默认为10条则不传，默认为20条则传非空
*/

export default class PublicListHead extends React.Component {
    constructor() {
        super();
        this.state = {
            visible: false
        }
    }

    componentDidMount() {
        // 提供给外部该组件的this
        this.props.onRef(this);
    }

    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }

    // 打开弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    // 关闭弹框
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }

    // 页码改变的回调，参数是改变后的页码及每页条
    onChange = (page, pageSize) => {
        this.props.compilePage(page, pageSize);
    }

    // 条数改变的回调
    onShowSizeChange = (current, size) => {
        this.props.compilePage(1, size);
    }

    // 显示分页总条数
    showTotal(total) {
        return `共 ${total ? total : 0} 条`;
    }

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

    handleShowOne = () => {
        this.columnRef.onOpenModel()
    }

    render() {
        let { param } = this.props;
        let showPagination = param.showPagination ? true : false;
        let isOnRow = param.isOnRow ? true : false;
        let rowClassName = param.rowClassName ? true : false;
        let isFooter = param.isFooter ? true : false;
        let compont = 'MedicalInsuranceInformation';
        return (
            <Modal
                title={param.title ? param.title : ''}
                visible={this.state.visible}
                onCancel={this.handleCancel}
                width={param.width ? param.width : ' 700px'}
                footer={isFooter ? <div>
                    <Button onClick={this.handleCancel}>取消</Button>
                    <Button type="primary" onClick={this.props.handleOk ? this.props.handleOk : ''}>{param.okText ? param.okText : '确定'}</Button>
                </div> : null}
                mask={false}
                closable={param.title ? true : false}
                style={{ position: 'absolute', top: param.top ? param.top : '40%', left: param.left ? param.left : '40%', boxShadow: '0px 1px 4px rgba(0,0,0,0.3), 0px 0px 20px rgba(0,0,0,0.1) inset', paddingBottom: '0' }}
                className={param.ModalClassName ? param.ModalClassName + " public-modal-table" : 'public-modal-table'}
            >
                <div style={{ height: param.height ? param.height : '300px', overflow: 'auto' }} id={this.props.id ? this.props.id : ''}>
                    <Table
                        columns={param.columns}
                        dataSource={param.data}
                        pagination={false}
                        bordered
                        loading={param && param.publicTableLoading ? true : false}
                        onRow={isOnRow ? (record) => this.props.onClickRowPublic(record) : ''}
                        rowClassName={rowClassName ? (record) => this.props.setRowClassNamePublic(record) : ''}
                        className={param.TableClassName ? param.TableClassName : ''}
                        rowKey={(row) => {
                            return row.key || row.id;
                        }}
                    // scroll={{y: param.height ? (showPagination ? param.height - 94 : param.height - 46) : (showPagination ? 216 : 254)}}
                    />
                    <ColumnAuthoritysModel
                        clientWidth='900px'
                        compontName={compont}
                        configType="C"
                        onRef={this.onColumnRef}
                        reloadData={this.props.reloadData}
                    />
                </div>
                {showPagination ? <CommonPagination size={this.props.param.size ? this.props.param.size : "small"}
                    current={param.page ? param.page : 1}
                    total={param.total ? param.total : 0}
                    search={this.props.param.search ? this.props.param.search : 'search'}
                    onShowSizeChange={this.onShowSizeChange}
                    complete={true}
                    dataSource={param.data}
                    loading={param.loading}
                    onChange={this.onChange}
                    pageSize={this.props.param.pageSize ? this.props.param.pageSize : ""} /> : ''}
            </Modal>
        )
    }
}
