import { Button, Form, Input, Modal, Select, DatePicker,Checkbox } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { createPatrolTemplate, delPatrolTemplate, updatePatrolTemplate, getPatrolTemplate } from '../actions/template';
import moment from 'moment';

const { RangePicker } = DatePicker;
const { TextArea } = Input;

const PlanModal = ({ visible, onCancel, dispatch, type, curRecord, tableRef, checkItemsGroup }) => {
    const [form] = Form.useForm();
    const shigutypes = [{value:1,label: '邮件告警'},
    {value:2,label:'短信告警'}]
    return (
        <Modal
            visible={visible}
            title="下发告警"
            okText="确定"
            cancelText="取消"
            onCancel={() => {
                form.resetFields();
                onCancel();
            }}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {

                        const params = {
                            ...values,
                        }

                        if (type === 'create') {
                            dispatch(createPatrolTemplate(params)).then(res => {
                                if (res.success) {
                                    tableRef.current.reload();
                                    form.resetFields();
                                    onCancel();
                                }
                            })
                        } else {
                            dispatch(updatePatrolTemplate({
                                ...params,
                                id: curRecord.id
                            })).then(res => {
                                if (res.success) {
                                    tableRef.current.reload();
                                    form.resetFields();
                                    onCancel();
                                }
                            })
                        }
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                // layout="vertical"
                name="form_in_modal"
                initialValues={{
                    ...curRecord,
                    checkItems: curRecord?.checkItems?.map(c => c.id)
                }}
                labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} offe
            >
                <Form.Item
                    name="name"
                    label="告警接收人"
                    rules={[
                        { required: true, message: '请输入告警接收人' },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label="告警方式">
                    <Checkbox.Group options={shigutypes}/>
                </Form.Item>
            </Form>
        </Modal >
    );
};

function mapStateToProps (state) {
    const { auth, checkItemsGroup } = state
    return {
        user: auth.user,
        checkItemsGroup: checkItemsGroup.data || []
    }
}
export default connect(mapStateToProps)(PlanModal);