import {
	observer,
	inject
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	WeaTable,
} from 'ecCom';
import {
	Loading,
	NoData,
} from '../../public/learn';
import {Spin} from 'antd'
import jquery from 'jquery';

@inject('hrmVacationBalanceReportCopy')
@observer
class Table extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			systemAndSpaHeaderHeight: 52,
			leftMenuBarWidth: 0
		}
	}

	componentDidMount() {
		this.accumulate();
	}

	componentDidUpdate(prevProps, prevState) {
		this.layout = jquery(".layout").height();
		this.searchGroup = jquery(".searchGroup").height();
	}

	accumulate = () => {
		const heights = [];

		//计算系统HEADER的高度 
		const topMenuBarWidth = jquery('.e9header-right').height() || jquery('.e8header-right').height() || 0;
		heights.push(topMenuBarWidth);
		//计算单页HEADER的高度
		const spaHeaderWidth = jquery('.wea-new-top-title').height();
		heights.push(spaHeaderWidth);

		//计算左侧菜单栏的宽度
		const leftMenuBarWidth = jquery('.e9theme-layout-aside').width() || jquery('.e8theme-layout-aside').width() || 0;

		//计算数组元素之和
		const total = (arr) => {
			let t = 0;
			arr.forEach(v => t += v);
			return t;
		}

		this.setState({
			systemAndSpaHeaderHeight: total(heights),
			leftMenuBarWidth
		});
	}

	getPagination = () => {
		const {
			hrmVacationBalanceReportCopy
		} = this.props, {
			setCurrentPage,
			setSizePerPage,
			table,
			showTotal,
			getSearchList,
		} = hrmVacationBalanceReportCopy, {
			pageSize,
			total,
			current,
		} = table;
		const pagination = {
			current,
			pageSize,
			total,
			showQuickJumper: true,
			showSizeChanger: true,
			defaultPageSize: pageSize,
			showTotal: showTotal,
			pageSizeOptions:[10,20,50,100],
			onChange(current) {
				setCurrentPage(current, 'table', getSearchList)
			},
			onShowSizeChange(current, pageSize) {
				setSizePerPage(pageSize, 'table', getSearchList,current)
			}
		}
		return pagination;
	}

	render() {
		const {
			hrmVacationBalanceReportCopy: store
		} = this.props, {
			table,
			tableScrollHeight,
			columns,
			radioGroup,
			loading
		} = store, {
			datas
		} = table;

		const {
			height: rgHeight
		} = radioGroup;

		const {
			width: browserWidth,
			height: browserHeight,
		} = this.props;

		const {
			systemAndSpaHeaderHeight,
			leftMenuBarWidth,
		} = this.state;

		//滚动区域的宽度 公式：窗口宽度 - (左侧菜单栏宽度 + GAP )
		const PADDINGLEFT = 20;
		const scrollWidth = browserWidth - (leftMenuBarWidth + 2 * PADDINGLEFT);

		//滚动区域的高度 公式：窗口高度 - (系统HEADER高度 + 单页HEADER高度 + 单项组合组件高度 + GAP + 列表头部的高度 + 分页的高度)
		const scrollHeight = browserHeight - (systemAndSpaHeaderHeight + rgHeight + 2 * 10 + 2 * 8 + 12 + jquery(".ant-table-thead").height() + 62);
		return (
			<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qyp284`} spinning ={loading}>
				<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@9azu2k`}
					bordered
					columns={columns} 
					dataSource={toJS(datas)}
					scroll= {{x:scrollWidth,y: scrollHeight}}
					pagination ={datas.length > 0 &&  this.getPagination()}
				/>
			</Spin>
				)
	}
}

export default Table