import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaDialog,
	WeaRightMenu,
} from 'ecCom'
import {
	Button,
} from 'antd'
import {
	WeaTableNew
} from 'comsMobx'
import {
	i18n
} from '../../public/i18n';
const WeaTable = WeaTableNew.WeaTable;

import AddTestForm from './AddTestForm';

@inject('hrmTrainPlan')
@observer
export default class Test extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 750,
			height: 395,
		}
	}

	getButtons = () => {
		const {
			hrmTrainPlan
		} = this.props, {
			test,
			setTestFormDialogVisible,
		} = hrmTrainPlan, {
			tableStore,
			hasAddRight,
		} = test;

		let buttons = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eg6zrw`} type="primary" disabled={tableStore.loading} onClick={() => setTestFormDialogVisible(true)}>{i18n.button.create()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@og9g5e`} disabled>{i18n.button.more()}</Button>)
		];

		return hasAddRight ? buttons : buttons.slice(1, 2)
	}

	getDropMenuDatas = () => {
		const {
			hrmTrainPlan
		} = this.props, {
			editor,
			test
		} = hrmTrainPlan, {
			loading
		} = editor, {
			tableStore,
			hasAddRight
		} = test;

		const menu = [{
			key: '1',
			icon: <i className='icon-coms-task-list' />,
			content: i18n.button.columnVisibleSetting(),
			disabled: tableStore.loading,
		}];

		if (hasAddRight) {
			menu.unshift({
				key: '0',
				icon: <i className='icon-coms-New-Flow' />,
				content: i18n.button.create(),
				disabled: tableStore.loading,
			})
		}

		return menu
	}

	columnVisibleSetting = () => {
		const {
			hrmTrainPlan
		} = this.props, {
			test
		} = hrmTrainPlan, {
			tableStore
		} = test;

		tableStore.setColSetVisible(true);
		tableStore.tableColSet(true);
	}

	handleMenuClick = (key) => {
		const {
			hrmTrainPlan
		} = this.props, {
			setTestFormDialogVisible
		} = hrmTrainPlan;

		if (key == '0') {
			setTestFormDialogVisible(true);
		} else if (key == '1') {
			this.columnVisibleSetting()
		}
	}

	render() {
		const {
			hrmTrainPlan
		} = this.props, {
			test,
			testForm,
			setTestDialogVisible,
		} = hrmTrainPlan, {
			visible,
			title,
			tableStore,
		} = test, {
			width,
			height,
		} = this.state;

		return (
			<div>
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4cnwkf`}
	                title={title}
	                icon="icon-coms-hrm"
	                iconBgcolor="#217346"
	                visible={visible}
	                closable={true}
	                onCancel={() => setTestDialogVisible(false)}
	                buttons={this.getButtons()}
	                style={{width: width, height: height}}
	                onChangeHeight={(h) => this.setState({height: h})}
	            >
	            	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ltwvmf`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
	                	<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@9r3c5h`} 
							comsWeaTableStore={tableStore}
							hasOrder={true}
							needScroll={true}
							rowKey={(record,index) => index}
							scroll={{y: height-125}}
						/>
					</WeaRightMenu>
	            </WeaDialog>
	            {testForm.visible && <AddTestForm ecId={`${this && this.props && this.props.ecId || ''}_AddTestForm@vhhzgw`} />}
            </div>
		)

	}
}