import {
	observable,
	action,
	computed,
} from 'mobx';
import {
	Button,
} from 'antd';

export default class TopStore {
	constructor(root) {
		this.root = root;
	}
	
	get topProps() {
		return {
			showDropIcon: true,
			iconBgcolor: '#217346',
			icon: <i className='icon-coms-hrm'/>,
		}
	}
	hideMenu = [];
	@observable title = '';
	@observable tConf = [];
	@observable rConf = [];

	@computed get loading() {
		return this.root.topLoading;
	}

	@action init = (config) => {
		Object.keys(config).forEach(key => {
			this[key] = config[key];
		})
	}

	@action fetchRightMenu = (params = {}) => {
		this.api(params).then(datas => {
			const {
				btnMenu = [],
				rightMenus,
			} = datas;

			const {
				tConf,
				rConf
			} = this.convertDatasToTopRightConf(rightMenus || btnMenu);

			this.tConf = tConf;
			this.rConf = rConf;
		})
	}

	@computed get buttons() {
		const buttons = this.tConf.map((item, index) => {
			const {
				menuFun,
				menuName
			} = item;

			const state = this.getRightMenuState(index);

			return (
				<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eluqhn@${index}`} 
					type="primary" 
					disabled={state} 
					onClick={() => this.root[menuFun]()}
				>
					{menuName}
				</Button>
			)
		});

		if (this.root.otherTopButtons) {
			return [...this.root.otherTopButtons, ...buttons];
		} else {
			return buttons;
		}
	}

	@computed get dropMenuDatas() {
		return this.rConf.map((item, index) => {
			const {
				menuFun,
				menuName,
				menuIcon
			} = item;

			const state = this.getRightMenuState(index);

			return {
				key: menuFun,
				disabled: state,
				icon: <i className={`${menuIcon}`} />,
				content: menuName,
				onClick: () => this.root[menuFun]()
			}
		});
	}

	getRightMenuState = (index) => {
		const {
			rightMenuStates
		} = this.root;

		if (rightMenuStates &&  (index  <= rightMenuStates.length - 1) ) {
			return rightMenuStates[index];
		}else{
			return false
		}
	}

	convertDatasToTopRightConf = (datas) => {
		const tmp = datas.filter(data => !this.hideMenu.includes(data.menuFun))
		let tConf, rConf;
		tConf = tmp.filter(data => {
			const {
				isTop,
				isBatch
			} = data;
			if (isTop === '1') {
				return true;
			}
			if (isBatch === '1') {
				return true;
			}
		})

		rConf = tmp;

		return {
			tConf,
			rConf
		}
	}

	

}