import React, { Component , Suspense } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import { Menu, Button } from 'antd';
import { SettingOutlined, DollarCircleOutlined,  } from '@ant-design/icons';
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from '@ant-design/icons';
// import { $Axios } from '&/common/publish';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true,
      current: 'one',
      arr1 : [
        { txt : '商户入网' , icon : '' , assembly:'Layout' },
        { txt : '商户入网列表' , icon : '', assembly:'center-tab'}
      ],
      arr2 : [
        { txt : '订单查询' , icon : ''},
        { txt : '退款查询' , icon : ''},
        { txt : '账户概览' , icon : ''},
        { txt : '发起提现' , icon : ''},
        { txt : '提现记录' , icon : ''},
        { txt : '分账收益记录' , icon : ''},
      ],
      assembly : 'Layout'
    }
  }


  componentDidMount() {

  }

  handleClick(e){
    console.log('点击的 ', e);
    this.setState({	
      current : e.key
    })
  }

  toggleCollapsed(e){
    this.setState({
      collapsed: !this.state.collapsed,
    });
    // this.setState({ current: e.key });
  }
  toggleNavs(e){
    this.setState({
      assembly: e.key,
    });
    console.log(e)
  }
  initassembly(){
    const MapDialog = React.lazy(() => import(`./component/${this.state.assembly}/${this.state.assembly}.jsx`));
    return <Suspense  fallback="" key="dialog"><MapDialog refModal={this.state.current} /></Suspense>
  }
  

  // autoLogin = () => {
  //     let param = {
  //         "account": account,
  //         "password": password,
  //         "system_code": "COMBINE",
  //         "login_ip": login_ip,
  //         "token": ""
  //     }
  //     $Axios('post','http://user_api.airqualitychina.cn:7070/auth/ipLogin',param,(res) => {
  //         console.log(res)
  //         let userData = res.data.data.result
  //         let token = res.data.data.token
  //         localStorage.setItem('token',token)
  //         localStorage.setItem('project_id',userData.project_id)
  //         localStorage.setItem('userData',JSON.stringify(userData))
  //         me.setState({isLogin:true})
  //     })
  // }

  render() {
    const { current, arr1, arr2 } = this.state;
    const { SubMenu } = Menu;
    return (
      <React.Fragment>
        {/* {this.state.isLogin ? <Layout></Layout>} */}
        <div className='wrap'>
          <div className='header_nav'>
            <div className='header_title'>商户入网信息管理平台</div>
            <div className='header_menu'>
              <div className='head-sj'>
                <Button type="primary" onClick={this.toggleCollapsed.bind(this)} style={{ marginBottom: 16 }} style={{height:'100%'}}>
                {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
              </Button>
              </div>
              <Menu onClick={this.handleClick.bind(this)}  selectedKeys={[current]} mode="horizontal" className='header_navs'>
                <Menu.Item key="one" icon={<SettingOutlined />}>
                  高级设置
                </Menu.Item>
                <Menu.Item key="tow" icon={<DollarCircleOutlined />}>
                  财务管理
                </Menu.Item>
              </Menu>
            </div>
          </div>
          <div className='main_centers'>
            <Menu
                className='main_left_nav'
                defaultSelectedKeys={[this.state.assembly]}
                // defaultOpenKeys={[this.state.assembly]}
                mode="inline"
                theme="dark"
                inlineCollapsed={this.state.collapsed}
                onClick={this.toggleNavs.bind(this)}
              >
                {current === 'one' && (arr1.map((item,index) =>(
                  <Menu.Item key={item.assembly} data={item.txt} icon={<PieChartOutlined />}>
                    {item.txt}
                  </Menu.Item>
                )))}
                {current === 'tow' && (arr2.map((item,index) =>(
                  <Menu.Item key={item.assembly} data={item.txt} icon={<PieChartOutlined />}>
                    {item.txt}
                  </Menu.Item>
                )))}
              </Menu>
              <div className='main_right_center'>
                {
                    this.initassembly()
                }
              </div>
          </div>
        </div>
      </React.Fragment>
    )
  }
}
ReactDOM.render(
  <App></App>,
  document.getElementById('root')
);