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))
        console.log(option.filter(item => item.Type === value))
    }

    const onChangeType1 = (value) => {
        form.setFieldsValue({
            third_id: value
        })
    }

    return (
        <SiteModal
            {...props}
            title="模板添加"
            bodyStyle={{ width: '100%', minHeight: '100px' }}
            style={{ top: 200, borderRadius: '20px' }}
            width="820px"
            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.Option value="企业微信">企业微信</Select.Option>
                                </Select>
                            </Item>
                        </div>
                    </Item>
                    


                    {form.getFieldsValue().type !== '企业微信' ?
                        <>
                            <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="请选择第三方模板名称"
                                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: '请选择第三方模板名称',
                                            },
                                        ]}
                                    >
                                        <Select style={{width:'12rem'}} onChange={(value) => onChangeType1(value)} placeholder="请选择模板名称" >
                                            <Select.Option value="普通文本">普通文本</Select.Option>
                                            <Select.Option value="文字卡片">文字卡片</Select.Option>
                                            <Select.Option value="图片消息">图片消息</Select.Option>
                                            <Select.Option value="图片">图片</Select.Option>
                                        </Select>
                                    </Item>
                                    <Item
                                        label="企业微信应用id"
                                        labelCol={{ span: 11 }}
                                        name="weixin"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入企业微信号',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入企业微信号" />
                                    </Item>
                                </div>
                            </Item>
                        </>
                    }




                    <Item
                        label="模板参数1.0"
                        labelCol={{ span: 6 }}
                        name="params"
                    >
                        <TextArea rows={2} style={{ width: '96%' }} placeholder="first|Second|Third|Four" />
                    </Item>
                    <Item
                        label="模板参数2.0"
                        labelCol={{ span: 6 }}
                        name="param1"
                    >
                        <TextArea rows={2} style={{ width: '96%' }} placeholder="first|Second|Third|Four" />
                    </Item>
                    <Item
                        label="参数说明"
                        name="desc"
                        labelCol={{ span: 6 }}
                    >
                        <TextArea style={{ width: '96%' }} rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" />
                    </Item>
                    <Item
                        label="解析规则"
                        name="analysis_params"
                        labelCol={{ span: 6 }}
                    >
                        <TextArea rows={2} style={{ width: '96%' }} placeholder="param1|param2|param3|param4" />
                    </Item>
                </Form>
            </div>

        </SiteModal>
    )
}
export default AddModal;