import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import { Menu, Icon } from 'antd'
import { withRouter } from 'react-router-dom';
import S from '../../utils/Storage'

const { SubMenu } = Menu
const menuSelectKeys = "menuSelectKeys"

@withRouter
@inject('UserContext')
@observer
export default class SideMenu extends Component {

    icons = {
        '汇款': 'jieshou',
        '进口信用证': 'jiaoyi',
		'出口信用证': 'shaixuan',
		'买方国内证': 'jiaoyi',
		'卖方国内证': 'shaixuan',
		'进口保函': 'buyfang',
		'出口保函': 'shaixuan',
		'进口代收': 'jiaoyi',
		'出口托收': 'shaixuan',
        '贸易融资': 'fufeiting',
        '静态参数': 'canshu',
        '经办夹': 'jingban',
        '复核夹': 'fuhe',
        '自动筛选': 'shaixuan',
        '报文管理': 'toucun',
        '备忘录': 'rizhi',
        '公共登记': 'buyfang',
        '结售汇':'jieshou',
       
    }

    constructor(props) {
        super(props)
        this.iids = 0
        this.state = {}
    }
    componentWillMount() {
        let keyJson = S.getItem(menuSelectKeys)
        if (keyJson) {
            let openKeys = JSON.parse(keyJson)
            this.setState({ openKeys })
        }

    }
    walkMenu(menuList) {
        if (!menuList || !menuList.length)
            return;
        return menuList.map(item => {
            let icon = this.icons[item.label]
            if (icon)
                icon = <img src={`img/${icon}_nor.png`} style={{ width: '2em', marginRight: '0',position:'relative',left:'-1em' }} />
            else {
                icon = <div style={{ width: '2em', display: 'inline-block' }}></div>
            }

            return !item.subMenu || !item.subMenu.length ?
                <Menu.Item key={item.value || this.iids++}>
                    {
                        icon
                    }
                    <span>{item.label}</span>
                </Menu.Item>
                :
                <SubMenu key={this.iids++} title={<span>{icon}<span>{item.label}</span></span>}>
                    {this.walkMenu(item.subMenu)}
                </SubMenu>

        })
    }
    showMenu(menuList) {
        this.iids = 0
        let rootMenu = []
        let menuNode = this.walkMenu(menuList)
        if (menuNode)
            for (let item of menuNode)
                rootMenu.push(item.key)
        this.rootMenu = rootMenu
        return menuNode
    }
    onSelect = ({ item, key, selectedKeys }) => {
        // this.setState({selectedKeys:selectedKeys})
        // S.setItem(menuSelectKeys,JSON.stringify(selectedKeys));
    }
    toLink = ({ item, key, keyPath }) => {
        if (/^\w+$/.test(key))
            this.props.history.push(key)
    }
    onOpenChange = openKeys => {
        this.setState({ openKeys })
        S.setItem(menuSelectKeys, JSON.stringify(openKeys));
    }
    onOpenChange2 = openKeys => {
        console.log(openKeys)
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootMenu.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
        sessionStorage.setItem(menuSelectKeys, JSON.stringify(openKeys));
    }

    render() {
        const { menu } = this.props.UserContext
        const remenu = [
           {
               label:'1',value:'detopn'
           }
        ]
        return (
            <React.Fragment>
                <div className="selft_menuWrapper" >
                <img src="img/menu_bottom.png" style={{ position: 'fixed', width: '200px', bottom: 0 }} />
                <Menu mode={this.state.collapse ? 'vertical' : 'inline'} theme={'light'}
                    openKeys={this.state.openKeys}
                    collapse={this.state.collapse}
                    onClick={this.toLink}

                    onOpenChange={this.onOpenChange}
                >
                    {
                        this.showMenu(menu)
                    }
                </Menu>
                </div>
            </React.Fragment>
        )
    }
} 