import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { Button, Form, Radio, PageHeaderFoot,message } from 'kts-xui';
import agent from '../../Server';
import {
    InfoCircleOutlined
} from '@ant-design/icons';
export default function Rule(props: any) {
    const [form] = Form.useForm();
    const [mode, setMode] = useState(1);
    const formItemLayout = useMemo(() => {
        return {
            labelCol: { span: 12 },
            wrapperCol: { span: 12 },
        };
    }, []);
    useEffect(() => {
        (async () => {
            const res: any = await agent.post('/verifierparty/config/default/get', {}, null);
            if (res.res) {
                setMode(res.res.type)
            }
        })()
    }, []);
    useEffect(() => {
        form.setFieldsValue({ type: mode })
    }, [mode]);
    const onValuesChange = (changedvalue: any, allvalue: any) => {
        agent.post('/verifierparty/config/default/update', { ...changedvalue }, null);
    }
    const onFinish = async (values) => {
        const res = await agent.post('/verifierparty/config/default/update', { ...values }, null);
        if (res.res) {
            message.success('操作成功');
        }
    }
    const onButtonChange = (e: any) => {
        props.changeView(e.target.value);
    }
    const onSave = () => {
        form.submit()
    }
    const topExpand = () => {
        return (
            <div style={{ display: 'flex', alignItems: 'center', height: 44, justifyContent: "space-between", }}>
                <Radio.Group onChange={onButtonChange} defaultValue="filter" style={{ flex: 'none', display: 'flex', marginRight: 15 }}>
                    <Radio.Button value="white" >有效名单设置</Radio.Button>
                    <Radio.Button value="black" >无效名单设置</Radio.Button>
                    <Radio.Button value="filter">切换过滤方式</Radio.Button>
                </Radio.Group>
                <Button onClick={onSave} type="primary" >保存</Button>
            </div>);
    }
    return (
        <div style={{ flex: 'none', position: 'relative', zIndex: 1 }}>
            <PageHeaderFoot
                expandLeft={topExpand()}
            >
            </PageHeaderFoot>
            <div style={{ padding: '16px 20px', justifyContent: "space-between", borderBottom: '1px solid #f0f0f0', }}><p style={{ fontSize: 14, color: '#0074FF', paddingTop: 18 }}>选择过滤方式</p>
                <Form style={{ width: 605 }} form={form} {...formItemLayout} layout="horizontal" onFinish={onFinish}>
                    <Form.Item labelAlign="left" name="type" label='您期望用哪个名单来过滤你的有效性？'>
                        <Radio.Group >
                            <Radio value={2}>使用无效名单过滤</Radio>
                            <Radio value={1}>使用有效名单过滤</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
                <p><a><InfoCircleOutlined /> 温馨提示：</a>当您使用有效名单过滤时，只有有效名单里面的商品才可以允许发送；当您使用无效名单过滤时，除了无效名单里面的商品不能发送外，其他商品都可以发送给核验方。</p>
            </div>

        </div>);
}