import {
	observable,
	action,
	computed,
} from 'mobx';
import {
	Button,
} from 'antd';
import { WeaDropdown } from "ecCom";
const { ButtonSelect } = WeaDropdown;

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

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

	@computed get buttonSelectDatas (){
		return this.root.buttonSelectDatas || [];
	};

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

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

	@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@st9z5s@${index}`} 
					type="primary" 
					disabled={state} 
					onClick={() => this.root[menuFun]()}
				>
					{menuName}
				</Button>
			)
		});

		if (this.buttonSelectDatas.length) {
			buttons.push(<ButtonSelect
		        datas={this.buttonSelectDatas}
		        btnProps={{disabled:this.root && this.root.btnProps}}
		        btnOnClick={this.root.btnOnClick}
		        menuOnClick={this.root.menuOnClick}
		      />)
		}

		if (this.root && 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) {
			return rightMenuStates[index];
		} else {
			return false
		}
	}

	convertDatasToTopRightConf = (datas) => {
		let tConf, rConf;
		tConf = datas && datas.filter(data => {
			const {
				isTop,
				isBatch
			} = data;
			if (isTop === '1') {
				return true;
			}
			if (isBatch === '1') {
				return true;
			}
		})

		rConf = datas;

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

	

}