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'
import TreeRender from '@/components/TreeRender';
import AutoTable from "@/components/AutoTable";

const { Header, Content, Footer, Sider } = Layout,
    { Search } = Input



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

    const columns = [
        {
            "title": "物料编码",
            "dataIndex": "materieCode",
            "key": "materieCode"
        },
        {
            "title": "物料名称",
            "dataIndex": "materieName",
            "key": "materieName"
        },
        {
            "title": "物料类型",
            "dataIndex": "materieTypeName",
            "key": "materieTypeName"
        },
        {
            "title": "库存数量",
            "dataIndex": "stockNum",
            "key": "stockNum",
            "search": false
        },
        {
            "title": "可用库存",
            "dataIndex": "usableNum",
            "key": "usableNum",
            "search": false
        },
        {
            "title": "库存单位",
            "dataIndex": "productionUnitName",
            "key": "productionUnitName",
            "search": false
        }
    ]

    const tableprops = {
        ...props,
        pageextra: "none",
        columns,
        path: "/ngic-workmanship/wmsMaterieStock/queryStockList"
    }


    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: collapsed ? 0 : 12 }}>
                            <TreeRender
                                url="/ngic-auth/sysStore/queryTreeList"
                                params={{}}
                                noaction={true}
                                maxWidth={140}
                                onselected={(selectedKeys, e) => {
                                    setselect(selectedKeys[0] ? {
                                        title: e.node.title,
                                        selectedKeys: selectedKeys[0]
                                    } : {

                                    })
                                }}
                            >

                            </TreeRender>
                        </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 style={{ maxWidth: 600 }}>{select.title}</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        className={styles.sitelayoutbackground}
                        style={{
                            padding: 6,
                            height: "100%",
                            flex: 1
                        }}
                    >
                        <AutoTable
                            {
                              ...tableprops
                            }
                        ></AutoTable>
                    </div>
                </Content>
            </Layout>
        </Layout>
    );
};

export default Storesearch;