/** @format */

import * as React from 'react';
import {Switch, InputNumber, Alert} from 'antd';
import {ColumnProps} from 'antd/es/table';
import Table from '../../../../components/table';
interface MerchantInfo {
    index: number;
    merchant_name: string;
    api_name: string;
    day_count: number;
    inventory: number;
    merchant_child_api_id: number;
    id: number;
    enable: boolean;
}

interface Iprops {
    value?: MerchantInfo[];
    loading?: boolean;
    max?: number;
    onChange?: (values: any) => void;
}
export default React.forwardRef((props: Iprops, ref) => {
    const {value = [], loading = false, max = 0, onChange} = props;

    const handleChange = (record: MerchantInfo) => {
        const newValue = value.map(element => {
            if (element.id === record.id) {
                return record;
            }
            return element;
        });
        onChange && onChange(newValue);
    };
    const columns: ColumnProps<MerchantInfo>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 80,
        },
        {
            title: '商户',
            dataIndex: 'merchant_name',
            key: 'merchant_name',
            filterMultiple: true,
            filters: value.map(element => {
                return {
                    text: element.merchant_name,
                    value: String(element.merchant_child_api_id),
                };
            }),
            onFilter: (value: number, record: any) => {
                return record.merchant_child_api_id === value;
            },
        },
        {
            title: '接口',
            dataIndex: 'api_name',
            key: 'api_name',
            filters: value.map(element => {
                return {
                    text: element.api_name,
                    value: String(element.merchant_child_api_id),
                };
            }),
            onFilter: (value: number, record: any) => {
                return record.merchant_child_api_id === value;
            },
        },
        {
            title: '日调用量上限',
            dataIndex: 'day_count',
            key: 'day_count',
            width: 130,
            render: (text, record) => {
                return (
                    <InputNumber
                        value={text}
                        min={0}
                        onChange={value =>
                            handleChange({
                                ...record,
                                day_count: value || 0,
                            })
                        }
                    />
                );
            },
        },
        {
            title: '日优先保有量',
            dataIndex: 'inventory',
            key: 'inventory',
            width: 130,
            render: (text, record) => {
                return (
                    <InputNumber
                        onChange={value =>
                            handleChange({
                                ...record,
                                inventory: value || 0,
                            })
                        }
                        value={text}
                        min={0}
                    />
                );
            },
        },
        {
            title: '开关',
            dataIndex: 'enable',
            key: 'enable',
            render: (text, record) => {
                return (
                    <Switch
                        checked={text}
                        onChange={value => {
                            handleChange({
                                ...record,
                                enable: value,
                            });
                        }}
                    />
                );
            },
        },
    ];
    return (
        <>
            <Alert message={`总日优先保有量不能超过日调用量上限(${max})`} type="warning" />
            <Table
                loading={loading}
                rowKey="merchant_child_api_id"
                dataSource={value}
                columns={columns}
                pagination={false}
            />
        </>
    );
});
