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": "批次号/SN号",
                                                "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;