import React, { useState, useEffect } from 'react'
import SiteModal from '@/components/Modal/SiteModa';
import { Form, Input, notification, Select, Row, Col } from 'antd'

const { Item } = Form;
const { TextArea } = Input;


const AddModal = props => {
    const { option } = props;

    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [templateName, setTemplateName] = useState([]);
    const onSubmit = () => {
        form.submit()
    }
    const onSubmitSuccess = () => {
        const result = form.getFieldValue()
        props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result })
        form.resetFields()
    }
    useEffect(() => {
        if (option) {
            setTemplateName(option.filter(item => item.Type === '公众号'))
            form.setFieldsValue({
                type: '公众号'
            })
        }
    }, [props])
    const layout = {
        layout: 'horizontal',
        labelCol: {
            span: 4,
        },
        wrapperCol: {
            span: 19,
        },
    };
    // useEffect(()=>{

    // },[props.template])
    const onChange = (value, option) => {
        form.setFieldsValue({
            third_id: option.code
        })
        // setTemplateName(option.filter(item => item.Type === value))

    };
    const onChangeType = (value) => {
        setTemplateName(option.filter(item => item.Type === value))
    }
    return (
        <SiteModal
            {...props}
            title="模板添加"
            bodyStyle={{ width: '100%', minHeight: '100px' }}
            style={{ top: 200, borderRadius: '20px' }}
            width="800px"
            destroyOnClose
            cancelText="取消"
            okText="确认"
            onOk={() => onSubmit()}
            confirmLoading={loading}
        >
            <div style={{ width: "750px", height: "500px", overflowY: "scroll", overflowX: "hidden" }}>
                <Form form={form}  {...layout} onFinish={onSubmitSuccess}>
                    <Item
                        label="模板名称"
                        wrapperCol={{ span: 17 }}
                        labelCol={{ span: 6 }}
                        style={{ marginBottom: '0' }}
                    >
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Item
                                label=""
                                name="name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入模板名称',
                                    },
                                ]}
                            >
                                <Input    style={{ width: '12rem' }} placeholder="请输入模板名称" />
                            </Item>
                            <Item
                                label="模板类型"
                                name="type"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择模板类型',
                                    },
                                ]}
                            >
                                <Select style={{ width: '10rem' }} onChange={(value) => onChangeType(value)} >
                                    <Select.Option value="公众号">公众号</Select.Option>
                                    <Select.Option value="短信">短信</Select.Option>
                                </Select>
                            </Item>
                        </div>
                    </Item>


                    <Item
                        label="请输入第三方模板名称"
                        wrapperCol={{ span: 17 }}
                        labelCol={{ span: 6 }}
                        style={{ marginBottom: '0' }}
                    >
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Item
                                label=""
                                name="third_name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入第三方模板名称',
                                    },
                                ]}
                            >
                                {/* <Input placeholder="请输入模板名称" /> */}
                                <Select
                                    placeholder="请选择模板名称"
                                    style={{ width: '12rem' }}
                                    onChange={(value, option) => onChange(value, option)}
                                >
                                    {templateName &&
                                        templateName.length > 0 &&
                                        templateName.map((item, index) => (
                                            <Select.Option value={item.Name} key={index} code={item.Code}>
                                                {item.Name}
                                            </Select.Option>
                                        ))}
                                </Select>
                            </Item>
                            <Item
                                label="第三方模板编号"
                                name="third_id"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入第三方模板编号',
                                    },
                                ]}
                            >
                                <Input disabled placeholder="请输入第三方模板编号" />
                            </Item>
                        </div></Item>

                    <Item
                        label="模板参数"
                        labelCol={{ span: 6 }}
                        name="params"
                        rules={[
                            {
                                required: true,
                                message: '请输入模板参数',
                            },
                        ]}
                    >
                        <TextArea rows={4} style={{width:'96%'}}  placeholder="first|Second|Third|Four" />
                    </Item>
                    <Item
                        label="参数说明"
                        name="desc"
                        labelCol={{ span: 6 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入参数说明',
                            },
                        ]}
                    >
                        <TextArea style={{width:'96%'}} rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" />
                    </Item>
                    <Item
                        label="参数解析"
                        name="analysis_params"
                        labelCol={{ span: 6 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入参数解析',
                            },
                        ]}
                    >
                        <TextArea rows={4} style={{width:'96%'}}  placeholder="param1|param2|param3|param4" />
                    </Item>
                </Form>
            </div>

        </SiteModal>
    )
}
export default AddModal;