import React, { Component } from 'react';
import { Menu,Icon } from 'antd';
import { Route, Redirect, Link} from 'react-router-dom'
import './Menu.scss'
import dotImage from 'style/images/dot.png';
const SubMenu = Menu.SubMenu;

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      defaultSelectedKeys:'2',
      collapsed:true,
      menuOpen:true,
    };
  }

  componentWillReceiveProps(nextProps) {
    !!nextProps.backIconFlag && this.setState({
    });
  }
  componentWillMount(){
    let url = location.href;
    this.transUrltoNum(url);
  }
  choseMenu(item){

  }
  menuTag(){
    this.setState({menuOpen:!this.state.menuOpen})
  }
  transUrltoNum(url){
    if(url.indexOf('home')>-1){
      this.setState({defaultSelectedKeys:'2'});
      return
    }
    if(url.indexOf('markettrade')>-1){
      this.setState({defaultSelectedKeys:'3'});
      return
    }
    if(url.indexOf('transferaccountsPC')>-1){
      this.setState({defaultSelectedKeys:'4'});
      return
    }
    if(url.indexOf('queryentrust/QueryFirmTrade')>-1){
      this.setState({defaultSelectedKeys:'6'});
      return
    }
    if(url.indexOf('queryentrust/QueryFirmOrder')>-1){
      this.setState({defaultSelectedKeys:'7'});
      return
    }
    if(url.indexOf('queryentrust/CapitalAccounts')>-1){
      if(url.indexOf('queryentrust/CapitalAccountsToday')>-1){
        this.setState({defaultSelectedKeys:'11'});
      }else{
        this.setState({defaultSelectedKeys:'8'});
      }
      return
    }
    if(url.indexOf('queryentrust/QueryTradeList')>-1){
      this.setState({defaultSelectedKeys:'9'});
      return
    }
    if(url.indexOf('queryentrust/QueryOrderList')>-1){
      this.setState({defaultSelectedKeys:'10'});
      return
    }
    if(url.indexOf('queryentrust/BalanceQuery')>-1){
      this.setState({defaultSelectedKeys:'12'});
      return
    }
  }
  render() {
    const menu = [
      // {
      //   key:1,
      //   name:'行情',
      //   path:'/markettrends'
      // },
      {
        key:2,
        name:'挂单交易',
        path:'/home'
      },{
        key:3,
        name:'市场交易',
        path:'/markettrade'
      },{
        key:4,
        name:'转账',
        path:'/transferaccountsPC'
      },{
        key:5,
        name:'当日查询',
        sub:[{
              key:9,
              name:'当日交易',
              path:'/queryentrust/QueryTradeList'
            },{
              key:10,
              name:'当日挂单',
              path:'/queryentrust/QueryOrderList'
            },{
              key:11,
              name:'当日资金流水',
              path:'/queryentrust/CapitalAccountsToday'
            },{
              key:12,
              name:'账户余额查询',
              path:'/queryentrust/BalanceQuery'
          }]
      },{
        key:13,
        name:'历史查询',
        sub:[{
              key:6,
              name:'历史交易',
              path:'/queryentrust/QueryFirmTrade'
            },{
              key:7,
              name:'历史挂单',
              path:'/queryentrust/QueryFirmOrder'
            },{
              key:8,
              name:'资金流水',
              path:'/queryentrust/CapitalAccounts'
            }]
      }
    ]
    var menuList = [];
    menu.map(function(item,index){
      var sub = [];
      if(!item.sub){
        menuList.push(<Menu.Item key={item.key}>
                      <Link  to={item.path} key = {item.key}>
                        {item.name} 
                      </Link>                                          
                    </Menu.Item>)
      }else{
        menuList.push(<SubMenu key={item.key} title={item.name}>
                        {sub}
                      </SubMenu>
                      )
        item.sub.map(function(item,index){      
          sub.push(<Menu.Item key={item.key}>
                      <Link  to={item.path} key = {item.key}>
                        {<span><img src = {dotImage} /> {item.name}</span>} 
                      </Link>                    
                  </Menu.Item>) 
        })
      }
    })      
    // console.log(this.props.checked,this.props.sub)
    return (
      <div className="aside-menu">
        <Menu
          inlineIndent={12}
          style={{width:this.state.menuOpen?'150px':'0',fontSize:'5px'}}
          defaultSelectedKeys={[this.state.defaultSelectedKeys]}
          mode="inline"
          theme="dark"
          onClick={(e)=>this.choseMenu(e)}
          width={5}
          // openKeys={['5','13']}
        >
          {menuList}
        </Menu>
          <Icon width='9px' height='9px' onClick={this.menuTag.bind(this)} type={this.state.menuOpen?"double-left":"double-right"} />
      </div>
    );
  }
}
