import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Form, AutoComplete, DatePicker, Button, Input, Drawer, message } from 'kts-xui';
import { Row, Divider,  TreeSelect } from 'kts-components-antd-x4';
import agent from '../Server';
import moment from 'moment';
const { RangePicker } = DatePicker;
const AddTemplate = (props: any) => {
    const [form] = Form.useForm();
    const uuid=React.useMemo(()=>props.uuid,[]); 

    const formItemLayout = {
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
    };
   
    const onFinish = useCallback(async (values) => {
        const keys = Object.keys(values);
        // const d = rules.reduce((item, b) => {
        //     if (keys.includes(b.field)) {
        //         item.push({
        //             ...b,
        //             fieldExpectValue: values[b.field]
        //         });
        //         return item;
        //     } else {
        //         return item
        //     }
        // }, [])
        const dd = {
            ...values, 
        };
        let res = {} as any;
        // 如果有id一定是修改
        if(values.id){
            res = await agent.post('/web/verifier/blacklist/saveOrUpdateBlackList', dd, this);
        } else if(values.expectValue.includes(',') || values.expectValue.includes('，')){
            // 如果输入值中含有逗号，就是批量添加
            res = await agent.post('/web/verifier/blacklist/batchSaveBlackList', dd, this);
        } else {
            //单个新增
            res = await agent.post('/web/verifier/blacklist/saveOrUpdateBlackList', dd, this);
        }
        if (res.res === true) {
            message.success('操作成功');
            onSuccess();
        }
    }, []);
    const onSuccess = () => {
        props.onSuccess();
    }
    const onClose = () => {
        props.onClose();
    };
    const onSubmit = () => {
        form.submit();
    }; 
    // const loopChildData = (item) => {
    //     if (item.children && item.children.length > 0) {
    //         item = {
    //             ...item,
    //             label: item.categoryName,
    //             value: item.categoryName,
    //         }
    //         item.children = item.children.map(ele => {
    //             return loopChildData(ele);
    //         })
    //         return item;
    //     } else {
    //         return {
    //             ...item,
    //             label: item.categoryName,
    //             value: item.categoryName,
    //         }
    //     }
    // } 
    return (
        <Drawer
            title={`${props.product?.id ? '修改商品黑名单' : '新增商品黑名单'}`}
            visible={true}
            onClose={onClose}
            footer={
                <div
                    style={{
                        textAlign: 'right',
                    }}
                >
                    <Button onClick={onClose} style={{ marginRight: 8 }}>
                        取消
                    </Button>
                    <Button onClick={onSubmit} type="primary">
                        提交
                    </Button>
                </div>
            }
        >
            <Form {...formItemLayout} layout="vertical" form={form} onFinish={onFinish}>
                <Form.Item style={{display: 'none'}} initialValue={`${props.product?.id || ''}`} label="id" name='id'>
                    <Input disabled={true} style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item initialValue={'规格型号'} label="字段名称" name='name'>
                    <Input disabled={true} style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item initialValue={'包含'} label="规则" style={{display: 'none'}} name='rule'>
                    <Input disabled={true} style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item initialValue={`${props.product?.expectValue || ''}`} label={`${props.product?.id ? '字段内容' : '字段内容（支持输入多个规格型号，用“,”间隔）'}`} name='expectValue' rules={[{ required: true, message: '请输入必填项' }, { type: 'string', max: 50 }]}>
                    <Input.TextArea rows={6} style={{ width: '100%' }} maxLength={500}/>
                </Form.Item>
                <Divider />  
            </Form>

        </Drawer>
    );

}
export default AddTemplate;