import React from 'react';
import { Tooltip,Select,Pagination,Input, message, Modal, DatePicker , Table} from 'antd';
import { $http } from 'containers/config/https';
import moment from 'moment';
import './index.less';
// 用户数据
let userData;
export default class BloodSamplingModel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false, // 弹框显示状态
            tableData:[],   // table数据
            total: 0,       // 分页数据
            page: 1,
            pageSize: 10,
            showLoading: false
        },
        userData = sessionStorage.userData ? JSON.parse(sessionStorage.userData) : {}; 

        // 采血工作量统计的数据表头
        this.columns = [
            {
            key: 1,
            title: '检验标本号',
            dataIndex: 'specNo',
            align: "center",
            width: '5%'
        },
        {
            key: 2,
            title: '医嘱名称',
            dataIndex: 'medDesc',
            align: "center",
            width: '5%'
        },
        {
            key: 3,
            title: '标本名称',
            dataIndex: 'specDesc',
            align: "center",
            width: '5%'
        },
        {
            key: 4,
            title: '开单科室',
            dataIndex: 'sendLocDesc',
            align: "center",
            width: '6%'
        },
        {
            key: 5,
            title: '接收科室',
            dataIndex: 'recLocDesc',
            align: "center",
            width: '6.5%'
        },
        {
            key: 6,
            title: '开单医生',
            dataIndex: 'docDesc',
            align: "center",
            width: '6%'
        },
        {
            key: 7,
            title: '请医嘱开始时间',
            dataIndex: 'ordDate',
            align: "center",
            width: '6.5%'
        },
        {
            key: 8,
            title: '标本采集时间',
            dataIndex: 'collectionDate',
            align: "center",
            width: '6%'
        }]            
    }
           
    componentWillReceiveProps(nextProps) {
        
    }
    componentDidMount() {      
        this.props.onRef(this);
    }
    // 显示弹框
    showModal = (record) => {
        // console.log(this.props.params)
        this.setState({
            visible: true,
            tableData:record.detail
        });
    }
        
  

    // 关闭弹框
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }
        
    // 页码改变的回调，参数是改变后的页码及每页条数 会诊历史分页
    onChange = (page, pageSize) => {
        this.setState({ page: page, pageSize: pageSize }, () => {
            // 重新调用查询方法
            this.getDetail();
        });
    };

    onShowSizeChange = (current, size) => {
        this.setState({ page: 1, pageSize: size }, () => {
            // 重新调用查询方法
            this.onChange(current,size);
        })
    };

        
    // 显示分页总条数
    showTotal(total) {
        return `共 ${total} 条`;
    }
    render(){
        return(
            <Modal
                width={'80%'}
                title="采血明细"
                visible={this.state.visible}
                onCancel={this.handleCancel}
                footer={null}
            >
                <div className='colors' style={{ width: '100%', height: '100%' }}>
                    <div style={{ width: '100%', padding: 12, overflow: 'hidden' }}>
                        <div>
                            <Table
                                style={{height: '400px', maxHeight: '400px',overflow: 'scroll'}}
                                dataSource={this.state.tableData}
                                columns={this.columns}
                                pagination={false}
                                rowKey={(row) => {
                                    return row.key
                                }}
                                className="table-Blood"
                                loading={this.state.showLoading}
                                bordered
                            />
                            {/* 分页: total--总条数  defaultCurrent--默认的当前页 hideOnSinglePage--只有一页时隐藏分页器 */}
                            <Pagination
                                showTotal={() => this.showTotal(this.state.total)}
                                size="small"
                                showQuickJumper
                                showSizeChanger
                                defaultCurrent={1}
                                current={this.state.page}
                                total={this.state.total ? this.state.total : 0}
                                onChange={this.onChange}
                                onShowSizeChange={this.onShowSizeChange}
                                style={{ textAlign: "right",marginTop: '13px'}}
                            />                        
                        </div>
                    </div>
                </div>                
            </Modal>
        )
    }
}
