import React from 'react'
import {
	WeaAlertPage,
	WeaLocaleProvider,
} from 'ecCom';
import {
	Spin
} from 'antd';
import jquery from 'jquery';
const getLabel = WeaLocaleProvider.getLabel;

class AlertPage extends React.Component {
	render() {
		return (
			<div style={{height:'100%'}}>
                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@apevfb`}>
                    <div style={{ color: '#000' }}>
                        {getLabel(2012, '对不起，您暂时没有权限！')}
                    </div>
                </WeaAlertPage>
            </div>
		)
	}
}


class NoData extends React.Component {
	render() {
		const {
			className = 'icon-coms-NoData',
				tip = getLabel('390474', "暂无数据！")
		} = this.props;

		return (
			<div style={{
	    		position: 'absolute',
	    		top: '50%',
	    		left: '50%',
	    		marginTop: -45,
	    		marginLeft: -45,
	    		width: 90,
			}}>
				<i 
					className={className}
					style={{
						fontSize: 90,
					}}
				/>
				<p style={{
					textAlign: 'center',
    				fontSize: 14,
    				padding: 5
				}}>{tip}</p>
			</div>
		)
	}
}

class Loading extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			size
		} = this.props;

		const style = {
			position: 'absolute',
			top: '50%',
			left: '50%',
			marginLeft: (size === 'lg') ? -16 : -8,
			marginTop: (size === 'lg') ? -16 : -8,
		}

		return (
			<div style={style}>
				<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@zup0nd`} spinning={true} size={size === 'lg' ? 'large' : ''}></Spin>
			</div>
		)
	}
}

//Icon组件参数：bgColor(背景色)必填，shape(形状)、pixel(像素)选填，默认为正方形和10px,
//onIconClick为图标点击的回调函数，回调的值为图标的状态值：0和1。0 -> 关闭，1 -> 开启。
//当不传onIconClick参数时，点击图标没有变化。
class Icon extends React.Component {
	constructor(props) {
		super(props);
	}

	handleClick = () => {
		const {
			iconState
		} = this.props;

		//当父组件没有传onIconClick参数时，不处理这个点击事件。
		if (!this.props.onIconClick) {
			return
		}

		//将图标的状态通过回调函数传回到父组件
		this.props.onIconClick(iconState === 0 ? 1 : 0);
	}

	render() {
		const {
			iconState, //图标的状态值
			bgColor,
			className,
			shape = 'square', //默认为正方形
			pixel = 10, //默认为10px
		} = this.props;

		const style = {
			backgroundColor: (iconState === 1) ? bgColor : '#C0C0C0', //图标开启时，使用bgColor作为背景色；当为关闭的状态，则将背景色置为灰色。
			width: pixel,
			height: pixel,
			cursor: 'pointer',
		}

		if (shape === 'circle') { //图标为圆形的情况
			Object.assign(style, {
				borderRadius: '50%'
			});
		}

		return (
			<div style={style} className={(iconState === 1) && className} onClick={this.handleClick}></div>
		)
	}
}

import {
	WeaOrgTree,
} from 'ecCom';

class LeftTree extends React.Component {
	constructor(props) {
		super(props);
		this.tree = null;
		this.setRef = element => {
			this.tree = element;
		}
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.triggerRefresh !== nextProps.triggerRefresh) {
			this.init();
		}
	}

	componentDidMount() {
		this.init()
	}

	init = () => {
		if (this.tree) this.tree.reset(() => this.tree.fetchData());
	}

	handleOrgTreeNodeClick = (event, ids, nodeids, nodes) => {
		const {
			handleOrgTreeNodeClick
		} = this.props;

		const {
			type,
			name
		} = nodes[0];

		handleOrgTreeNodeClick({
			id: ids[0],
			type,
			name
		});
	}

	render() {
		const {
			title,
			rightStr
		} = this.props;

		return (
			<div style={{height: '100%'}}>
		        <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@ow9tws`} 
		        	{...this.props}
		            ref={this.setRef}
		            needSearch
		            noCache
		            isLoadAllSub
		            inputLeftDom = {`<b>${title}</b>`}
		            params={{rightStr:rightStr}}
		            treeNodeClick = {(event, ids, nodeids, nodes) => this.handleOrgTreeNodeClick(event, ids, nodeids, nodes)}
		        />
        	</div>
		)
	}
}

class Tip extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			tip,
			icon
		} = this.props;

		return (
			<div style={{position: 'absolute', width: 600, top: '42%',left: '50%',marginLeft: -300,textAlign: 'center'}}>
				<i className={icon} style={{fontSize: 80, color: '#D9D9D9'}}/>
				<p style={{padding: 10}}>{tip}</p>
			</div>
		)
	}
}

class DistanceToPeak extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			requestDistanceToPeak
		} = this.props;

		const headerHeight = jquery('.e9theme-bs-header').height();
		const navbarHeight = jquery('.e9theme-bs-navbar').height();

		const gap = 10;

		let distance = 0;
		if (headerHeight !== null) {
			distance = headerHeight + navbarHeight + 10;
		}

		requestDistanceToPeak(distance);

	}

	render() {
		return (
			<div />
		);
	}
}

export {
	AlertPage,
	NoData,
	Loading,
	Icon,
	LeftTree,
	Tip,
	DistanceToPeak,
}