import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    HomeOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, Input, Tooltip, Tree } from 'antd';
import React, { useState } from 'react';
import styles from './index.less'
const { Header, Content, Footer, Sider } = Layout,
    { Search } = Input



const Storesearch = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [search, setsearch] = useState();
    const [select, setselect] = useState({});

    return (
        <Layout
            style={{
                height: '100%',
            }}
        >
            <Sider theme='light' collapsed={collapsed} width={260}>
                <div style={{ padding: 12, justifyContent: "space-between", paddingBottom: collapsed ? 12 : 0, alignItems: "center", display: "flex", flexDirection: !collapsed ? "row" : "column" }} >
                    <p className={styles.title} style={{ marginBottom: !collapsed ? 0 : 12 }}>
                        <HomeOutlined />
                        {!collapsed ? <span style={{ marginLeft: 6 }}>仓库库位</span> : ""}
                    </p>

                    {collapsed ? (
                        <MenuUnfoldOutlined
                            style={{ cursor: "pointer", fontSize: 20 }}
                            onClick={() => {
                                setCollapsed(!collapsed)
                            }}
                        />
                    ) : (
                        <MenuFoldOutlined
                            style={{ cursor: "pointer", fontSize: 20 }}
                            onClick={() => {
                                setCollapsed(!collapsed)
                            }}
                        />
                    )}
                </div>
                {
                    !collapsed && <div style={{ padding: 12, paddingBottom: collapsed ? 12 : 0 }}>
                        <Search value={search} onChange={e => setsearch(e.target.value)} style={{ marginRight: 10 }}></Search>
                    </div>
                }
                {
                    !collapsed ?
                        <div style={{ padding: collapsed ? 0 : 12 }}>
                            <Tree
                                treeData={[
                                    { title: '全部仓库', key: '0' }, // 菜单项务必填写 key
                                    { title: '菜单项二', key: 'item-2' },
                                    {
                                        title: '子菜单',
                                        key: 'submenu',
                                        children: [{ title: '子菜单项', key: 'submenu-item-1' }],
                                    },
                                ]}
                                onSelect={(selectedKeys, e) => {
                                    setselect(selectedKeys[0] ? {
                                        title: e.node.title,
                                        selectedKeys: selectedKeys[0]
                                    } : {

                                    })
                                }}
                            />
                        </div> :
                        <div onDoubleClick={() => {
                            setCollapsed(false)
                        }} style={{ writingMode: "vertical-lr", width: "100%", textAlign: "center", height: "80vh", display: "flex", justifyContent: "center", alignItems: "center", userSelect: "none" }}>
                            双击此处展开
                        </div>
                }



            </Sider>
            <Layout className={styles.sitelayout}>
                <Content
                    style={{
                        margin: '0 0 6px 6px',
                        display: "flex",
                        flexDirection: "column"
                    }}
                >
                    <Breadcrumb
                        style={{
                            margin: '8px 6px',
                        }}
                    >
                        <Breadcrumb.Item>物料库存</Breadcrumb.Item>
                        <Breadcrumb.Item>{select.title}</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        className={styles.sitelayoutbackground}
                        style={{
                            padding: 6,
                            height: "100%",
                            flex: 1
                        }}
                    >
                        Bill is a cat.
                    </div>
                </Content>
            </Layout>
        </Layout>
    );
};

export default Storesearch;