

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';
import {deepGetVal,unique} from '@/utils';

import './style.less';




export default function DrawerContent(props) {

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

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


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



    return visible&&currentRow&&columns.length>0 ? (
        <>
            <DrawerForm
                title={title}
                visible={visible}
                onVisibleChange={onVisibleChange}
                formRef={drawerRef}
                drawerProps={{
                    forceRender: true,
                    destroyOnClose: true,
                }}
                onFinish={async (values) => {
                    //   console.log({onFinishFunc,values});
                      onFinishFunc(values,defaultSelectedKeys);
                }}
            
            >
            
                <ProTable
                    columns={columns}
                    rowKey={rowKeys}
                    tableClassName="drawerContent"
                    request={renderListFunc}
                    layout={'inline'}
                    search={{
                        ...tableSearch,
                        span:8,
                    }}
                    onSubmit={(u)=>{
                        setIfSearch(true);
                    }}
                    onReset={()=>{setIfSearch(false);}}
                    rowSelection={{
                        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
                        // 注释该行则默认不显示下拉选项
                        hideSelectAll:true,
                        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                        checkStrictly:false,
                        selectedRowKeys:selectedKeys,
                        onChange:(selectedRowKeys, selectedRows)=>{
                            setSelectedKeys(selectedRowKeys);
                            
                        },
                        onSelect:(record, selected, selectedRows, nativeEvent)=>{
                            // console.log({record, selected, selectedRows, nativeEvent,ifSearch});
                            if(tableSearch){

                                let _defaultSelectedKeys = defaultSelectedKeys;
                                let {children} = record;
                                let arr=[]
    
                                if(children&&children.length>0){
                                   arr = deepGetVal(children,rowKeys,'children');
                                }
                                arr.push(record[rowKeys]);
    
    
                                if(!selected){
                                    arr.forEach(val=>{
                                        const index =  defaultSelectedKeys.findIndex(item=>item == val);
                                    // console.log(index,record[rowKeys],defaultSelectedKeys)
                                        if(index != -1){
                                            _defaultSelectedKeys.splice(index,1);
                                        }
                                    });
                                    _defaultSelectedKeys = unique(_defaultSelectedKeys);
                                    setDefaultSelectedKeys(_defaultSelectedKeys);
    
                                }else{
                                    let tempArr = _defaultSelectedKeys.concat(arr);
                                    tempArr = unique(tempArr);
                                    setDefaultSelectedKeys([].concat(tempArr));
                                }

                            }else {
                                const keys = selectedRows.map(item=>item[rowKeys]);
                                setDefaultSelectedKeys([].concat(keys));
                            }
                        }
                    }}
                />
            
            </DrawerForm>
        </>
    ) : <></>
}
