

import React,{useState,useEffect,useRef} from 'react'
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {Table } from 'antd';
import { DrawerForm } from '@ant-design/pro-form';






export default function DrawerContent(props) {

    const { 
        visible=false,
        onVisibleChange=()=>{},
        currentRow={},
        renderListFunc=()=>{},
        onFinishFunc=()=>{console.log('init onFinishFunc')},
        columns=[],
        defaultSelected=[],
        config={}
    } = props;
    
    const {rowKeys='id',tableSearch=false,} = config;
    const drawerRef = useRef();
    const [selectedKeys,setSelectedKeys] = useState([]);

    const renderDefault = ()=>{
        const defaultSelects = defaultSelected;
        setSelectedKeys(defaultSelects);
    }


    useEffect(()=>{
        renderDefault();
    },[currentRow,defaultSelected])



    return visible&&currentRow&&columns.length>0 ? (
        <PageContainer className="DrawerContent">
            <DrawerForm
                title="绑定用户"
                visible={visible}
                onVisibleChange={onVisibleChange}
                formRef={drawerRef}
                drawerProps={{
                    forceRender: true,
                    destroyOnClose: true,
                }}
                onFinish={async (values) => {
                    //   console.log({onFinishFunc,values});
                      onFinishFunc(values,selectedKeys);
                }}
            
            >
            
                <ProTable
                    columns={columns}
                    rowKey={rowKeys}
                    tableClassName="drawerContent"
                    request={renderListFunc}
                    search={tableSearch}
                    rowSelection={{
                        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
                        // 注释该行则默认不显示下拉选项
                        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                        selectedRowKeys:selectedKeys,
                        onChange:(selectedRowKeys, selectedRows)=>{
                            setSelectedKeys(selectedRowKeys);
                        }
                    }}
                />
            
            </DrawerForm>
        </PageContainer>
    ) : <></>
}
