import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	Row,
	Col,
	Spin
} from 'antd';
import {
	WeaSearchGroup,
	WeaTableEdit,
	WeaDialog,
	WeaTree,
	WeaProgress,
	WeaRightMenu
} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import Tabs from '../../coms/Tabs';
import has from 'lodash/has';
import Result from './Result';
import {
	i18n
} from '../../public/i18n';
import findIndex from 'lodash/findIndex';
const {
	WeaTable
} = WeaTableNew;

@observer
export default class Content extends Component {
	constructor(props) {
		super(props);
		this.state = {dh: 0}
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	renderCol = (cols) => {
		let idx = findIndex(cols, item => item.dataIndex === 'finish');
		idx != -1 && (cols[idx].render = (text, record) => {
			return <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@100xpo`} percent={record.finish === '' ? 0 : record.finish} strokeColor={record.finishspan} />
		})
	}

	isCheckableHandle = object => {
		if(has(object, 'canClick'))
			return object.canClick;
		return true;
	}

	render() {
		const {
			store
		} = this.props;
		const {
			refreshTable,
			refreshDialog,
			tabConfig,
			formTarget,
			tableConfig,
			dialogParams,
			showResult,
			resultMessage,
			transferInfo,
			refreshForm,
			loading,
			treeProps,
			setTreeCheckedKeys,
			getTabIndex
		} = store;
		let title = '';
		switch (transferInfo.authorityTag) {
			case 'transfer':
				title = i18n.label.transferObject();
				break;
			case 'copy':
				title = i18n.label.copyObject();
				break;
			case 'delete':
				title = i18n.label.removeObject();
				break;
		}
		const searchGroupProps = {
			title,
			showGroup: true
		}
		const tableProps = {
			rowSelection: {
				selections: false
			}
		}
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: tabConfig.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: tabConfig.buttons
		}

		const scrollProps = {
			scroll: {
				y: this.state.dh - 140
			}
		}
		return (
			<div className='tableContent'>
				{
					!showResult 
					&& 
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9jru3o`} {...searchGroupProps}>
						<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@cre34n`} spinning={loading}>
						{
							tableConfig.datas.length > 0 ?
							<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@sw3opo`} {...tableConfig} tableProps={tableProps}/>
							:
							<div style={{height: 50}}></div>
						}
						</Spin>
					</WeaSearchGroup>
				}
				{
					showResult
					&&
					<div className='result'>
						
						<Result ecId={`${this && this.props && this.props.ecId || ''}_Result@vceovs`} store={store} />
					</div>
				}
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@0a3dyw`} {...dialogParams} hasScroll={true} onChangeHeight={v => this.setState({dh: v})}>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@7kcrah`} datas={dialogParams.rightMenu}>
						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@d0i3i7`} {...tabProps}>
							{
								dialogParams.cType === 'table'
								?
								<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@gz4ib9`}
								comsWeaTableStore={dialogParams.table}
								hasOrder={true}
								needScroll={true}
								getColumns={this.renderCol}
								{...scrollProps}
								/>
								:
								dialogParams.errorMsg != null ?
								<div style={{ color: '#ccc', textAlign: 'center', width: '100%'}}><span className='anticon anticon-frown'></span><span>{i18n.message.dataNone()}</span></div>
								: <WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@hi7xa2`}
								checkable
								onCheck={setTreeCheckedKeys}
								isCheckable={this.isCheckableHandle}
								showCheckStrictly={true}
								datas={store.toJS(dialogParams.treeData)}
								checkedKeys={store.toJS(treeProps.checkedKeys)}
								rowKey={'categoryid'}
							/>
							}
						</Tabs>
					</WeaRightMenu>
                </WeaDialog>
			</div>
			// <Timer store={store} />
		)
	}
}