import React, { Component , Suspense } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import { Menu, Button } from 'antd';
import { $Axios } from './common/publish';
import { SettingOutlined, DollarCircleOutlined,  } from '@ant-design/icons';
import * as Icons from "@ant-design/icons";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true,
      current: 'one',
      arr1 : [
        { txt : '商户入网' , icon : 'GlobalOutlined' , assembly:'Layout' },
        { txt : '商户入网列表' , icon : 'SlidersOutlined', assembly:'center-tab'}
      ],
      arr2 : [
        { txt : '订单查询' , icon : '', assembly:'Finance-orderQuery'},//ok
        { txt : '退款查询' , icon : '', assembly:'Refund-inquiry'},  //ok
        { txt : '账户概览' , icon : '', assembly:'Account-overview'},  //ok
        { txt : '发起提现' , icon : '', assembly:'Cash-initiated'}, //ok
        { txt : '提现记录' , icon : '', assembly:'Withdrawal-record'}, //ok
        { txt : '分账收益记录' , icon : '', assembly:'Income-record'}, //ok
        // { txt : 'demo' , icon : '', assembly:'homePage'},
      ],
      assembly : 'Layout',
      defaultSelectedKeys : 'Layout',
      defaultSelectedKeys1 : 'Finance-orderQuery',
      assembly_cw :  'Finance-orderQuery',
      user_txt :  {
        userName : 'xxx',  //名字
        userJur : 'Y1', //权限
        userInternet : null, // 用户权限为Y3时 才会出现是否入网字段
      }
    }
  }


  componentDidMount() {
    this.initJurisdiction()
  }
  initJurisdiction(){//初始化用户权限
    console.log('----------初始化用户权限---------');
    console.log(process.env.NODE_ENV == 'development' ? '----------开发测试环境----------' : '----------线上生产环境----------')
    this.autoLogin() //登录查询用户信息
    let Jur = ['Y1','Y2','Y3']   //Y1为云悦平台权限最高权限  //Y2为商城权限二级权限  // Y3为商户权限属于个人权限
    let obj = { 
      appName : 'com.smrongshengtianxia',
      merchantId : '896582034',
      id : 2,
      pfAppName : 'com.chuangyetong' //包名
    }
    localStorage.setItem('userData',JSON.stringify(obj))

  }

  handleClick(e){
    this.setState({	
      current : e.key,
    });
    this.initassembly()
  }

  toggleCollapsed(e){
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  toggleNavs(e){
    let current = this.state.current;
    if(current == 'one'){
      this.setState({
        assembly: e.key,
      });
    }else{
      this.setState({
        assembly_cw : e.key
      });
    }
  
  }
  initassembly(){
    let current = this.state.current;
    let Assembly = null;
    if(current == 'one'){
      Assembly = React.lazy(() => import(`./component/${this.state.assembly}/${this.state.assembly}.jsx`));
    }else{
      Assembly = React.lazy(() => import(`./component/${this.state.assembly_cw}/${this.state.assembly_cw}.jsx`));
    }
    
    return <Suspense  fallback="" key="dialog"><Assembly refModal={this.state.current} /></Suspense>
  }
  initIcon(item){
    let Icon = item.icon;
    return React.createElement(Icons[Icon])
  }

  autoLogin = () => {
      let url = '/payment/merchant.query.groovy'
      let param = {
        appName : '吕卓',
        action : "queryInfo"
        
      }
      $Axios('post',url,param,(res) => {
        // console.log(res)
      })
  }

  render() {
    const { current, arr1, arr2 , user_txt } = 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 className='header_user'  style={{lineHeight:'60px'}}>
                <div style={{width:'50%',lineHeight:'60px',display:'inline-block'}}>用户名 : {user_txt.userName}</div>
                <div style={{width:'50%',lineHeight:'60px',display:'inline-block'}}>
                  <a>修改密码</a>
                  <a style={{marginLeft:'10px'}}>退出</a>
                </div>
            </div>
          </div>
          <div className='main_centers'>
            {current === 'one' && <Menu
                className='main_left_nav'
                defaultSelectedKeys={[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={this.initIcon(item)}>
                    {item.txt}
                  </Menu.Item>
                )))}
              </Menu>}
              {current === 'tow' && <Menu
                className='main_left_nav'
                defaultSelectedKeys={[this.state.assembly_cw]}
                mode="inline"
                theme="dark"
                inlineCollapsed={this.state.collapsed}
                onClick={this.toggleNavs.bind(this)}
              >
                {current === 'tow' && (arr2.map((item,index) =>(
                  <Menu.Item key={item.assembly} data={item.txt} icon={<DollarCircleOutlined />}>
                    {item.txt}
                  </Menu.Item>
                )))}
              </Menu>}
              
              <div className='main_right_center'>
                {
                    this.initassembly()
                }
              </div>
          </div>
        </div>
      </React.Fragment>
    )
  }
}
ReactDOM.render(
  <App></App>,
  document.getElementById('root')
);