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 EditModal = props => {
    const { option, visible } = props;

    const [form] = Form.useForm();
    const [templateName, setTemplateName] = useState([]);
    const [loading, setLoading] = useState(false);
    const onSubmit = () => {
        form.submit()

    }
    const onSubmitSuccess = () => {
        const result = form.getFieldValue()
        props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result })
    }

    useEffect(() => {
        form.setFieldsValue({
            name: props.template.name,
            type: props.template.type,
            third_name: props.template.third_name,
            third_id: props.template.third_id,
            weixin:props.template.weixin,
            params: props.template.template_params1,
            param1: props.template.template_params2,
            desc: props.template.desc,
            analysis_params: props.template.analysis_params,
        })
        console.log(form.getFieldsValue().type)
        if (option) {
            setTemplateName(option.filter(item => item.Type === props.template.type))
        }
   
    }, [props.template])

    const layout = {
        layout: 'horizontal',
        labelCol: {
            span: 10,
        },
        wrapperCol: {
            span: 19,
        },
    };

    const onChangeType = (value) => {
        console.log(option.filter(item => item.Type === value), '123');
        setTemplateName(option.filter(item => item.Type === value))
    }
    const onChange = (value, option) => {
        form.setFieldsValue({
            third_id: option.code
        })
        // setTemplateName(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}>
                    <Row gutter={24}>
                        <Col span={11}>
                            <Item
                                label="模板名称"
                                name="name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入模板名称',
                                    },
                                ]}
                            >
                                <Input placeholder="请输入模板名称" />
                            </Item>
                        </Col>
                        <Col span={11}>
                            <Item
                                label="模板类型"
                                name="type"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择模板类型',
                                    },
                                ]}
                            >
                                <Select onChange={(value) => onChangeType(value)}>
                                    <Select.Option value="公众号">公众号</Select.Option>
                                    <Select.Option value="短信">短信</Select.Option>
                                    <Select.Option value="企业微信">企业微信</Select.Option>
                                </Select>
                            </Item>
                        </Col>
                    </Row>
                    {form.getFieldsValue().type == '企业微信'||props.template.type=='企业微信' ?
                        <>
                            <Row gutter={24}>
                                <Col span={11}>
                                    <Item
                                        label="第三方模板名称"
                                        name="third_name"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入第三方模板名称',
                                            },
                                        ]}
                                    >
                                        <Select style={{ width: '11.5rem' }} 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>
                                </Col>
                                <Col span={11}>
                                    <Item
                                        label="企业微信应用id"
                                        // labelCol={{ span: 11 }}
                                        name="weixin"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入企业微信号',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入企业微信号" />
                                    </Item>
                                </Col>
                            </Row>
                        </> :
                        <>
                        <Row gutter={24}>
                                <Col span={11}>
                                    <Item
                                        label="第三方模板名称"
                                        name="third_name"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入第三方模板名称',
                                            },
                                        ]}
                                    >
                                        <Select
                                            placeholder="请选择模板名称"
                                            onChange={(value, option) => onChange(value, option)}

                                        >
                                            {templateName &&
                                                templateName.length > 0 &&
                                                templateName.map((item, index) => (
                                                    <Option value={item.Name} key={item.Name + index} code={item.Code}>
                                                        {item.Name}
                                                    </Option>
                                                ))}
                                        </Select>
                                    </Item>
                                </Col>
                                <Col span={11}>
                                    <Item
                                        label="第三方模板编号"
                                        name="third_id"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入第三方模板编号',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入模板名称" />
                                    </Item>
                                </Col>
                            </Row>
                            
                        </>
                    }
                    <Row gutter={24}>
                        <Col span={1}>
                            <Item>

                            </Item>
                        </Col>
                        <Col span={23}>
                            <Item
                                label="模板参数1.0"
                                labelCol={{ span: 3 }}
                                style={{ marginLeft: '1.4rem' }}
                                name="params"
                            >
                                <TextArea rows={2}  placeholder="first|Second|Third|Four" />
                            </Item>
                            <Item
                                label="模板参数2.0"
                                labelCol={{ span: 3 }}
                                style={{ marginLeft: '1.4rem' }}
                                name="param1"
                            >
                                <TextArea rows={2}  placeholder="first|Second|Third|Four" />
                            </Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={1}>
                            <Item>

                            </Item>
                        </Col>
                        <Col span={23}>
                            <Item
                                label="参数说明"
                                labelCol={{ span: 3 }}
                                style={{ marginLeft: '1.4rem' }}
                                name="desc"

                            >
                                <TextArea rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" />
                            </Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={1}>
                            <Item>

                            </Item>
                        </Col>
                        <Col span={23}>
                            <Item
                                label="解析规则"
                                labelCol={{ span: 3 }}
                                style={{ marginLeft: '1.4rem' }}
                                name="analysis_params"
                            >
                                <TextArea rows={2} placeholder="param1|param2|param3|param4" />
                            </Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        </SiteModal>
    )
}
export default EditModal;