import React from 'react'
import s from './index.less'
import { Layout, Menu, Icon, Avatar, Dropdown, ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
import router from 'umi/router'
import logo from '@/assets/logo.jpg'

const { Header, Sider, Content, Footer } = Layout
const { SubMenu } = Menu

export default class MainLayout extends React.PureComponent {
  state = {
    collapsed: false,
    selectedKeys: [window.location.pathname],
    defaultOpenKeys: this.getDefaultKeys()
  }

  getDefaultKeys () {
    const { pathname } = window.location
    const ps = pathname.split('/')
    return [`/${ps[1]}`]
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  async componentDidMount () { }

  handleLogout = () => {
    router.push('/login')
  }

  handleClick = (e) => {
    this.setState({ selectedKeys: [e.key] })
  }

  render () {
    const { collapsed, selectedKeys, defaultOpenKeys } = this.state
    const menu = (
      <Menu>
        <Menu.Item>
          <div onClick={this.handleLogout}>退出登录</div>
        </Menu.Item>
      </Menu>
    )

    return (
      <ConfigProvider locale={zhCN}>
        <Layout className={s.mainLayoutPage}>
          <Sider trigger={null} collapsible collapsed={collapsed}>
            <div className={s.logoWrap} href="/">
              <img src={logo} className={s.logo} alt="logo" />
              {collapsed ? '' : <p><a href="/">后端应用后台</a></p>}
            </div>
            {/* <Menu */}
            {/* theme="dark" */}
            {/* mode="inline" */}
            {/* defaultOpenKeys={defaultOpenKeys} */}
            {/* selectedKeys={selectedKeys} */}
            {/* onClick={this.handleClick} */}
            {/* > */}
            {/* <SubMenu */}
            {/* key="/index" */}
            {/* title={ */}
            {/* <span> */}
            {/* <Icon type="menu" /> */}
            {/* <span>首页</span> */}
            {/* </span>}> */}
            {/* <Menu.Item key="/index" onClick={() => { router.push('/') }}>首页列表</Menu.Item> */}
            {/* </SubMenu> */}
            {/* </Menu> */}
            <Menu
              theme="dark"
              mode="inline"
              defaultOpenKeys={defaultOpenKeys}
              selectedKeys={selectedKeys}
              onClick={this.handleClick}
            >
              <SubMenu
                key="/dc"
                title={
                  <span>
                    <Icon type="code-sandbox" />
                    <span>数据中心</span>
                  </span>}>
                <Menu.Item key="/dc/data" onClick={() => { router.push('/dc/data') }}>UA数据管理</Menu.Item>
                <Menu.Item key="/dc/list" onClick={() => { router.push('/dc/list') }}>UA数据报表</Menu.Item>
                <Menu.Item key="/dc/subscribe/data"  onClick={() => { router.push('/dc/subscribe/data') }}>订阅数据管理</Menu.Item>
                <Menu.Item key="/dc/subscribe/list"  onClick={() => { router.push('/dc/subscribe/list')}}>订阅数据报表</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <Header className={s.header}>
              <Icon
                className={s.trigger}
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
              />
              <Dropdown overlay={menu}>
                <Avatar icon="user" className={s.avatar} />
              </Dropdown>
            </Header>
            <Content className={s.content}>
              {this.props.children}
            </Content>
            <Footer className={s.footer}>
              Copyright <Icon type="copyright" /> 杭州微拍堂文化创意有限公司 浙ICP备14041798号
            </Footer>
          </Layout>
        </Layout>
      </ConfigProvider>
    )
  }
}