/** @format */

import * as React from 'react';
import {Row, Col, Form, Popconfirm} from 'antd';
import Button from '../../components/button';
import Input from '../input';
import {WrappedFormUtils} from 'antd/es/form/Form';
import Select, {SelectOptionProp} from '../select/select';
import {useParmasRuleList} from '../../service/baseApi';

interface ValueProps {
    name: string;
    value: string;
    id: number | string;
    rule_id: number;
}
interface Iprops {
    value?: ValueProps[];
    options?: SelectOptionProp[];
    onChange?: (values: any) => void;
    form: WrappedFormUtils;
    type?: 'input' | 'select';
    rule?: boolean;
}
export default React.forwardRef((props: Iprops, ref) => {
    const {value = [], form, options = [], onChange, type = 'select', rule = true} = props;
    const [state, requestData] = useParmasRuleList();
    const {getFieldDecorator} = form;
    const handleChangeName = (record: ValueProps) => {
        onChange &&
            onChange(
                value.map(element => {
                    if (element.id === record.id) {
                        return record;
                    } else {
                        return element;
                    }
                }),
            );
    };
    React.useEffect(() => {
        if (rule) {
            requestData();
        }
    }, [rule]);
    const handlRemove = (id: number | string) => {
        onChange && onChange(value.filter(element => id !== element.id));
    };
    return (
        <>
            {value.map(element => {
                return (
                    <Row key={element.id} gutter={12}>
                        <Col xxl={6} lg={7}>
                            <Form.Item label='参数名' labelCol={{sm: {span: 8}}} wrapperCol={{sm: {span: 16}}}>
                                {getFieldDecorator(element.id.toString() + 'name', {
                                    initialValue: element.name || undefined,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择过滤字段',
                                        },
                                    ],
                                })(
                                    type === 'select' ? (
                                        <Select
                                            onChange={value => {
                                                handleChangeName({
                                                    ...element,
                                                    name: value as string,
                                                });
                                            }}
                                            placeholder='请选择过滤字段'
                                            options={options}
                                        />
                                    ) : (
                                        <Input
                                            placeholder='请输入参数名'
                                            onChange={e =>
                                                handleChangeName({
                                                    ...element,
                                                    name: e.target.value,
                                                })
                                            }
                                        />
                                    ),
                                )}
                            </Form.Item>
                        </Col>
                        {rule ? (
                            <Col xxl={6} lg={8}>
                                <Form.Item label='过滤规则' labelCol={{sm: {span: 5}}} wrapperCol={{sm: {span: 16}}}>
                                    {getFieldDecorator(element.id.toString() + 'rule', {
                                        initialValue: element.rule_id,
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择过滤规则',
                                            },
                                        ],
                                    })(
                                        <Select
                                            onChange={rule_id => {
                                                handleChangeName({
                                                    ...element,
                                                    rule_id: rule_id as number,
                                                });
                                            }}
                                            placeholder='请选择过滤规则'
                                            loading={state.loading}
                                            options={
                                                !element.name
                                                    ? state.dataSource
                                                    : state.dataSource.filter(item => {
                                                          if (item.effective_param === element.name) {
                                                              return true;
                                                          }
                                                          return !item.effective_param;
                                                      })
                                            }
                                        />,
                                    )}
                                </Form.Item>
                            </Col>
                        ) : null}
                        <Col xxl={8} lg={7}>
                            <Form.Item label='过滤条件' labelCol={{sm: {span: 6}}} wrapperCol={{sm: {span: 16}}}>
                                {getFieldDecorator(element.id.toString() + 'value', {
                                    initialValue: element.value,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入过滤条件',
                                        },
                                    ],
                                })(
                                    <Input
                                        placeholder='请输入过滤条件'
                                        onChange={event => {
                                            handleChangeName({
                                                ...element,
                                                value: event.target.value,
                                            });
                                        }}
                                    />,
                                )}
                            </Form.Item>
                        </Col>
                        <Col xxl={4} lg={2}>
                            <Popconfirm title='是否删除该条过滤规则' onConfirm={() => handlRemove(element.id)}>
                                <Button size='small' type='danger' icon='delete' />
                            </Popconfirm>
                        </Col>
                    </Row>
                );
            })}
        </>
    );
});
