// 采血工作量统计
import React from 'react';
import { Select, Row, Col, Button, Spin,DatePicker, message } from 'antd';
import { $http } from '../../../containers/config/https';
import store from 'store';
import moment from 'moment';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx'; // 公共table组件
import  BloodSamplingModel from '../Blood/BloodSamplingModel';

const { Option } = Select;
let user;

export default class BloodSampling extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			tableData: [],
			total:0,	// 表格数据总条数
			showLoading: true,
			page: 1,
			pageSize: 10,
            headerHeight: 0,
			startDate: moment().format('YYYY-MM-DD'), // 开始日期
            stopDate: moment().format('YYYY-MM-DD'),                // 结束日期
		    locID: '',
            DepartmentInformation: [], // 科室名称下拉框
            detailTableData:[],//采血明细数据
		};
		user= window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		this.columns = [
			{
			  key: 1,
			  title : '执行人',
			  dataIndex: 'user',
				align: "center",
				width: '10%'
			},
			{
                kye: 2,
                title: '医嘱数',
                dataIndex: 'ordCount',
                align: "center",
                width: '12%',
                render: (text,record) => {
                    return(<a onClick={()=>this.getDetail(record)}>{text}</a>)                
                }
			},
			{
			  key: 3,
			  title: '版本数',
			  dataIndex: 'specCount',
				align: "center",
				width: '10%',
			}
		]
	}

	componentDidMount() {
		this.initData()
    }

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

	initData() {
		// 初始化下拉框数据
		this.getDepartmentInformation();
	    this.handleQuery();
		//this.child.handleLoading();
		// 组件加载完毕关闭loading
		this.setState({ showLoading: false });
		var box = document.querySelector(".department-header");
		if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
			this.setState({headerHeight: box.offsetHeight})
		}
	}
    // 3.13.23.获取科室信息
	getDepartmentInformation() {
			let data = {
				params: [
					{ hospID: user.hospID}
				]
			}
			$http.post('urlS', this, {
				code: "04020008",
				data: data,
				success: function (res) {
					if (+res.errorCode === 0) {
						this.setState({ DepartmentInformation: res.result.Data})
					} else {
						this.setState({ DepartmentInformation: [] })
					}
				}
			})
	}
       
    //查询采血列表数据
    handleQuery = () => {
        let data = {
            params: [{
                startDate: moment(this.state.stDate).format('YYYY-MM-DD'),
                stopDate: moment(this.state.endDate).format('YYYY-MM-DD'),
				locID:'',
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: this.state.page,
                sortColumn: 'code',
                sortOrder: 'asc'
            }]
        };
        $http.post('urlS', this, {
            code: '04100002',
            data: data,
            success: (res) => {
                if (res.errorCode === "0") {
                    this.setState({
                        total: res.result.TotalCount,
                        tableData: res.result.Data,
                    });
                    this.child.handleLoading();
                } else {
                    this.setState({
                        total: 0,
                        tableData: []
                    });
                    this.child.handleLoading();
                }
            }
        });
        this.child.handleLoading();
    }

	// 获取采血明细信息
    getDetail= (record) => {
       // console.log(record)
        this.setState({
            detailTableData:[]
        },() => {this.libChild.showModal(record)}
        )        
    }
 
	// 调用子组件公共库导入的连接事件
	libOnRef = (ref) => {
		this.libChild = ref
	}


	// 调用公共组件的连接事件
	onRef = (ref) => {
		this.child = ref
	}
  
	// 查询条件 --- 科室名称
	onChangeLocDesc = (value) => {
		this.setState({ locID: value },()=>{
			this.handleQuery();
		});
	}
   
	
	// 提供修改page和pageSize的回调函数
	compilePage(page, pageSize) {
		// 修改page，或者pageSize
		this.setState({ page: page, pageSize: pageSize }, () => {
			// 重新调用查询方法
		   this.handleQuery();
		})
	}
    handleStDateChange = (date, datetimeString) => {
        this.setState({
            startDate: datetimeString
        })
    }
    handleEndDateChange = (date, datetimeString) => {
        this.setState({
            stopDate: datetimeString
        })
    }
	

	render() {
		// 组件所需参数
		const param = {
			// 表头配置
			columns: this.columns,
			// 表格数据
			data: this.state.tableData,
			// 数据总条数
			total: this.state.total,
			// 当前页数
			page: this.state.page,
			// 表格的宽度
			x: 900,
			y: store.getState().tableHeight.y + 81 - this.state.headerHeight,
			height: store.getState().tableHeight.y + 126 - this.state.headerHeight + 'px',
		}
		return (
			<Spin tip="加载中..." spinning={this.state.showLoading} className="department">
				<div style={{ width: '100%', height: '100%' }}>
					<div className="department-header">
						<Row style={{ minHeight: '80px', padding: '0 24px' }}>
							<Col span={18}>
								开始日期：<DatePicker 
											style={{width: '150px', margin: '23px 15px 0 0'}}  
											allowClear
											onChange={(date) => this.setState({stDate:moment(date,'YYYY-MM-DD')})} 
											defaultValue={moment()}                               
								/> 
								结束日期：<DatePicker
											style={{width: '150px', margin: '23px 15px 0 0'}}
											allowClear
											onChange={(date) => this.setState({endDate: moment(date,'YYYY-MM-DD')})}
											defaultValue={moment()}
								/>
								{/* showSearch 支持搜索功能；allowClear 支持清除; optionFilterProp 搜索过滤的值 */}
								科室名称：<Select showSearch optionFilterProp="seatchprop" allowClear defaultValue={user.locID}  onChange={this.onChangeLocDesc}  style={{width: '150px', margin: '23px 15px 0 0'}} placeholder="请选择科室名称">
									{this.state.DepartmentInformation && this.state.DepartmentInformation.map(item => {
										return <Option key={item.id}  value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
									})}
								</Select>
								<Button onClick={this.handleQuery} style={{ margin: '23px 15px 20px 0', background: 'rgba(255,255,255,1)'}}>查询</Button>
                                <Button  type='primary'  style={{ margin: '23px 15px 20px 0'}}>打印</Button>
							</Col>
						</Row>
					</div>
					<div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
					<div style={{ padding: 24 }}>
						{/* handelThis将夫组件的属性与方法给子组件访问 */}
						<PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
					</div>
                    {/*采血明细弹框 */}
                    <BloodSamplingModel
					 onRef={this.libOnRef} 
					//    params={paramsData}
                    />
				</div>
			</Spin>
		)
	}
}