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

@observer
export default class Content extends Component {
	constructor(props) {
		super(props);
	}

	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@4n1ti6`} percent={record.finish === '' ? 0 : record.finish} strokeColor={record.finishspan} />
		})
	}

	onChangeHeight = (h) => {
		this.props.store.height = h;

	}

	render() {
		const {
			store
		} = this.props;
		const {
			refreshTable,
			tabConfig,
			formTarget,
			tableConfig,
			dialogParams,
			showTable,
			getTabIndex,
			refreshDialog,
			height,
		} = store;
		const searchGroupProps = {
			title: i18n.label.authorizationDetail(),
			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: height - 100
			}
		}

		return (
			<div className='tableContent'>
				{
					showTable
					&&
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@d1p7lw`} {...searchGroupProps}>
						<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@r9ouwv`} {...tableConfig} tableProps={tableProps}/>
					</WeaSearchGroup>
				}
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@tgwwtt`} {...dialogParams} style={{width:dialogParams.style.width,height}} hasScroll={false} onChangeHeight={this.onChangeHeight}>
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@da4l5i`} {...tabProps}>
					{
						dialogParams.cType === 'table'
						?
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@dt4289`}
						comsWeaTableStore={dialogParams.table}
						hasOrder={true}
						needScroll={true}
						getColumns={cols => this.renderCol(cols)}
						{...scrollProps}
						/>
						:
						<WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@zt62yt`}
						datas={store.toJS(dialogParams.treeData)}
						rowKey={'categoryid'}
						/>
					}
					</Tabs>
                </WeaDialog>
			</div>
		)
	}
}