import React, {Component} from 'react';
import {Layout, Menu, Icon, Select} from 'antd';
import {NavRouter} from '../router/navRouter';
import './basicLayout.scss';
import ContentLayout from "./component/contentLayout";
import {ROUTE_PRE_FIX} from "../common/constant";
import { observer, inject } from 'mobx-react';
import JFUser from "./component/JFUser/JFUser";
import LanChange from "./component/LanChange/LanChange"

const {SubMenu} = Menu;
const {Header, Sider} = Layout;

@inject('appStore')
@observer
class BasicLayout extends Component {

    rootKeys = NavRouter.map(({ key }) => key);

    constructor(props) {
        super(props);
        this.state = {
            openKeys: [],
            selectedKeys: [],
        };
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps.location.pathname !== this.props.location.pathname) {
            this.changeMenuStatus();
        }
    };

    componentDidMount() {
        // this.props.setAppState({permission: permission()});
        this.changeMenuStatus();
        this.props.appStore.init();
    };

    //根据当前path改变menu状态
    changeMenuStatus = () => {
        let curPath = this.props.history.location.pathname.substring(this.props.history.location.pathname.indexOf('tsp') - 1);
        let curMenu = curPath.split('/').slice(2);
        let keys = this.getCurrentSelectedKeys(curMenu) || [];
        this.setState({
            selectedKeys: keys,
            openKeys: keys
        });
    };

    /**
     *
     * @param keys
     * @return [k1,k2]
     */
    getCurrentSelectedKeys(keys) {
        let recursive = (nav,key) => {
            for(let i = 0; i < nav.length; i++) {
                if(nav[i].key === key){
                    return nav[i];
                }else {
                    if( Array.isArray(nav[i].routes) ) {
                        let r = recursive(nav[i].routes,key);
                        if(r) {
                            return r;
                        }
                    }
                }
            }
        };

        for(let i=keys.length-1; i >= 0; i--) {
            let r = recursive(NavRouter,keys[i]);
            if(r) {
                if(r.hidden) {
                    continue;
                }else {
                    return keys.slice(0,i+1);
                }
            }else {
                console.error('请检查路由的key值')
            }
        }
    }

    /*
    * p 该用户拥有的权限
    * rp 路由信息显示所需要的权限
    * */
    isShow(p, rp) {
        // 路由信息无权限限制
        if (!rp || !rp.length) {
            return true;
        }
        // 权限比对
        for (let i = 0; i < rp.length; i++) {
            if (p.indexOf(rp[i]) === -1) {
                return false;
            }
        }
        return true;
    }

    onToggle = (openKeys) => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    };


    gotoUrl = item => {
        const {history, location, lan} = this.props;
        if (location.pathname === item.path) {
            return;
        } else {
            history.push(`/${lan}/${ ROUTE_PRE_FIX }`+ item.path);
        }
    };

    menuMap = (RouterTree, callback) => {
        let {permission} = this.props;
        let isArrFun = value => value && Array.isArray(value);
        let routesIsArr = value =>
            value && value.routes && Array.isArray(value.routes) && value.routes.length > 0;
        let repeatRouter = (Arr) => {
            if (isArrFun(Arr)) {
                return Arr.map(ArrItem => {
                    if (routesIsArr(ArrItem)) {
                        return (
                            !ArrItem.hidden && this.isShow(permission, ArrItem.permission) && <SubMenu
                                key={ArrItem.key}
                                title={
                                    <div>
                                        {ArrItem.icon ? <Icon type={ArrItem.icon} theme="outlined"/> : null}
                                        <span>{ArrItem.name}</span>
                                    </div>
                                }
                            >
                                {repeatRouter(ArrItem.routes)}
                            </SubMenu>
                        );
                    }
                    return (
                        !ArrItem.hidden && this.isShow(permission, ArrItem.permission) &&
                        <Menu.Item key={ArrItem.key} onClick={() => callback(ArrItem)}>
                            {ArrItem.icon ? <Icon type={ArrItem.icon}/> : null}
                            <span>{ArrItem.name}</span>
                        </Menu.Item>
                    );
                });
            }
        };
        return repeatRouter(RouterTree);
    };

    render() {
        let {lan, appStore} = this.props;
        let {selectedKeys} = this.state;
        return (
            <Layout id={'basicLayout'}>
                <Header className={'layout-header'}>
                    <div className={'left'}>
                        <div className={'logo'}><img alt='' src={require('../assets/images/logo.png')}/></div>
                        <div className={'headerText'}>
                            <span className={'taskCenter'}>管理控制台</span>
                        </div>
                    </div>
                    <div className={'right'}>
                        <Select  style={{ width: 120 }} value={ appStore.selectedSite.siteId } onChange={(value) => { appStore.setSelectedSite(appStore.siteList.filter(({ siteId }) => value === siteId)[0])}} loading={appStore.layoutLoading}>
                            {
                                appStore.siteList.map(({ siteAddress, siteName, siteId },index) => {
                                    return <Select.Option key={index} value={siteId}><span >{ siteName }</span></Select.Option>
                                })
                            }
                        </Select>
                        <span style={{ width:20 }}/>
                        <JFUser/>
                        {/* <LanChange/> */}
                    </div>
                </Header>
                {
                    appStore.layoutLoading ?
                        <div>loading</div>
                        :
                        (
                        appStore.siteList.length !== 0 && (
                            <Layout>
                                <Sider width={200}
                                       collapsed={this.state.collapsed}
                                >
                                    <Menu
                                        mode="inline"
                                        selectedKeys={this.state.selectedKeys}
                                        openKeys={this.state.openKeys}
                                        style={{height: '100%', borderRight: 0}}
                                        onOpenChange={this.onToggle}
                                        // inlineCollapsed={this.state.collapsed}
                                    >
                                        {
                                            this.menuMap(NavRouter, this.gotoUrl)
                                        }
                                    </Menu>
                                    {/*<JFSliderBtn open={this.state.collapsed} onToggle={() => this.setState({ collapsed:!this.state.collapsed })}/>*/}
                                </Sider>
                                <ContentLayout selectedKeys={selectedKeys} lan={lan}/>
                            </Layout>
                        )
                    )
                }
            </Layout>
        );
    }
}

export default function WrapperBasicLayout(props) {
    return (
       <BasicLayout permission={''} lan={'zh'} {...props}/>
    );
}