import * as React from 'react';
import { useState, useMemo, useRef } from 'react';
import ModalPro from '@/components/ModalPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import procolumns from './procolumns';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';

function Project({ equipmentCheckStandardId }) {
    const actionRef = useRef(),
        formRef = useRef();
    const [drawer, setdrawer] = useState({
        open: false,
    });
    const pathconfig = useMemo(() => {
        let pathconf = procolumns(setdrawer)?.pathconfig ?? {};
        return pathconf;
    }, []);
    const { run, loading, runAsync } = useRequest(doFetch, {
        manual: true,
        onSuccess: (res, params) => {
            if (res?.code == '0000') {
                actionRef?.current?.reload();
                setdrawer((s) => ({
                    ...s,
                    open: false,
                }));
            }
        },
    });

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

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

    const remove = (text, row, _, action) => {
        return (
            <PremButton
                pop={{
                    title: '是否删除?',
                    okText: '确认',
                    cancelText: '取消',
                    onConfirm: async () => {
                        await runAsync({ url: pathconfig?.delete || '/delete', params: { id: row?.id } });
                    },
                }}
                btn={{
                    size: 'small',
                    type: 'danger',
                }}
            >
                删除
            </PremButton>
        );
    };

    const columns = useMemo(() => {
        let defcolumn = procolumns(drawer?.id)?.columns;
        return defcolumn.concat({
            title: '操作',
            valueType: 'option',
            width: 150,
            render: (text, row, _, action) => [
                pathconfig?.enableedit && edit(text, row, _, action),
                pathconfig?.enabledelete && remove(text, row, _, action),
            ],
        });
    }, [drawer?.id]);

    return (
        <div style={{ position: 'relative' }}>
            <AutoTable
                columns={columns}
                actionRef={actionRef}
                path={pathconfig?.list || '/ngic-auth/sysUser/query/page'}
                pageextra={pathconfig?.enableadd ? 'add' : null}
                resizeable={false}
                addconfig={{
                    // access: 'sysDepartment_save',
                    btn: {
                        type: 'primary',
                        disabled: false,
                        onClick: () => {
                            setdrawer((s) => ({
                                ...s,
                                open: true,
                                item: null,
                                title: '新增',
                                val: 'add',
                                id: null

                            }));
                        },
                    },
                }}
                extraparams={{ equipmentCheckStandardId }}
            />

            <ModalPro
                fields={columns}
                params={{ id: drawer?.item?.id }}
                formRef={formRef}
                placement="right"
                detailpath={pathconfig?.detail || null}
                detailData={drawer?.item}
                defaultFormValue={drawer?.item}
                onClose={() => {
                    setdrawer((s) => ({
                        ...s,
                        open: false,
                    }));
                }}
                {...drawer}
                onFinish={async (vals) => {
                    if (drawer?.val == 'add') {
                        await runAsync({ url: pathconfig?.add || '/add', params: { ...vals, equipmentCheckStandardId } });
                    } else if (drawer?.val == 'edit') {
                        await runAsync({ url: pathconfig?.edit || '/edit', params: { ...vals, id: drawer?.item?.id, equipmentCheckStandardId } });
                    }
                }}
            />
        </div>
    );
}

export default Project;