import * as React from 'react';
import { useState, useMemo, useRef } from 'react';
import { Divider } from "antd";
import TreeRender from '@/components/TreeRender';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import treeoptions from "./tree";
function Treezll(props) {
    const actionRef = useRef(),
        formRef = useRef();
    const [drawer, setdrawer] = useState({
        visible: false,
    }),
        [nodeId, setnode] = useState("");

    const detail = (text, row, _, action) => {
        return (
            <PremButton
                btn={{
                    size: 'small',
                    type: 'link',
                    onClick: () => {
                        setdrawer((s) => ({
                            ...s,
                            visible: true,
                            item: row,
                            title: '详情',
                            val: 'detail',
                            title: row.userName + '的详细信息',
                        }));
                    },
                }}
            >
                详情
            </PremButton>
        );
    };

    const edit = (text, row, _, action) => {
        return (
            <PremButton
                btn={{
                    size: 'small',
                    onClick: () => {
                        setdrawer((s) => ({
                            ...s,
                            visible: true,
                            item: row,
                            title: '编辑',
                            val: 'edit',
                        }));
                    },
                }}
            >
                编辑
            </PremButton>
        );
    };

    const remove = (text, row, _, action) => {
        return (
            <PremButton
                pop={{
                    title: '是否删除该用户?',
                    okText: '确认',
                    cancelText: '取消',
                    onConfirm: () => {
                        alert(0);
                    },
                }}
                btn={{
                    size: 'small',
                    type: 'danger',
                }}
            >
                删除
            </PremButton>
        );
    };

    const columns = useMemo(() => {
        let defcolumn = getcolumns(setdrawer);
        return defcolumn.concat({
            title: '操作',
            valueType: 'option',
            width: 150,
            render: (text, row, _, action) => [
                detail(text, row, _, action),
                edit(text, row, _, action),
                remove(text, row, _, action),
            ],
        })
    }, []);

    return (
        <div style={{ position: 'relative' }}>
            <AutoTable
                pagetitle="左玲玲"
                columns={columns}
                path="/ngic-auth/sysUser/query/page"
                actionRef={actionRef}
                pageextra={'add'}
                resizeable={true}
                childposition="left"
                addconfig={{
                    // access: 'sysDepartment_save',
                    btn: {
                        disabled: false,
                        onClick: () => {
                            setdrawer((s) => ({
                                ...s,
                                visible: true,
                                item: null,
                                title: '新增',
                                val: 'add',
                            }));
                        },
                    },
                }}
            >

                <TreeRender
                    {...treeoptions}
                    onselected={(vals) => {
                        setnode(vals[0] ?? "");
                    }}
                    style={{ borderRight: "1px solid rgba(0, 0, 0, 0.06)", paddingRight: 15 }}
                />
            </AutoTable>

            <DrawerPro
                fields={columns}
                detailpath="/ngic-auth/sysUser/query/detail"
                params={{ id: drawer?.item?.id }}
                formRef={formRef}
                placement="right"
                onClose={() => {
                    setdrawer((s) => ({
                        ...s,
                        visible: false,
                    }));
                }}
                {...drawer}
            />
        </div>
    );
}

export default Treezll;