/**
 * Created by hao.cheng on 2017/4/17.
 */

import React from 'react';
import { Row, Col, Card, Menu } from 'antd';
import type { MenuProps } from 'antd/lib/menu';
import TrailwayRoute from './TrailwayRoute';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const Sider = () => {
    const [openKeys, setOpenKeys] = React.useState(['sub1']);
    const onOpenChange = (keys: any) => {
        const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };

    return (
        <Menu
            mode="inline"
            onOpenChange={onOpenChange}
            style={{ color: 'black', background: 'white', width: 500 }}
            theme="light"
        >
            <SubMenu key="sub1" title="1号线">
                <Menu.Item key="1">
                    F1&nbsp;&emsp;&emsp;&emsp;进站人数：74&emsp;&emsp;&emsp;出站人数：53
                </Menu.Item>
                <Menu.Item key="2">
                    F2&nbsp;&emsp;&emsp;&emsp;进站人数：34&emsp;&emsp;&emsp;出站人数：62
                </Menu.Item>
                <Menu.Item key="3">
                    F3&nbsp;&emsp;&emsp;&emsp;进站人数：72&emsp;&emsp;&emsp;出站人数：33
                </Menu.Item>
                <Menu.Item key="4">
                    F4&nbsp;&emsp;&emsp;&emsp;进站人数：45&emsp;&emsp;&emsp;出站人数：64
                </Menu.Item>
                <Menu.Item key="5">
                    F5&nbsp;&emsp;&emsp;&emsp;进站人数：46&emsp;&emsp;&emsp;出站人数：81
                </Menu.Item>
                <Menu.Item key="6">
                    F6&nbsp;&emsp;&emsp;&emsp;进站人数：70&emsp;&emsp;&emsp;出站人数：34
                </Menu.Item>
                <Menu.Item key="7">
                    F7&nbsp;&emsp;&emsp;&emsp;进站人数：74&emsp;&emsp;&emsp;出站人数：12
                </Menu.Item>
                <Menu.Item key="8">
                    FS8&nbsp;&nbsp;&emsp;&emsp;进站人数：271&emsp;&emsp;&nbsp;&nbsp;换乘人数：824
                </Menu.Item>
                <Menu.Item key="9">
                    F9&nbsp;&emsp;&emsp;&emsp;进站人数：126&emsp;&emsp;&nbsp;&nbsp;出站人数：89
                </Menu.Item>
                <Menu.Item key="10">
                    FT10&nbsp;&emsp;&emsp;进站人数：358&emsp;&emsp;&nbsp;&nbsp;换乘人数：1054
                </Menu.Item>
                <Menu.Item key="11">
                    F11&emsp;&emsp;&emsp;进站人数：56&emsp;&emsp;&emsp;出站人数：86
                </Menu.Item>
                <Menu.Item key="12">
                    F12&emsp;&emsp;&emsp;进站人数：76&emsp;&emsp;&emsp;出站人数：23
                </Menu.Item>
                <Menu.Item key="13">
                    F13&emsp;&emsp;&emsp;进站人数：34&emsp;&emsp;&emsp;出站人数：35
                </Menu.Item>
                <Menu.Item key="14">
                    F14&emsp;&emsp;&emsp;进站人数：12&emsp;&emsp;&emsp;出站人数：39
                </Menu.Item>
                <Menu.Item key="15">
                    F15&emsp;&emsp;&emsp;进站人数：59&emsp;&emsp;&emsp;出站人数：32
                </Menu.Item>
                <Menu.Item key="16">
                    F16&emsp;&emsp;&emsp;进站人数：46&emsp;&emsp;&emsp;出站人数：87
                </Menu.Item>
                <Menu.Item key="17">
                    F17&emsp;&emsp;&emsp;进站人数：34&emsp;&emsp;&emsp;出站人数：54
                </Menu.Item>
                <Menu.Item key="18">
                    F18&emsp;&emsp;&emsp;进站人数：76&emsp;&emsp;&emsp;出站人数：59
                </Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" title="2号线">
                <Menu.Item key="5">Option 5</Menu.Item>
                <Menu.Item key="6">Option 6</Menu.Item>
                <SubMenu key="sub3" title="Submenu">
                    <Menu.Item key="7">Option 7</Menu.Item>
                    <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu>
            </SubMenu>
            <SubMenu key="sub4" title="3号线">
                <Menu.Item key="9">Option 9</Menu.Item>
                <Menu.Item key="10">Option 10</Menu.Item>
                <Menu.Item key="11">Option 11</Menu.Item>
                <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
        </Menu>
    );
};

class Echarts extends React.Component {
    render() {
        return (
            <div className="gutter-example">
                <Row gutter={16}>
                    <Col className="gutter-row" md={18}>
                        <div className="gutter-box">
                            <Card title="区域图" bordered={false}>
                                <TrailwayRoute />
                            </Card>
                        </div>
                    </Col>
                    <Col className="gutter-row" md={6}>
                        <div>
                            <Card title="当前人流" bordered={false} style={{ width: 500 }}>
                                <div>
                                    <Sider></Sider>
                                </div>
                            </Card>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Echarts;
