import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    HomeOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, Input, Modal, 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
        },
        // {
        //     "title": "库存信息",
        //     "valueType": "option",
        //     "width": 88,
        //     "search": false,
        //     "render": (dom, record) => {
        //         return <a
        //             onClick={() => {
        //                 Modal.info({
        //                     title: "库存信息",
        //                     width: 1200,
        //                     okText: "知道了",
        //                     content: (
        //                         <div>
        //                             <AutoTable
        //                                 withCard={false}
        //                                 columns={[
        //                                     {
        //                                         "title": "仓库编号",
        //                                         "dataIndex": "storeCode",
        //                                         "key": "storeCode",
        //                                     },
        //                                     {
        //                                         "title": "仓库名称",
        //                                         "dataIndex": "storeName",
        //                                         "key": "storeName"
        //                                     },
        //                                     {
        //                                         "title": "库位名称",
        //                                         "dataIndex": "storePositionName",
        //                                         "key": "storePositionName"
        //                                     },
        //                                     {
        //                                         "title": "批次号",
        //                                         "dataIndex": "materieControlNo",
        //                                         "key": "materieControlNo"
        //                                     },
        //                                     {
        //                                         "title": "供应商编号",
        //                                         "dataIndex": "supplierNo",
        //                                         "key": "supplierNo"
        //                                     },
        //                                     {
        //                                         "title": "供应商名称",
        //                                         "dataIndex": "supplierName",
        //                                         "key": "supplierName"
        //                                     },
        //                                     {
        //                                         "title": "库存数量",
        //                                         "dataIndex": "stroeNum",
        //                                         "key": "stroeNum",
        //                                         search:false
        //                                     },
        //                                 ]}
        //                                 path="/ngic-workmanship/wmsMaterieStore/queryPositionList"
        //                                 extraparams={{
        //                                     level: select.level ?? 0,
        //                                     key: select.selectedKeys ?? "",
        //                                     materieId: record.materieId
        //                                 }}
        //                             >

        //                             </AutoTable>
        //                         </div>
        //                     )
        //                 })
        //             }}
        //         >
        //             查看
        //         </a>
        //     }
        // }
    ]

    const tableprops = {
        ...props,
        pageextra: "none",
        columns,
        path: "/ngic-workmanship/wmsMaterieStock/queryStockList",
        extraparams: {
            level: select.level ?? 0,
            key: select.selectedKeys ?? ""
        }

    }


    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, alldata) => {
                                    setselect(selectedKeys[0] ? {
                                        title: e.node.title,
                                        selectedKeys: selectedKeys[0],
                                        level: alldata.filter(it => it.key == selectedKeys[0])[0]?.level,
                                        key: e.node.key
                                    } : {

                                        })
                                }}
                            >

                            </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>
                        {
                            select.key != "00000000" && <Breadcrumb.Item style={{ maxWidth: 600 }}>{select.title}</Breadcrumb.Item>
                        }
                    </Breadcrumb>
                    <div
                        className={styles.sitelayoutbackground}
                        style={{
                            padding: 6,
                            height: "100%",
                            flex: 1
                        }}
                    >
                        <AutoTable
                            {
                            ...tableprops
                            }
                            withCard={false}

                        ></AutoTable>
                    </div>
                </Content>
            </Layout>
        </Layout>




    );
};

export default Storesearch;