import '../../style/matrixDataMaintenance.less';
import React, {
	Component,Fragment
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaRightMenu,
	WeaAlertPage
} from 'ecCom';
import {
	Button,
	Spin
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import DataList from './DataList';
import HiddenTable from './HiddenTable';

@inject("hrmMatrix")
@inject("hrmMatrixDataMaintenance")
@inject('hrmImportResource')
@observer
export default class MatrixDataMaintenanceView extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			hrmMatrixDataMaintenance: store,
			hrmImportResource,
			params,
			hrmMatrix
		} = this.props;
		store.setRootStore(hrmMatrix);
		store.setImportStore(hrmImportResource)
		store.initData(params, true);
	}

	componentWillReceiveProps(nextProps) {
		const {
			hrmMatrixDataMaintenance: store,
			hrmImportResource,
			params,
			hrmMatrix
		} = nextProps;
		store.setRootStore(hrmMatrix);
		store.setImportStore(hrmImportResource)
		store.initData(params, true);
	}

	getTopButtons = () => {
		const {hrmMatrix,hrmMatrixDataMaintenance: store} = this.props;
		const {hassaveright, saveMatrixData, exportMatrix, importMatrix, clearDimission, showOpLog} = hrmMatrix;
		const {matrixInfo, dataOpBtnsVisible, menuIconCollection, logTypeDef, canClear} = store;
		let buttons = [], rightMenu = [];
		let logSmallType;
		if(hassaveright){
			buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x038dh`} type="primary" op="create" onClick={() => saveMatrixData()}>{i18n.button.save()}</Button>);
		}
		buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ptpgja`} type="primary" op="export" onClick={() => exportMatrix()}>{i18n.button.export()}</Button>);
		if(dataOpBtnsVisible){
			buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@21lp1v`} type="primary" op="import" onClick={() => importMatrix()}>{i18n.button.import()}</Button>);
		}
		if(canClear)
			buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zf1478`} type="primary" op="sync" onClick={() => clearDimission()}>{i18n.button.clearDimission()}</Button>);
		logSmallType = logTypeDef.HRM_ENGINE_Matrix_Table;

		buttons.map((btn, index) => {
			const {
				props
			} = btn;
			rightMenu.push({
				key: index.toString(),
				content: props.children,
				icon: <i className={menuIconCollection[props.op]}/>,
				onClick: props.onClick
			});
		});
		rightMenu.push({
			key: '99',
			content: i18n.button.log(),
			icon: <i className={menuIconCollection.log}/>,
			onClick: () => showOpLog(logSmallType, matrixInfo.matrixid)
		});
		rightMenu.push({
			icon: <i className='icon-coms-task-list'/>,
			content:i18n.button.columnVisibleSetting(),
			key: 'definedColumn',
			onClick: key =>{
				this.definedColumn();
			}
		});

		return [buttons, rightMenu];
	}

	render() {
		const {
			hrmMatrixDataMaintenance: store,
			hrmMatrix
		} = this.props;
		const {
			hasData,
			dataOpBtnsVisible,
			loading,
			initDataFinished,
			hasRight,
			viewData
		} = store;

		if(!hasRight){
			return (
				<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@lb42dy`}>
					<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
				</WeaAlertPage>
			)
		}

		const [buttons, rightMenu] = this.getTopButtons();
		const topProps = {
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			title: i18n.module.matrixSetting(),
			showDropIcon: true,
			buttons,
			dropMenuDatas: rightMenu
		}

		let coms;
		if(!viewData){
			coms = (
				<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@7so9jg`}>
					<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
				</WeaAlertPage>
			)
		}else if(!hasData){
			coms = (
				<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@sf6opb`} icon={<i className="icon-coms-NoData" />} iconSize={120} paddingTop={'15%'}>
					<div style={{ color: '#000' }}>{i18n.message.dataNone()}</div>
				</WeaAlertPage>
			)
		}else {
			coms = (
				<Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@s2252t`}>
					<DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@tz36pb`} store={store} rootStore={hrmMatrix}/>
					<HiddenTable ecId={`${this && this.props && this.props.ecId || ''}_HiddenTable@4kcbgo`} store={store} />
				</Fragment>
			)
		}

		return (
			<div className="hrm_module_container matrix">
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ccubyr`} {...topProps}>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@adeegh`} datas={rightMenu}>
						<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0vl36s`} spinning={loading}>
							{
								initDataFinished && coms
							}
						</Spin>
					</WeaRightMenu>
				</WeaTop>
			</div>
		);
	}
}