import * as React from 'react';
import { Button, Drawer, Form, DatePicker, message,Modal } from 'kts-xui';
import agent from '../Server';
import moment from 'moment';
const { RangePicker } = DatePicker;
/** Props接口 */
interface IProps {
    children: any;
    list?: string[];
    templateUuid: string;
    onRefresh:()=>void;
}
/**
 * 批量修改有效时间面板
 */
export default function Component(props: IProps) {
    const [loading, setLoading] = React.useState(false);
    const [modal, setModal] = React.useState(false);
    const [form] = Form.useForm();
    const onClose = () => {
        setModal(false)
        form.resetFields();
    }
    const onSubmit = () => {
        form.submit();

    }
    //提交表单
    const onFinish = values => {
        const dd = {
            ...values,
            effectiveStart: moment(values['time'][0]).format('YYYY-MM-DD'),
            effectiveEnd: moment(values['time'][1]).format('YYYY-MM-DD'),
            includeManyGroupUuid: props.list||[],
            templateUuid: props.templateUuid
        };
        submitBatch(dd);
    }
    //批量提交
    const submitBatch = async (data) => {
        const res: any = await agent.post('/web/verifier/rule/batchUpdate', data, null);
        if (res.res) {
            message.success('操作成功');
            onClose();
            props.onRefresh();
        }
    }
    //打开面板
    const showModal = async () => {
        setModal(true)
    }
    const disabledDate = current => {
        return current && current < moment().subtract(1, 'day');
    };
    return (
        <div>
            <div style={{ cursor: 'pointer',width:'100%' }} onClick={showModal}>{props.children}</div>
            <Drawer
                title="批量修改有效时间"
                onClose={onClose}
                visible={modal}
                footer={
                    <div
                        style={{
                            textAlign: 'right',
                        }}
                    >
                        <Button style={{ marginRight: 8 }} key='1' type="primary" onClick={onSubmit}>修改</Button>
                        <Button key='2' onClick={onClose}>取消</Button>
                    </div>}
            >
                <Form
                    form={form}
                    layout='vertical'
                    onFinish={onFinish}
                >
                    <Form.Item
                        name='time'
                        label='规则有效时间'
                        rules={[
                            { required: true, }
                        ]}
                    >
                        <RangePicker disabledDate={disabledDate} style={{ width: '100%' }} />
                    </Form.Item>
                </Form>
            </Drawer>

        </div>
    );

}