/** @format */

import * as React from 'react';
import {Switch, Collapse, Empty} from 'antd';
import {ColumnProps} from 'antd/es/table';

import Table from '../../../../../../components/table';
const {Panel} = Collapse;
interface ReciveBaseApiPoprs {
    priority: number;
    thirdpart_api_name: string;
    platform_name: string;
    enable: boolean;
    id: number;
}
interface BaseApiProps extends ReciveBaseApiPoprs {
    parentdId: number;
}
interface groupProps {
    group_no: number;
    group_name: string;
    id: number;
    provider_api_list: ReciveBaseApiPoprs[];
}
interface Iprops {
    value?: groupProps[];
    onChange?: (value: any) => void;
}
export default React.forwardRef((props: Iprops, ref) => {
    const {value = [], onChange} = props;
    const handleChange = (record: BaseApiProps) => {
        const newValue = value.map(element => {
            if (element.id === record.parentdId) {
                element.provider_api_list = element.provider_api_list.map(item => {
                    if (item.id === record.id) {
                        return record;
                    }
                    return item;
                });
                return element;
            }
            return element;
        });
        onChange && onChange(newValue);
    };
    const tableColumns = React.useMemo(() => {
        const colums: ColumnProps<BaseApiProps>[] = [
            {title: '优先级', dataIndex: 'priority', key: 'priority', width: 80},
            {title: '接口', dataIndex: 'thirdpart_api_name', key: 'thirdpart_api_name'},
            {title: '公司名称', dataIndex: 'platform_name', key: 'platform_name'},
            {
                title: '是否启用',
                dataIndex: 'enable',
                key: 'enable',
                width: 100,
                render: (text, record) => {
                    return (
                        <Switch
                            checked={text}
                            onChange={value => {
                                handleChange({
                                    ...record,
                                    enable: value,
                                });
                            }}
                        />
                    );
                },
            },
        ];
        return colums;
    }, [value]);
    if (!value.length) {
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }
    return (
        <Collapse defaultActiveKey={[value[0].group_no]} accordion>
            {value.map(element => {
                return (
                    <Panel key={element.group_no} header={`${element.group_name || '--'}`}>
                        <Table
                            size='small'
                            rowKey='id'
                            bordered={false}
                            columns={tableColumns}
                            pagination={false}
                            scroll={{x: false}}
                            dataSource={element.provider_api_list.map(item => {
                                return {
                                    ...item,
                                    parentdId: element.id,
                                };
                            })}
                        />
                    </Panel>
                );
            })}
        </Collapse>
    );
});
