import React from 'react';
import { Menu, Icon, Layout } from 'antd';
import '@/account/leftTab.less';
const SubMenu = Menu.SubMenu;
import { Link } from 'react-router';
import { adminMenu } from '../menu';
import logo from 'img/acc-logo.png';

const LeftTab = React.createClass({
	getInitialState() {
		return {
			openKeys: [ 'sub1' ],
			current: 'index',
			switch: false,
			rootSubmenuKeys :['sub1', 'sub2','sub3','sub4','sub5','sub6','sub7','sub8','sub9','sub10']
		};
	},
	menuClick(e) {
		this.setState({
			current: e.key,
		});
		window.location.hash = e.key;
	},
	iconFun() {
		let menuW = document.querySelector('.ant-layout-sider');
		if (this.state.switch) {
			menuW.style.width = '200px';
			menuW.style.flex = '0 0 200px';
		} else {
			menuW.style.width = '50px';
			menuW.style.flex = '0 0 50px';
		}
		this.setState({
			switch: !this.state.switch
		});
	},
	onOpenChange(openKeys){
		const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
		if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
		  this.setState({ openKeys });
		} else {
		  this.setState({
			openKeys: latestOpenKey ? [latestOpenKey] : [],
		  });
		}
	 },
	componentWillMount() {
		if (window.location.hash) {
			let current = window.location.hash.substr(2),
				open=[];
			if (!current.length) {
				window.location.hash = 'index';
				this.setState({
					openKeys:['sub1'],
					current:'index'
				})
			}else{
				adminMenu.map(item=>{
					if(item.children){
						item.children.map(atem=>{
							if(current==atem.url){
								open.push(item.url)
								return false;
							}
						})
					}
				})
				this.setState({
					openKeys:open,
					current
				});
			}
		}else{
			window.location.hash = 'index';
			this.setState({
				openKeys:['sub1'],
				current:'index'
			})
		}
	},
	render() {
		return (
			<div>
				<div className="acc-index">
					{!this.state.switch && <img src={logo} alt="" />}
					{!this.state.switch && (
						<span>
							<a href={globalConfig.context + "/admin/index.html"}>管理员中心</a>
						</span>
					)}
					<Icon type={this.state.switch ? 'forward' : 'backward'} className="icon" onClick={this.iconFun} />
				</div>
				<Menu
					onClick={this.menuClick}
					defaultOpenKeys={this.state.openKeys}
					selectedKeys={[ this.state.current ]}
					openKeys={this.state.openKeys}
       				onOpenChange={this.onOpenChange}
					mode={this.state.switch ? 'vertical' : 'inline'}
					theme="light"
					className="account-left"
				>
					{adminMenu.map((subMenu) => {
						if (subMenu.children && subMenu.children.length) {
							return (
								<SubMenu
									key={subMenu.url}
									title={
										<span>
											<Icon type={subMenu.icon} />
											{!this.state.switch && <span>{subMenu.name}</span>}
										</span>
									}
								>
									{subMenu.children.map((menu) => <Menu.Item key={menu.url}>{menu.name}</Menu.Item>)}
								</SubMenu>
							);
						}
						return (
							<Menu.Item key={subMenu.url}>
								<Link to={`/${subMenu.url}`}>
									<Icon type={subMenu.icon} />
									<span className="nav-text">{subMenu.name}</span>
								</Link>
							</Menu.Item>
						);
					})}
				</Menu>
			</div>
		);
	}
});

export default LeftTab;