/** @format */

import * as React from 'react';
import {Collapse, Switch, InputNumber, Icon, Empty} from 'antd';
import Button from '../../../../components/button';
import Table from '../../../../components/table';
import {ColumnProps} from 'antd/es/table';
const {Panel} = Collapse;

interface GroupProps {
    group_no: number;
    group_name: string;
    id: number;
    merchant_provider_api_list: BaseApiProps[];
}
interface BaseApiProps {
    id: number;
    provider_api_id: string;
    index: number;
    platform_name: string;
    thirdpart_api_name: string;
    day_count: number;
    enable: boolean;
    parentdId: number;
}
enum DisplacementTargt {
    UP = '上移',
    DOWN = '下移',
}
interface Iprops {
    isMove: boolean;
    value?: GroupProps[];
    onChange?: (values: any) => void;
}
export default React.forwardRef((props: Iprops, ref) => {
    const {value = [], isMove = true, onChange} = props;

    const handleChange = (values: BaseApiProps) => {
        const newValues = value.map(element => {
            if (element.id === values.parentdId) {
                return {
                    ...element,
                    merchant_provider_api_list: element.merchant_provider_api_list.map(item => {
                        if (item.id === values.id) {
                            return values;
                        }
                        return item;
                    }),
                };
            }
            return element;
        });
        onChange && onChange(newValues);
    };
    const columns: ColumnProps<BaseApiProps>[] = [
        {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
        },
        {
            title: '接口',
            key: 'thirdpart_api_name',
            dataIndex: 'thirdpart_api_name',
        },
        {
            title: '公司名称',
            key: 'platform_name',
            dataIndex: 'platform_name',
        },
        {
            title: '每日调用量限额',
            key: 'day_count',
            dataIndex: 'day_count',
            render: (text, record) => (
                <InputNumber
                    value={text}
                    min={0}
                    onChange={value => {
                        handleChange({...record, day_count: Number(value)});
                    }}
                />
            ),
        },
        {
            title: '是否启用',
            dataIndex: 'enable',
            render: (text, record) => {
                return (
                    <Switch
                        checked={text}
                        onChange={value => {
                            handleChange({...record, enable: value});
                        }}
                    />
                );
            },
        },
    ];

    if (!value.length) {
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }
    return (
        <Collapse
            defaultActiveKey={[value[0].group_no]}
            expandIcon={({isActive}) => <Icon type='caret-right' rotate={isActive ? 90 : 0} />}
            accordion
        >
            {value.map((element: GroupProps) => {
                return (
                    <Panel header={`类目(${element.group_name || '--'})`} key={element.group_no}>
                        <Table
                            size='small'
                            rowKey='id'
                            pagination={false}
                            columns={columns}
                            bordered={false}
                            dataSource={element.merchant_provider_api_list.map(item => {
                                return {
                                    ...item,
                                    parentdId: element.id,
                                };
                            })}
                            scroll={{x: false}}
                        />
                    </Panel>
                );
            })}
        </Collapse>
    );
});
