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 {putxinxi} from '../actions/yujingguanli'
import moment from 'moment';

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

const PlanModal = ({ visible, onCancel, dispatch, type, curRecord, tableRef, checkItemsGroup,userlist }) => {
    const [form] = Form.useForm();
    const shigutypes = [{value:1,label: '邮件告警'},
    {value:2,label:'短信告警'}]
    console.log(userlist,'userlist')
    return (
        <Modal
            visible={visible}
            title="下发告警"
            okText="确定"
            cancelText="取消"
            onCancel={() => {
                form.resetFields();
                onCancel();
            }}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        const params = {
                            ...values,
                        }
                        console.log('user,',userlist)
                        let usedata = userlist.filter(i=>i?.username===values.name)
                        console.log(usedata,'usedata')
                        dispatch(putxinxi({phone:[params.name],email:[usedata[0]?.email],type:params.type})).then(res=>{
                            console.log(res,'res')
                        })
                     console.log(params,'params')
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                // layout="vertical"
                name="form_in_modal"
             
                labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}
            >
                <Form.Item
                    name="name"
                    label="告警接收人"
                    rules={[
                        { required: true, message: '请输入用户账号' },
                    ]}
                >
                    <Select options={userlist?.map(i=>({value:i?.username,label:i?.name}))}></Select>
                </Form.Item>
                <Form.Item label="告警方式"
                name="type">
                    <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);