import React, { useState, useMemo, useRef, useEffect } from 'react';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import { doFetch } from '@/utils/doFetch';
import { useRequest } from "ahooks";
import styles from "./index.less";
import TreeRender from '@/components/TreeRender';
import { Divider, Tabs, ProDescriptions } from "antd";
import Account from "./Account";
import Basemsg from "./Basemsg";
const Devicedata = () => {
    let actionRef = useRef(), formRef = useRef(), boxRef = useRef();
    const [drawer, setdrawer] = useState({
        open: false,
    }),
        [extraparams, setextraparams] = useState({}),
        [activeKey, catk] = useState('item-1'),
        [item2extraparams, citp] = useState({}),
        [searchParams, csp] = useState({});
    const { run, loading, runAsync } = useRequest(doFetch, {
        manual: true,
        onSuccess: (res, params) => {
            if (res?.code == "0000") {
                actionRef?.current?.reload();
                setdrawer((s) => ({
                    ...s,
                    open: false,
                }));
            }
        },
    }),
        tableData = useRequest(async () => {
            let res = await doFetch({ url: '/lease/umLeaseLedger/queryLeaseList', params: { ...searchParams, ...extraparams } });
            return res?.data?.dataList ?? [];
        }, {
            refreshDeps: [extraparams, searchParams]
        })
    const columns = useMemo(() => {
        let defcolumn = getcolumns(setdrawer, activeKey)?.columns ?? [];
        return defcolumn;
    }, [activeKey]);

    const tableItems = useMemo(() => {
        return [
            {
                label: '租赁设备',
                key: 'item-1',
                children: <AutoTable
                    columns={columns}
                    dataSource={tableData?.data ?? []}
                    actionRef={actionRef}
                    resizeable={false}
                    bordered={false}
                    x={1500}
                    formRef={formRef}
                    dataSourceFieldsChange={(val) => {
                        csp({ ...val })
                    }}
                    extraparams={extraparams}
                    pagination={false}
                    toolBarRender={true}
                    options={false}
                />
            },
            {
                label: '自主设备',
                key: 'item-2',
                children: <Account boxRef={boxRef} extraparams={item2extraparams} />
            }
        ]
    }, [extraparams, tableData?.data]);
    const items = useMemo(() => {
        if (drawer.val == 'only') {
            if (activeKey == 'item-1') {
                return [
                    { label: '基础信息', key: 'item-1', children: <Basemsg drawer={drawer} activeKey={activeKey} setdrawer={setdrawer} /> }
                ]
            }
        }
    }, [drawer.val, activeKey, drawer.item]);
    const onselecteTree = (selectedKeys, e, alldata) => {
        let params = {};
        if (selectedKeys.length) {
            switch (e.node.type) {
                case 1:
                    params = { factoryId: e.node.key }
                    break;
                case 2:
                    params = { shopId: e.node.key }
                    break;
                case 3:
                    params = { sectionId: e.node.key }
                    break;
                case 4:
                    params = { productionLineId: e.node.key }
                    break;
                default:
                    params = {};
            }
        } else {
            params = {}
        }
        citp(selectedKeys.length ? {
            treeNodeType: e.node.type,
            treeNodeKey: e.node.key,
        } : {});

        setextraparams(params);
    };
    return <div className={styles.ledgerbox} ref={boxRef}>
        <div className={styles.ledgerheader}>
            <div className="ant-card-head" style={{ backgroundColor: 'white' }}>
                <div className="ant-card-head-wrapper">
                    <div className="ant-card-head-title">
                        <h3 className="page-title">设备台账</h3>
                    </div>
                </div>
            </div>
        </div>
        <div className={styles.ledgercontent}>
            <div className={styles.ledgerleft}>
                <TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} />
            </div>
            <div className={`${styles.ledgerright} ledgerf`}>
                <Tabs destroyInactiveTabPane activeKey={activeKey} onChange={(key) => {
                    catk(key);
                }} items={tableItems} />
            </div>
        </div>


        <DrawerPro
            {...drawer}
            fields={columns}
            params={{ id: drawer?.item?.id }}
            defaultFormValue={drawer?.item ?? {}}
            placement="right"
            onClose={() => {
                setdrawer((s) => ({
                    ...s,
                    open: false,
                }));
            }}
        >
            <Tabs destroyInactiveTabPane items={items} />
        </DrawerPro>
    </div>
}
export default Devicedata;